Basic Form Submittal With Jquery

If I have this HTML:

<head> </head>
<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>
First name: <input id="firstname" type="text" name="firstname"><br>
Last name: <input id="lastname" type="text" name="lastname">
</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.