How to submit an HTML form using JavaScript?

JavascriptWeb DevelopmentFront End Technology

To submit an HTML form using JavaScript, we are calling validate() to validate data when the onsubmit event is occurring.

Example

You can try to run the following code to submit an HTML form −

<html>
   <head>
      <title>Form Validation</title>
      <script>
         // Form validation
         function validate() {
            if( document.myForm.Name.value == "" ) {
               alert( "Please provide your name!" );
               document.myForm.Name.focus() ;
               return false;
            }
            if( document.myForm.EMail.value == "" ) {
               alert( "Please provide your Email!" );
               document.myForm.EMail.focus() ;
               return false;
            }
            if( document.myForm.Zip.value == "" ||
            isNaN( document.myForm.Zip.value ) ||
            document.myForm.Zip.value.length != 5 ) {
               alert( "Please provide a zip in the format #####." );
               document.myForm.Zip.focus() ;
               return false;
            }
            if( document.myForm.Country.value == "-1" ) {
               alert( "Please provide your country!" );
               return false;
            }
            return( true );
         }
      </script>
   </head>
   <body>
      <form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
         <table cellspacing = "2" cellpadding = "2" border = "1">
            <tr>
               <td align = "right">Name</td>
               <td><input type = "text" name = "Name" /></td>
            </tr>
            <tr>
               <td align = "right">EMail</td>
               <td><input type = "text" name = "EMail" /></td>
            </tr>
            <tr>
               <td align = "right">Zip Code</td>
               <td><input type = "text" name = "Zip" /></td>
            </tr>
            <tr>
               <td align = "right">Country</td>
               <td>
                  <select name = "Country">
                     <option value = "-1" selected>[choose yours]</option>
                     <option value = "1">Canada</option>
                     <option value = "2">Sri Lanka</option>
                     <option value = "3">Mexico</option>
                  </select>
               </td>
            </tr>
            <tr>
               <td align = "right"></td>
               <td><input type = "submit" value = "Submit" /></td>
            </tr>
          </table>
      </form>
   </body>
</html>
raja
Published on 16-Feb-2018 10:15:45
Advertisements