Onclick Clear Input Field jQuery
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Dikshita
In this article we will show you the solution of onclick clear input field jQuery and how to clear form’s input fields when onclick triggered in jquery.
Here we needs to use val() and on() method for achieve the result. The on() method attaches one or more event handlers for the selected elements and child elements.
The val() method collects input field elements value given by dynamic users. Both are used to proceeds clear concept on input fields.
Step By Step Guide On Onclick Clear Input Field jQuery :-
At html block, we defined form with two input elements for collects name, mail id from users and lastly button ‘Clear’.
In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser and within that we waiting for click event occurrence which is appended with button.
Here we specifying form’s input field by class attributes and respected fields value set to null value for clear purpose.
<!DOCTYPE html>
<html>
<head>
<title>Clear Input Field</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").on("click",function(){
$(".nm").val("");
$(".em").val("");
})
});
</script>
<body>
<form>
<input type="text" class="nm" placeholder="Enter Name">
<input type="text" class="em" placeholder="Enter Email">
</form>
<button>Clear</button>
</body>
</head>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() method within that we defined on() method which is appends with button for verify generated click event occurrence when user clicks on ‘Clear’ button.
- Within function we specified form’s input element by classes ‘.nm,.em’ then both are appends with val() method with empty quotes that is referred null values.
- In html block we defined form with two input elements ‘Name,Email’ for collect inputs from users and button ‘Clear’.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to clear input fields in jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.
When we executes program on browser we can see two empty text boxes and button ‘Clear’ now user needs to fill text box then clicks on clear button.
Then we can see form elements values are erased by sets null value on respected input boxes.
I hope this article on onclick clear input field jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
