WebTechKitchen; Your Web Technology Kitchen, contact us to create, or maintain your websites and other digital properties.

Basic Form Submittal With Jquery

Submitted by barnettech on Tue, 07/30/2013 - 22:21

If I have this HTML:

<html>
<head> </head>
<body>
</script>
<script type="text/JavaScript" src="basic_javascript.js"></script>
 
<p>Click the button to say hello </p> <button id="myButton">Click Me</button> <p id="targetId"></p>
 
<form>
First name: <input id="firstname" type="text" name="firstname"><br>
Last name: <input id="lastname" type="text" name="lastname">
</form>
 
</body> </html>
 
and this basic_javascript.js file:
 
$(document).ready(function() {
  $('#myButton').click(function() {
    var firstName = $("#firstname").val();
    alert('hi ' + firstName);
  });
});
 
I can fill out the form with my first name and there will be an alert after I hit submit saying "hi James" ... if I inputed "James" in the firstname field.  I only wrote enough JavaScript / JQuery in this example to show retrieving the value from the first name field in the form.