JavaScript函数执行不执行上形成一个功能提交的onsubmit

Question

我有麻烦。当我使用onclick事件调用简单的alert()函数进行测试时，它可以正常工作onclick="alert('hi')"但是当我将事件更改为onsubmit="alert('hi')"时，它不会调用该函数？谁能告诉我为什么？我如何解决它？

<form role="form" id="theForm" name="myForm" method="POST" action="processApplication.cfm"> 
 
     
 
     <fieldset id="personal"> 
 
      <legend>Personal</legend> 
 
      
 
      <div class="form-group row"> 
 
      <div class="col-sm-1"><span></span></div> 
 
      <div class="col-sm-3 col-md-2 text-nowrap"> 
 
       <label for="cfnm" class="control-label form-adjust">First Name*</label> 
 
      </div> 
 
      <div class="col-sm-8 col-md-4 form-adjust"> 
 
       <input type="text" class="form-control" id="cfnm" name="firstName" placeholder="First Name" value="" maxlength="30"><i class="form-control-feedback glyphicon glyphicon-remove"></i> 
 
      </div> 
 
      </div> 
 
    
 
      <div class="form-group row"> 
 
      <div class="col-sm-1"><span></span></div> 
 
      <div class="col-sm-3 col-md-2 text-nowrap"> 
 
       <label for="cmnm" class="control-label form-adjust">Middle Name</label> 
 
      </div> 
 
      <div class="col-sm-8 col-md-4 form-adjust"> 
 
       <input type="text" class="form-control" id="cmnm" name="middleName" placeholder="Middle Name" value="" maxlength="30"> 
 
      </div> 
 
      </div> 
 
     
 
      <div class="form-group row"> 
 
      <div class="col-sm-1"><span></span></div> 
 
      <div class="col-sm-3 col-md-2 text-nowrap"> 
 
       <label for="clnm" class="control-label form-adjust">Last Name*</label> 
 
      </div> 
 
      <div class="col-sm-8 col-md-4 form-adjust"> 
 
       <input type="text" class="form-control" id="clnm" name="lastName" placeholder="Last Name" value="" maxlength="40"><i class="form-control-feedback glyphicon glyphicon-remove"></i> 
 
      </div> 
 
      </div> 
 
      
 
      <div class="form-group row"> 
 
      <div class="col-sm-1"><span></span></div> 
 
      <div class="col-sm-3 col-md-2 text-nowrap"> 
 
       <label for="ceml" class="control-label form-adjust">Email*</label> 
 
      </div> 
 
      <div class="col-sm-8 col-md-4 form-adjust"> 
 
       <input type="text" class="form-control" id="ceml" name="email" placeholder="Email" value="" maxlength="128"><i class="form-control-feedback glyphicon glyphicon-remove"></i> 
 
      </div> 
 
      </div> 
 
    
 
      <div class="form-group row"> 
 
      <div class="col-sm-1"><span></span></div> 
 
      <div class="col-sm-3 col-md-2 text-nowrap"> 
 
       <label for="czip" class="control-label form-adjust">Personal URL</label> 
 
      </div> 
 
      <div class="col-sm-8 col-md-4 form-adjust"> 
 
       <input type="text" class="form-control" id="curl" name="url" placeholder="Personal URL" value="" maxlength="10"> 
 
      </div> 
 
      </div> 
 
     </fieldset> 
 
    
 
     <fieldset>    
 
      <div class="form-group row"> 
 
       <div class="col-sm-4 col-md-3"> 
 
        
 
        <input id="sbtn" name="submit_button" type="submit" value="Submit" class="btn btn-primary form-adjust" onsubmit="alert('hi');"> 
 
       </div> 
 
      </div> 
 
     </fieldset> 
 
     
 
    </form>

Answer 1

的onsubmit是形式的属性，所以要尽量将其更改为

<form role="form" id="theForm" name="myForm" method="POST" action="processApplication.cfm" onsubmit="alert('hi');"> 

    <fieldset id="personal"> 
     <legend>Personal</legend> 

     <div class="form-group row"> 
     <div class="col-sm-1"><span></span></div> 
     <div class="col-sm-3 col-md-2 text-nowrap"> 
      <label for="cfnm" class="control-label form-adjust">First Name*</label> 
     </div> 
     <div class="col-sm-8 col-md-4 form-adjust"> 
      <input type="text" class="form-control" id="cfnm" name="firstName" placeholder="First Name" value="" maxlength="30"><i class="form-control-feedback glyphicon glyphicon-remove"></i> 
     </div> 
     </div> 

     <div class="form-group row"> 
     <div class="col-sm-1"><span></span></div> 
     <div class="col-sm-3 col-md-2 text-nowrap"> 
      <label for="cmnm" class="control-label form-adjust">Middle Name</label> 
     </div> 
     <div class="col-sm-8 col-md-4 form-adjust"> 
      <input type="text" class="form-control" id="cmnm" name="middleName" placeholder="Middle Name" value="" maxlength="30"> 
     </div> 
     </div> 

     <div class="form-group row"> 
     <div class="col-sm-1"><span></span></div> 
     <div class="col-sm-3 col-md-2 text-nowrap"> 
      <label for="clnm" class="control-label form-adjust">Last Name*</label> 
     </div> 
     <div class="col-sm-8 col-md-4 form-adjust"> 
      <input type="text" class="form-control" id="clnm" name="lastName" placeholder="Last Name" value="" maxlength="40"><i class="form-control-feedback glyphicon glyphicon-remove"></i> 
     </div> 
     </div> 

     <div class="form-group row"> 
     <div class="col-sm-1"><span></span></div> 
     <div class="col-sm-3 col-md-2 text-nowrap"> 
      <label for="ceml" class="control-label form-adjust">Email*</label> 
     </div> 
     <div class="col-sm-8 col-md-4 form-adjust"> 
      <input type="text" class="form-control" id="ceml" name="email" placeholder="Email" value="" maxlength="128"><i class="form-control-feedback glyphicon glyphicon-remove"></i> 
     </div> 
     </div> 

     <div class="form-group row"> 
     <div class="col-sm-1"><span></span></div> 
     <div class="col-sm-3 col-md-2 text-nowrap"> 
      <label for="czip" class="control-label form-adjust">Personal URL</label> 
     </div> 
     <div class="col-sm-8 col-md-4 form-adjust"> 
      <input type="text" class="form-control" id="curl" name="url" placeholder="Personal URL" value="" maxlength="10"> 
     </div> 
     </div> 
    </fieldset> 

    <fieldset>    
     <div class="form-group row"> 
      <div class="col-sm-4 col-md-3"> 

       <input id="sbtn" name="submit_button" type="submit" value="Submit" class="btn btn-primary form-adjust"> 
      </div> 
     </div> 
    </fieldset> 

</form>