Page 149 - CITS - Computer Software Application -TT

COMPUTER SOFTWARE APPLICATION - CITS

The HTMLFormElement also provides the following useful methods:

• submit() – submit the form.
• reset() – reset the form.
Referencing forms
To reference the <form> element, you can use DOM selecting methods such as getElementById():
const form = document.getElementById(‘subscribe’);Code language: JavaScript (javascript)

An HTML document can have multiple forms. The document.forms property returns a collection of forms
(HTMLFormControlsCollection) on the document:
document.formsCode language: JavaScript (javascript)
To reference a form, you use an index. For example, the following statement returns the first form of the HTML
document:
document.forms[0]Code language: CSS (css)
Submitting a form

Typically, a form has a submit button. When you click it, the browser sends the form data to the server. To create
a submit button, you use <input> or <button> element with the type submit:
<input type=”submit” value=”Subscribe”>Code language: HTML, XML (xml)

Or
<button type=”submit”>Subscribe</button>Code language: HTML, XML (xml)
If the submit button has focus and you press the Enter key, the browser also submits the form data.
When you submit the form, the submit event is fired before the request is sent to the server. This gives you a
chance to validate the form data. If the form data is invalid, you can stop submitting the form.
To attach an event listener to the submit event, you use the addEventListener() method of the form element as
follows:

const form = document.getElementById(‘signup’);
form.addEventListener(‘submit’, (event) => {
// handle the form data
});Code language: JavaScript (javascript)

To stop the form from being submitted, you call the preventDefault() method of the event object inside the submit
event handler like this:
form.addEventListener(‘submit’, (event) => {
// stop form submission

event.preventDefault();
});Code language: PHP (php)
Typically, you call the event.preventDefault() method if the form data is invalid. To submit the form in JavaScript,
you call the submit() method of the form object:
form.submit();Code language: CSS (css)
Note that the form.submit() does not fire the submit event. Therefore, you should always validate the form before
calling this method.

Accessing form fields
To access form fields, you can use DOM methods like getElementsByName(), getElementById(), querySelector(),
etc.

Also, you can use the elements property of the form object. The form.elements property stores a collection of the
form elements.

136

CITS : IT&ITES - Computer Software Application - Lesson 37 - 46