Submit form with javascript onload

JavaScript: Catch Submit of Form

In this tutorial, I would like to show you how to catch a click on the submit button of an HTML form. A possible field of application would be checking the values a user has typed dynamically before submitting, for example for showing a message to the user if necessary.

I would like to present two different solutions for this. The first way is using pure JavaScript, the second solution works with jQuery.

The HTML Form

For the demonstration, we are using two simple forms. The first should illustrate the pure JavaScript way, the second the jQuery one.

Both forms are consisting of one submit button and one text input field. In order to be able to address the forms out of the script later, we have applied the unique IDs «form_js» and «form_jquery» to the forms. Additionally, also the input fields each has a unique ID.

Script using pure JavaScript

First, we want to have a look at the pure JavaScript solution. After loading the entire page (window.onload), we are using document.getElementById() for defining an own OnSubmit-function for the form with the ID «form_js».

window.onload=function() < document.getElementById('form_js').onsubmit=function() < if (document.getElementById('inp_js').value == '') < alert('Please fill in the field.'); return false; >else < return true; >> >

This function is checking the value of the input field to see whether it is empty. If yes, a message box containing a warning is displayed and «false» is returned. This ensures that the field could not be submitted. However, if the field is containing some text, instead, we are turning «true» so that the form will be submitted.

Script using jQuery

The next code is leading to the same result. However, this time we are using jQuery. Again, our function should be set after the full HTML page is loaded. This can be done using $(document).ready() in the jQuery world.

Afterwards, we catch the form submit with jQuery (form with the ID form_jquery). Again, we are checking at this point, whether our input field is containing a non-empty value. If not, again we are showing our warning notification and we are calling .preventDefault(). With this function, we can prevent the form submit.

Note

Checking a form with JavaScript can not substitute a check on the server site. JavaScript is useful to create some warning messages for the user. However, checking the values should always be done within the PHP script on the server. You have to keep in mind that JavaScript can be disabled and easily manipulated.

About the Author

You can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? — sttmedia.com/contact
Show Profile

Related Topics

jQuery: Submit complete form and receive content with Ajax

jQuery: Disable Submit Button if no Checkbox is selected

How to resize Image before Upload in Browser

Send HTML5 Canvas as Image to Server

jQuery: Send HTML5 Canvas to Server via Ajax

MIME Types of Microsoft Office File Formats

JavaScript: Show warning when leaving the page

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.

Источник

How to submit an HTML form on loading the page?

In this post we will show you submit an HTML form on loading the page, hear for submit an HTML form on loading the page we will give you demo and example for implement.

Example for submit HTML form on loading using jquery

this is Example for submit HTML form on loading using jquery and how to lode page on submit.

 Please Waite submit HTML form on loading.  

Onload event Example for submit HTML form on loading

this is Example for submit HTML form on loading using Onload event and how to lode page on submit.

 Please Waite submit HTML form on loading.    

Onclick event Example for submit HTML form on loading

this is Example for submit an HTML form on loading using Onclick event and how to lode page on submit.

 Please Waite submit HTML form on loading.    

Example for submit an HTML form on loading using function

this is Example for submit HTML form on loading using function and how to lode page on submit.

Hope this code and post will helped you for implement submit an HTML form on loading the page. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org

Источник

How to submit a form using JavaScript

However, we won’t use these two attributes in this post as we are not working with a server. Let us now write HTML code for form creation: < html lang = "en" > < head > < title >Submit Form Using JavaScript < / title > < / head > < body > < form id = "myForm" > < input type = "text" name = "username" id = "username" placeholder = "Enter your Username" > < input type = "password" name = "password" id = "password" placeholder = "Enter your Password" > < button type = "submit" >Submit < / button > < / form >< script src = "code.js" > < / script > < / body > < / html >Question: I have a form where user enter a cnic number if this number is less than 15 then alert a msg and stop the form submission but issue is that form submission cannot stop when the number is less than 15.

How to submit a form using JavaScript

JavaScript is a high-level web programming language that is becoming popular day by day. It gives our web pages and web applications the ability to perform certain actions and make them interactive. JavaScript offers forms to web developers that assist developers in collecting data from users and storing that data in a database. When working with numerous apps and websites, form submission is a critical phenomenon.

In this post, we will go through how to submit a form using JavaScript in detail but first, we will see how to create an HTML form.

HTML Form Creation

An HTML form can be created by using the tag that is offered by HTML itself and it takes two attributes:

• The first is the “action” that contains a URL(which handles the submission of the form process).
• The second attribute is the “method” that has an HTTP method.

An HTTP method can be of various types and the two most commonly used are:

However, we won’t use these two attributes in this post as we are not working with a server.

Let us now write HTML code for form creation:

In the above code, we created a form and gave the id attribute to the form whose significance we will see in a while. Next, we defined two input fields and then defined a button that has a type of submit . In the end, we placed a script tag and referenced the filename “ code.js ” that will contain our JavaScript code.

Access Form and retrieve Values from the form

Now that we are done with creating our form, let us access this form from JavaScript and then retrieve the values of username and password that are present inside the form tag. To access the form we will use the id attribute mentioned earlier via the following code:

In the same manner, we can also get the values from the input fields using the id attribute given in the HTML form. The only difference is that we will give the value at the end of the getElementById so that we can retrieve the value from the input field and not the element itself:

var username = document. getElementById ( ‘username’ ) . value ;

var password = document. getElementById ( ‘password’ ) . value ;

Submit Form and Validate Data

To submit the form, we will use the event listener which listens for a specified listener continuously. An event is simply an interaction of HTML and JavaScript triggered by a user or browser when the user manipulates a page and this event is handled by the Event listener.

var myForm = document. getElementById ( ‘myForm’ ) ;
// event listener that listens for submit event
myForm. addEventListener ( «submit» , function ( e ) <
e. preventDefault ( ) ;
// retrieve Values
var username = document. getElementById ( ‘username’ ) . value ;
var password = document. getElementById ( ‘password’ ) . value ;

// validate username and password fields
if ( username == » || password == » ) <
alert ( «Please Fill all required fields» ) ;
>
else <
alert ( «Form submission successful» ) ;
>
> )

In the above code, first, we get the reference of the form using the id attribute and then initiate an event listener of “submit” on this form. The function specified in the event listener will be invoked once the user clicks on the submit button.

Inside the function, we have performed our validation, that is if the input fields of username or password are empty then we will see a message in the alert box saying Please Fill all required fields otherwise we will get the message of Form submission successful.

Let us check first by clicking on the submit button leaving the two input fields empty:

Let us now fill the two fields and see the output:

Conclusion

Forms are very helpful in gathering data from users and then manipulating or playing with that data in JavaScript. In this post, we took help from an HTML tag to initialize a form and then went on to define two input fields and a button. Next, we accessed the form element inside a javascript file and then retrieved the values of form input fields using the id attribute.

  
CNIC No. * 
 
" maxlength="15" placeholder="CNIC #" required>