Submitting a JavaScript Form

form submit javascriptJavaScript supports the idea of a form, which is a collection of elements on a page.  Once the elements on a given page have the values they are designed to have, the next obvious step is to send the form to the server for processing.  The JavaScript form object has a method called send() that accomplishes just that.  In the following paragraphs we’ll look at the details of the form object and the send() method and show you how to use them.

Get to know JavaScript, HTML5 and forms at Udemy.com.

Let’s review a “form” a little bit before we get on to submitting the form to the server.  In JavaScript, the “form” object represents the HTML “form” element.  In HTML, a form can be composed of a collection of other elements, and it is defined in HTML via the <form> </form> tags.  So, the idea that is you can define your form with standard HTML <form> statements and then manipulate the form in JavaScript using the form ID to “connect”.  JavaScript actually uses the HTML Document Object Model (DOM) to manipulate HTML elements.

The JavaScript form element has seven properties.  Let’s quickly look at each of them.  The “action” property contains the value of the action attribute of the HTML form tag.  You may already know that its purpose is to specify the URL that will receive and process the contents of the form in question.

The elements property of the form object is an array of objects that refer to all the elements in a particular HTML <form>.  There could be an input, element, a checkbox, a text area, and others.  JavaScript lets you access these elements as members of a zero-based array called elements.

The form object encoding property holds the “enctype” attribute from the HTML <form> tag.  The syntax for getting the encoding property is form.encoding

You can easily find out how many HTML elements are in the form by looking at the length property of the form object like so:  from.length

The form object has a method property too that holds the submission type specified for the form in the <form> tag.  The GET method sends form data to the server as URL variables.  The POST method embeds the form data inside the HTTP request.  You want to be careful about which method you use to send data in a form because the GET method exposes the data in the URL string.  So, obviously, GET shouldn’t be used to send sensitive data to the server – use POST instead.  Also, GET can result in the browser using cached data from an earlier request – which is probably not what you want, so pay attention to the HTTP method you choose.

Learn more about JavaScript and forms at Udemy.com.

The submit() method is sent to the form element to submit it.  For example, if you name your form “inputform1”, then the following syntax will submit it:  inputform1.submit().  

So as you probably realized by now, you can submit a form programmatically inside a <script> tag or you can invoke a <script> using the “onsubmit” event.  The “onsubmit” event is generated when the submit button in a form is clicked.   The “onsubmit” event is supported by all major browsers, so it’s safe to use without worrying about what browser your user has installed.   See the code snippet below for an example of the latter approach:

<html>

<body>

<form name=someform input type=”submit” onsubmit=”somefunction()”>

</form>

…

<script>

function somefunction()

</html>

As you go beyond the basic mechanics of submitting forms, you may want to understand more about AJAX (Asynchronous JavaScript and XML).  Ajax is a set of technologies and approaches used to create asynchronous web applications.  Why do we need such a thing?  Because web applications that can only send and receive full pages of data are too slow and unresponsive.  By using asynchronous (background) sends and receives, data on the page can be updated more nimbly and web applications can be more responsive and pleasant to use.  The overhead and time involved in updating one or a few fields on a web page can be much less than the cost of refreshing an entire page.  So AJAX is not one “thing” – it is a group of technologies, design approaches, and concepts. HTML5 adds a lot of new keywords to the input form.   Let’s run through just a few of them to give you an idea of what’s new.   The type attribute of the input element has expanded set of values.  Each keyword is associated with a “state” that determines the internal rules for values so defined.  For example, the ”tel” keyword gets associated with a state named “Telephone”.  The “telephone” state contains the edit rules for fields of this declared type.  Part of that rule says the field must be text with no line breaks.  There is another new keyword for the type attribute called “email”.  It is associated with a state named “E-mail”, which has its own set of constraints just like the “telephone” state does.  HTML5 features are making their way in to the various browsers at different rates.  IE 10 has added support for the new URL, E-Mail, and Range states.   The range state takes four attributes named, “min”, ”max”, “step” and “value”.  The value of the “value” parameter is used as the preset value of the control (a slider) being defined. So HTML5 is designed to support the construction of modern, responsive, interactive web pages.  There are many new parts to it and you can delve in to the details with a Udemy.com HTML5 course.

Ajax, as originally defined, included XML as the data interchange mechanism.  Over the years as the technologies have evolved. JSON has frequently replaced XML as the data interchange mechanism.  JSON (JavaScript Object Notation) is an easy to understand exchange protocol that defines message content as name : value pairs.  Early on the AJAX approach created some issues with the popular browsers in that successive “dynamic” updates of a page did not always get noticed by the browser’s history routines, so the browser’s back button didn’t always produce the expected result.  This sort of issue has been handled better in HTML5 with its well-defined API (application programming interface) for interacting with a browser’s history tracking functions.  Be sure to check the new features in HTML5 – it’s exploding in usage and popularity.