Form handling onsubmit, onchange, onselect, onblur, onfocus

1. Introduction

2. onsubmit

         Using this event handler will execute an action when the user clicks on the submit button. Let’s look at the code below for its  sample use. Using onsubmit calls a JS function myFunction()and prints the entered username.

          This code will also demonstrate how JS retrieves the input of the user from the textbox and uses that input for processing in JavaScript. The value property is used to get the value entered by the user in the input element. Remember how we used the innerHTML property to indicate the contents of an HTML element? The concept of value works the same way.

2.1. Retrieving the values from checkboxes using value and onsubmit

          The code snippet below shows another example of using onsubmit and value to retrieve values from the user for processing in the JavaScript code. This example uses a set of checkbox options that have the same name. The JavaScript code retrieves all options using getElementsByName() and loops through all options in the checkbox set and checks each option if they are checked. When the item is checked, it is added to a string to be alerted.

3. onchange

          This is used to detect changes in value of form elements.

          The example below shows a code where a function myFunction() is called when the user changes the value of their input in the textbox. When the user changes their input in the textbox, the new value is printed. When the user presses enter but the value in the textbox has not changed, no action is executed.

          Another example is shown below on how the onchange event handler is used. This time, instead of a textbox, a selection element is used. A function is triggered whenever the user changes their choice.  Notice that the value property also works in retrieving the input from a select element.

4. onselect

onselect is used to track when a user selects/highlights a text inside an input element or a textarea.

The code below is an example of the use of onselect. When the user selects any text inside the textarea, the function myFunction() is called.

<form>
           <label style="valign:middle" for="comment">Comments</label>
           <textarea id="comment" onselect="myFunction()" cols="50" rows="10"> </textarea>
</form>
<script>
     function myFunction() {
             var txtArea = document.getElementById("comment");
             var selectedText;   
             if (txtArea.selectionStart != undefined) {    
                  var startPosition = txtArea.selectionStart;
                  var endPosition = txtArea.selectionEnd;
                  selectedText = txtArea.value.substring(startPosition, endPosition);
             }
             alert("You selected : " + selectedText);
     }
</script>

5. onblur

          The onblur event handler is used to track a user going away from an input element. “Goes away” means that the user may have clicked away, scrolled away, or clicked on other input elements. It is mainly used for checking if the input from the user is valid. One example is when you want to make sure that the user will input a value in a textbox. When the user clicks outside of the textbox, you can use this event to alert or display a pop-up that informs the user that they are required to input a value.

          The example below shows a code where a function is executed when the user clicks away from the text box. The user is alerted to go back to the textbox if the value is empty, else, the user is alerted

6. onfocus

          When onblur tracks the going away of a user from an input element, onfocus tracks the opposite. onfocus, as the name implies, is when a user focuses on a form element. Focusing could mean clicking on the form element or selecting it.

          The example below shows a code with a textbox and the code uses the onfocus and onblur function together in a single element to create an interaction with the user. When onfocus is triggered, the width of the textbox is increased. When onblur is triggered, the width of the textbox is decreased and if there is no value in the textbox, the user is alerted to enter a value.

7. Summary and References

Summary

References