Lessons menu
JavaScript - advanced - Lesson nr. 5
HTML forms with JavaScript

What this lesson is about?
In this lesson we turn back to the HTML forms. We look at some possibilities to complement the already implemented validations. We learn about a new form element, the range type number input and some new events that can be used with forms.

New form element in this lesson:
<input type="range" /> - this HTML tag is used to add an input element to your page, when the number’s value does not really count, we need the scale.

New JavaScript property in this lesson:
min – property to the range element, marks the lowest value it can reach.
max – property to the range element, marks the highest value it can reach.
step – property to the range element, marks the difference between possible values that can be reached.
value – this property is used in case of multiple form elements, to get/set their content.
checked - this property is used instead of the value property for checkbox elements. The value is logical: true if it is checked and false if it is not.

New events in this lesson:
onfocus – this event occurs when we click or change with tab to a form element, an element can have focus automatically (autofocus property).
onfocusout – this event occurs when we leave a form element, that had the focus previously. For example a text box after completion.
onchange – this event is triggered, if the element is changed. This is different from the focusout, because changes may happen more than once between a focus and a focusout event.
onsubmit – this event is triggered, if we click on the submit button in a form. The event relates to a form.

New method in this lesson:
isNaN(data to be checked) –  this function decides if the value given is a number, or can be converted to number. Returns true for non-numeric, and false for numeric data.

Using forms with JavaScript:
We need to add names or/and ids to the form elements to change them from the program code. There can be from elements without form tags. They can be used with JavaScript, but we need a <form> tag if we want to send the result ultimately back to the webserver.

Example on form element without an actual form:

This example increases the size of the image with the value provided through the textbox.

In this example the textbox has an id. Using this id and the value property we get the number written in the textbox. We use the Number function again to convert the value from text to number. Remember if we use + operation on text we do not get the expected result.

If we enter letters or leave the box empty there will be no increase made.

Form data validation with JavaScript:
Previously we used form validation HTML code: the required keyword, pattern and carefully chosen form elements.

Adding JavaScript code to validate data can mean personalized error message and additional possibilities: you can compare the values of different elements, you can test the type of the value introduced.

To diminish the possibility of errors, you can hide and show new elements depending on the state of other elements.

Example on validation on actual form:

 In the example above we check if the text boxes are filled and the texts are the same.

We reference one textbox by id and one by name. The second reference needs the name of the form too.

We tied the validation function to the onsubmit event of the form. The only problem is, that the texts previously introduced disappear and we need to complete all again, if an error appears.

As an update to the previous example, this code does not result in resetting the form element if an error pops up.

The function is completed with return statements to return true if everything is alright and false if we found an error. The logical value resulted must be returned again in the form tag row.

There is no need to use the else statement in this function, because with the return statement the function is finished, the other if-s are not visited.

Example on using range type input element:

In this example we use for the first time a range type input element.

The width of the image should be changed along with the changing of the element’s value.

The reading of the value should be made every time it is changed. The onchange event did not work from the tag, so we used the addEvenListener method to get it running.

When the range element is changed the value is added to the width property of the image by the change function.

Example on radio button:

In the example above the form has two radio buttons with the same name, using this name we can reference the radio buttons as one. To decide which one is selected we use their value: red or blue in this example. Choosing the color and submitting the data we change the background color.

Using the return value false, we avoid that the page reloads returning to the white background.

1. In the forms.html modify the first form: if the name is introduced, modify the texts on the form. For example if the name is Mike, make the changes: Mike’s status (instead of User status), Mike’s grade to our website and Mike’s dream job.

You need to ensure that the texts can be referenced – they are not exactly form elements so you need to find them by id.
View the result
2. In the forms.html modify the second form: the textbox shows error message if sent unfilled, the other three form elements have a default value and cannot be set empty (without a value) or with a value outside the defined interval.

Show a message if the text box is empty. There is a pattern – which will trigger an error message if the format is wrong. We could use required, but using JavaScript we can add our own message.
Ensure that at least one of the checkboxes is checked. They need names too – in case of checkboxes these names need to be different (unlike by the radio buttons).
Use return statement like in the third example (to keep the data already introduced) in this lesson and add a name to the form.
Trigger a success message, if all the conditions from before are met.

View the result
3. Modify the gallery.html file: add a range type input element to the Random picture part, above the picture. The elements value should change between 1 and 6, by a step value of 1. If the element is changed the picture should change too.
View the result
4. Modify the forms.html file:

Add a new form for calculating lesson prices containing a textbox for the number of lessons needed, 3 radio buttons for the options: individual lesson(for 15 EUR), small group (10 EUR) and larger group (5 EUR). We should be able to check only one. There should be a submit button too.

Use data validation (HTML and JavaScript combination) to ensure that the textbox is not empty and contains a positive number. One of the radio buttons must be checked (we can check one as default). Use error messages if needed.

If all data is correct, calculate the price to be paid multiplying the number of hours and the selected price. Show the result in an alert box.

View the result
1. Which statements are true about the range element below?
<input id="r_e" type="range" min="10" max="30" step="5"/>
2. If there is form with the name f1, with a textbox with the name tb1 how do we access its content?
3. Which of the following has as a result the value true?
4. Which of the following possibilities cannot be used to ensure that the textbox named tb1 from the f1 is not empty?
Exclamation mark This site is using cookies. By continuing to browse the site, you accept their use! I accept