Last Updated:

JavaScript: Submit a form to the server

JavaScript Submit a form to the server

Form data is submitted by clicking the Submit button. Often this causes the task to check the data for correctness first and send it to the server only if correct. Otherwise, you should display an error warning and return to editing. This tactic is called "fool protection" and it does not allow you to enter knowingly incorrect data. For example, you want a visitor to be sure to get an email address. Then the entered line should contain the @ symbol, which unambiguously determines that this is the address, and not something else, and not some address, but an electronic one. Also, there should be no spaces and other invalid characters like Russian letters. Only after the script checks everything and gives the go-ahead, the form can be sent to the server.

For "manual" submission of the form to the server, there is a method. Its use is as follows (example 1).submit

Example 1. Using the submit methoddocument.forms["form name"].submit() or
document.forms.formname.submit()

Data validation is best designed as a separate function and accessed as needed (Example 2). In this case, you create a validForm function that verifies that the value entered in the text box is greater than zero, but less than ten. When you enter text or another number, a warning is displayed, the form data itself is sent only when the correctly specified number is specified.

Example 2. Validate form data

<html>
<body>
<head>
<script language="JavaScript">

function validForm(f) {
d = parseInt(f.num.value); // Convert to integer
if(!d || d < 1 || d > 10) alert("Something entered incorrectly") // Display a warning
else f.submit() // Submit to the server
}

</script>
</head>

<body>

<form action=/cgi-bin/add.cgi onSubmit="validForm(this); return false">

Enter a number from 1 to 10<br>
<input type=text name=num>

<input type=submit value="Submit">
</form>

</body>
</html>

In the example, the data is sent only after our own validForm function has been executed. To avoid accessing a form through a form collection, you can pass the . This is much shorter and more convenient, in the function itself it is now enough to use f.submit() to send, where f is the argument of the function pointing to the form. The string "return false" must be added when the onSubmit event is raised. It is responsible for ensuring that no data is sent to the server after the validForm function is finished.this


Another way to submit form data to the server and pre-validate it is to use the onClick event. A regular button is added to the form, to which this event is raised and <> (example 3).

Example 3. Using the onClick event

<html>
<body>
<head>
<script language="JavaScript">

function validForm(f) {
d = parseInt(f.num.value); // Convert to integer
if(!d || d < 1 || d > 10) alert("Something entered incorrectly") // Display a warning
else f.submit() // Submit to the server
}

</script>
</head>

<body>

<form action=/cgi-bin/add.cgi onSubmit="return false">

Enter a number from 1 to 10<br>
<input type=text name=num>

<input type=button value="Submit" onClick="validForm(this.form)">
</form>

</body>
</html>

The onSubmit event, which is specified in the tag does not seem to be necessary, but it performs a specific task. Form data can be sent to the server and by pressing the Enter keypad when the focus is on the form element. Then there is a sending to the server, bypassing our onClick event and, accordingly, data validation. To prevent this from happening, add the string onSubmit="return false".FORM

After receiving the value entered in the text box, it is checked that this is a number and that it is less than ten, but greater than zero. Only in this case is the submit method launched. Note that in this case, the argument to the validForm function is the keyword , not as in Example 2.this.formthis