必要な入力がすべて記入されているかどうかチェックして、自動的にフォームを送信する

Question

私のフォームに必要なフィールド（.required-entry）がすべて入力されたら、送信ボタンをクリックせずにフォームを自動的に送信します。

<div id="billing-form"> 
    <fieldset> 
     <div class="field form-group"> 
      <input type="text" class="input-text form-control required-entry" id="name" /> 
     </div> 
     <div class="field form-group"> 
      <input type="text" class="input-text form-control required-entry" id="mid-name" /> 
     </div> 
    </fieldset> 
</div> 
<div class"button-container"> 
    <button type="button" title="Continue" id="btn-continue" class="button btn-continue" onclick="billing.save()">Continue</button> 
</div> 

Answer 1

これは、入力が記入されたときにフォームをsumbitすることは悪い考えですが、現在のフォーム入力が満たされている次のフォームを表示することができます。この目的のために、このコードを使用してください。

$("#form1 input").on("keyup change", function(){ 
 
    var inputValidate = true; 
 
    $("#form1 input").each(function(index, element){ \t \t 
 
     if ($(element).val() == "") 
 
      inputValidate = false; 
 
    }); 
 
    
 
    if (inputValidate) 
 
     $("#form2").show(); 
 
    else 
 
     $("#form2").hide(); 
 
});

#form2 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<form id="form1">  
 
    <div> 
 
     <label>Form 1</label> 
 
    </div> 
 
    <div> 
 
     <label>Firstname</label> 
 
     <input type="text" /> 
 
    </div> 
 
    <div> 
 
     <label>Lastname</label> 
 
     <input type="text" /> 
 
    </div> 
 
</form> 
 
<br /> 
 
<form id="form2">  
 
    <div> 
 
     <label>Form 2</label> 
 
    </div> 
 
    <div> 
 
     <label>Birthday</label> 
 
     <input type="text" /> 
 
    </div> 
 
    <div> 
 
     <label>Country</label> 
 
     <input type="text" /> 
 
    </div> 
 
</form>