AJAX in Javascript

To connect to the PHP page, we are going to use Asynchronous Javascript eXtensions (AJAX). We first create a Javascript XMLHttpRequest object. We then use that object's open method to connect to the PHP page and we send it a request. We process the page reply in a function linked to the XMLHttpRequest object's load event. The PHP page's reply will be captured in this.responseText. We can use JSON.parse to transform a JSON file into Javascript variables.

The example below processes getbook.php from our lesson on PHP for the web.

For more information on AJAX, go here.

Any questions or comments should be directed to: The creator's email

A Dynamic Search Box

The below example combines the concepts we have already learned to create a dynamic search box for retrieving information about a book.

For more information on AJAX, go here.

Any questions or comments should be directed to: The creator's email

Simple Pulldowns

Pulldowns are defined by the <select> tag. The options in the pulldown are defined by <option> tags. The actual stored value of the option is defined by the value attribute in the option tag. The displayed value is the contents of the innerHTML.

The selected attribute identifies which option has currently been chosen. Putting selected next to an option identifies it as a default value.

The standard event of the pulldown is the change event.

For more information on pulldowns, go here.

Any questions or comments should be directed to: The creator's email

Database Pulldowns

The example below combines what we've learned to show how to create a pulldown whose values come from a database.

Any questions or comments should be directed to: The creator's email

Simple Listboxes

Listboxes are implemented in HTML as pulldowns with long heights. To allow multiple options to be selected in a listbox, use the multiple attribute.

We can identify which options are selected by looping through the options looking for the ones where selected=true.

Any questions or comments should be directed to: The creator's email

Sending Information Between Listboxes

One common thing to do is to send information between listboxes. The below example demonstrates one way of doing this. In the example, choices is an array of listbox choices. It contains three attributes- value, which holds the index of the choices array, displayval which is the thing to display in the listbox and whichbox, which determines whether the choice is displayed on the left listbox or right listbox.

Hitting one of the buttons between the listboxes, changes whichbox to "L" or "R". The screen then redraws the two listboxes.

Any questions or comments should be directed to: The creator's email

Radio Buttons

Radio buttons are defined in HTML using <input type="radio">. Radio buttons in the same radio group are given the same name attribute. The value of the radio button is stored in the value attribute. While for most kinds of control, the label appears in front of the control, the typical radio button label appears behind the radio button.

The selected radio button is identified by the checked attribute. Note this is different from pulldowns and listboxes which are identified by the selected attribute.

It can be awkward determining which radio button of a radio group has been checked. To do this, we typically loop through all radio buttons with the same name using document.getElementsByName until we identify the one where checked==true.

For more information on radio buttons, go here.

Any questions or comments should be directed to: The creator's email

Check Boxes

Check boxes are defined in HTML using <input type="checkbox">. The value of the checkbox is stored in the value attribute. While for most kinds of control, the label appears in front of the control, the typical check box label appears behind the check box.

The selected check box is identified by the checked attribute. Note this is different from pulldowns and listboxes which are identified by the selected attribute.

For more information on check boxes, go here.

Any questions or comments should be directed to: The creator's email

Moving Between Pages

Use window.location to move between pages.

For more information on window.location, go here.

Any questions or comments should be directed to: The creator's email

Sliders

Sliders are defined in HTML with the <input type="range"> command. The minimum and maximum value of the slider are specified by the min and max attributes. The default value of the slider is specified by the value attribute.

The typical slider event is called input. It is a good idea to ensure the slider value is converted to an integer or decimal with parseInt and parseFloat.

For more information on sliders, go here.

Any questions or comments should be directed to: The creator's email

Color Pickers

Color Pickers are defined in HTML with the <input type="color"> command. The value of a color picker is a six digit hexadecimal value prefaced by a "#" character. This denotes the amount of red, green and blue in the color.

The typical color picker event is change.

For more information on color pickers, go here.

Any questions or comments should be directed to: The creator's email

Fixing Decimal Places

To fix the number of decimal places of a number, use the toFixed() method.

For more information on toFixed, go here.

Any questions or comments should be directed to: The creator's email

Converting to Upper and Lowercase

toUpperCase() and toLowerCase transform a string into upper and lowercase letters respectively.

For more information on toUpperCase and toLowerCase, go here and here respectively.

Any questions or comments should be directed to: The creator's email

Substring Search

The search() method allows you to do a substring search in Javascript.

For more information on search, go here.

Any questions or comments should be directed to: The creator's email

Data Lists

Data lists are a primitive implementation of a combo box- a textbox with pulldown options.

Unfortunately, data lists are not suitable when the pulldown options have duplicate values. For example, they are not suitable when you are searching for an ID by name where there can be two people of the same name, but different IDs.

For more information on datalists, go here.

Any questions or comments should be directed to: The creator's email