How to submit a form with JavaScript?

Generally, a form is submitted when the user presses a submit button. However, sometimes, you may need to submit the form programmatically using JavaScript .
JavaScript provides the form object that contains the submit() method. Use the ‘id’ of the form to get the form object.

For example, if the name of your form is ‘myForm’, the JavaScript code for the submit call is:

document.forms[“myForm”]. submit();

JavaScript form submission is a key event when it’s about web apps and websites. A web form is something when a user is supposed to enter a few details and submit it for further processing. Since it is almost impossible to keep the validation checks in real-time submissions and using manpower is not an optimized way to deal with such things. Here, we will discuss about JavaScript form submissions

JavaScript Form Submission

When the form is submitted, the submit event gets triggered. Since it’s a client-side thing, it is usually validated before sending the details to the server. The method form.submit() is used for dynamic creation and sending the details to the server. The JavaScript form submission can be used for object creation and various attributes can also be used. The attributes can be class, id, tag, etc. Calling by attributes is quite simple, we just need to place the symbols properly. As we know, the class is selected when we place names preceded by full stops and the id with pound signs.

A Basic Submission Event

For the submit event of the form, the input type can take input type equal to submit or button type equal to submit. Here, we are going to use anb alert() for popping up our message “Mildaintrainings“. Also, it is important that we should use CSS for an appealing look. Here, only the background-color property is taken into consideration. One can add more things to it if required. For using the onsubmit function, the code is mentioned below:

<html>
<head>
<style>
input
{
background-color:#ccc;}
</style>
</head>
<body>
<h1> onsubmit function </h1>
<form onsubmit= "alert('Mildaintrainings!'); return false">
Enter your name <input type="text" value="name">
<input type="submit" value="Submit">
</form>
</body>
</html>

Output:

onsubmit function

Conducting Form Validations

The form validation script uses the onsubmit() event of the form to validate the input. The browser does not trigger the onsubmit event if you call the submit method programmatically. Therefore, if the form is using the form validator script, call the onsubmit method also to trigger the validation.

For giving an overall idea about form validation, an example is given here. Here, our objective is to check whether the input from the user is a real positive number or not. So, we’ve placed our constraint along-with if-else messages for correct and incorrect inputs

<html>
<body>
<h1>Form Validation</h1>
<p>Give me a Positive Integer</p>
<input id="pos" class=" col-6" placeholder="0" >
<button type="button" onclick="myFunction()" class="btn btn-dark m-4" >Submit</button>
<p id="myForm1"></p>
<script>
function myFunction() {
var x, text;
//Getting the value of the input field with id="pos"
x = document. getElementById("pos"). value;
// If x is less than 0, input is invalid
//otherwise input is valid
if (isNaN(x) || x < 0) {
text = "Input invalid";
} else {
text = "A valid Input";
}
document. getElementById("myForm1"). innerHTML = text;
}
</script>
</body>
</html>

OutPut:

Form Validation

Give me a Positive Integer

Usually, the form validation steps are for real-time end-user inputs and usually includes names, passwords, emails, etc.

Now let’s take an example for email validation field only. For validating an email in JavaScript form, the constraints can be checked with digits and symbols. A few general formats of email IDs:
mildain@domain.com
exapmle@domain.com

So a few valid checks can be:
Presence of ” @ “, no character before @, Top level domains cannot start with dots, double dots are not allowed.

JavaScript Code for Validating Emails

Similarly, we can do such validations for passwords, age, date of births and other things. As we noticed that JavaScript form makes it easy to do client side validations. Sometimes, the user inputs need to pass through certain algorithm checks from the server-side.

Now that you know about JavaScript Form Submission, check out the Javascript Certification Training by Mildaintrainings.Web Development Certification Training will help you learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Cloud.