Create ajax_front_end_example.html

Very basic front end web page using AJAX to submit to the REST API. For issue typpo#49 (typpo#49). I can update with style sheets of the main site if needed.
esmith-ssd · Sep 12, 2015 · 9b3348a · 9b3348a
1 parent ff61a1b
commit 9b3348a
Showing 1 changed file with 46 additions and 0 deletions.
diff --git a/server/views/ajax_front_end_example.html b/server/views/ajax_front_end_example.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+					  "http://www.w3.org/TR/html4/strict.dtd">
+<HTML>
+   <head>
+		<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
+		<title>ajax_front_end_example</title>
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+		<script type="text/javascript">
+			function submitTextMessage()
+			{
+				var phoneNumber = document.getElementById("phoneNumber").value;
+				var textMessage		= document.getElementById("message").value;
+				var formData 	= {};
+				formData["number"] 		= phoneNumber;
+				formData["message"]		= textMessage;
+
+				$("#result").html("Loading....");
+				$.ajax({
+					url: "http://textbelt.com/text",
+					data: formData,
+					type: 'POST',
+					success: function(data)
+							{
+								$("#result").html(data.success + ":" + data.message);
+							}
+				});
+			}
+		</script>
+   </head>
+   <BODY>
+		<div class="content drop-shadow lifted">
+			<label>Phone Number:</label>
+			<input type="text" id="phoneNumber" />
+
+			<label>Message:</label>
+			<input type="text" id="message" />
+
+			<div style="clear:both"></div>
+
+			<input type="button" onclick="submitTextMessage()" value="Send message" />
+
+			<label style="padding-top: 25px">Result:</label>
+			<div id="result"></div>
+		</div>
+   </BODY>
+</HTML>