SoFunction
Updated on 2025-03-01

Example analysis of two types of form submission methods in JS

This article analyzes two types of form submission methods of JS. Share it for your reference, as follows:

1. Original

<form method="post" action="/student/stureg/add"  onsubmit="return subForm();">
<button type="submit" class="button red" style="font-size:18px; font-family:'Microsoft Yahei';">carry pay</button>

After the button is submitted here, execute the subForm() method. SubForm can verify the form and return false, but the form does not submit. Otherwise submit.

function subForm()
{
  var flag = true;
  $(".required").each(function(){
    if(!$(this).val())
    {
      flag = false;
      $(this).css({ border: "1px solid #F56939",borderRadius:"5px",color:"#F56939",height:"26px"});
      $(this).attr("status","1").val("This is a required item, please fill it in!");
    }
  });
 /*$(".idCardNo").each(function(){
   if(!idCardNo($(this).val()))
   {
    flag = false;
    $(this).css({ border: "1px solid #F56939",borderRadius:"5px",color:"#F56939",height:"26px"});
    if($(this).attr("status")!=1){
     $(this).attr("status","1").val("Please fill in the correct ID number!");
    }
   }
  });*/
 var reg = new RegExp("^[0-9]*$");
 $(".number").each(function(){
  if(!($(this).val()))
  {
   flag = false;
   $(this).css({ border: "1px solid #F56939",borderRadius:"5px",color:"#F56939",height:"26px"});
   if($(this).attr("status")!=1){
    $(this).attr("status","1").val("Please fill in the correct contact number!");
   }
  }
 });
 $(".exCardNo").each(function(){
  if(exCardNo($(this).val())==1)
  {
   flag = false;
   $(this).css({ border: "1px solid #F56939",borderRadius:"5px",color:"#F56939",height:"26px"});
   if($(this).attr("status")!=1){
    $(this).attr("status","1").val("This ID card has been registered!");
   }
  }
 });
  return flag;
}

Various verifications!

Set up submission

<form method="post" action="/student/stureg/reglogin" >
<a ><img src="/images/login/login_bt.png" style="cursor:pointer"/></a>

This is not a submit button, but a button that simulates submission.

$("#submit").click(function(){
   if(loginForm())
   {
     $("#form_login").submit();
   }
});

Trigger the submission event, use it here

onsubmit="return loginForm();" will have no effect, and it will be submitted regardless of whether it returns false or not. So you need to verify it before you actually submit it.

function loginForm(){
 var flag = true;
 $(".notnull").each(function(){
  if(!$(this).val())
  {
   flag = false;
   $(this).css({ border: "1px solid #F56939",borderRadius:"5px",color:"#F56939",height:"26px"});
   $(this).attr("status","1").val("Can't be empty");
  }
 });
 return flag;
}

Return false, and the submit method is not called.

These are two ways to handle the prelude to form submission.

For more information about JavaScript, readers who are interested in reading this site's special topic:Summary of JavaScript search algorithm skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary》、《Summary of json operation skills in JavaScript》、《Summary of JavaScript switching effects and techniques》、《Summary of JavaScript animation special effects and techniques》、《Summary of JavaScript Errors and Debugging Skills"and"Summary of JavaScript mathematical operations usage》

I hope this article will be helpful to everyone's JavaScript programming.