Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

320 CHAPTER 7 Working with forms

<select name="favoriteCar">

<option>Ford Fiesta</option>

<option value="Chevy">Chevrolet</option>

<option>BMW</option>

</select><br />

Comment:

<input type="text" name="comment" />

</form>

<button id="myButton">Click Me</button>

</body>

</html>

The form contains a drop-down list of three <option> elements. Each <option> element

has displayed text content. In addition, the <option> element can have a value attribute. If

the value attribute is not set, the value defaults to match the text content. The form also con-

tains a text box for the user to enter a comment. The HTML document has reference to the

default.js file that contains the following code.

/// <reference path="_references.js" />

$(document).ready(function () {

$('#myButton').on('click', submitTheForm);

});

function submitTheForm() {

$('#myForm').submit();

}

This code attaches the submitTheForm function to the click event of the <button> element

whose id is myButton. The <button> element is not inside the form, and its type attribute is

not set to submit. In this scenario, the <button> element is programmed to call the submit-

TheForm function, which calls the jQuery submit method to submit the form.

In the example code, the <form> element has only an id, so the method attribute will

default to GET, and the action attribute will default to the same URL as the page. If the user

selects Ford Fiesta, types This is Bob’s car! in the comment text box, and clicks the button,

you’ll see the URL change, as shown in Figure 7-4.

FIGURE 7-4 he URL changing when the button is clickedT

The URL now includes the QueryString, which is everything after the question mark (?). The

QueryString contains the following.

favoriteCar=Ford+Fiesta&comment=This+is+Bob%27s+car%21