送信ボタンを使用せずにフォームで関数を起動する

Question

フォームが埋め込まれた後に書き込んだ関数を起動する必要があります。 キー押し機能を使用しようとしましたが、私はボタンを追加することはできません。 私はonsubmitを使ってみましたが、それでもうまくいきません。 フォームは、フォームが入力された後に画像を表示し、次のフォームを有効にして、次のフォームの不透明度を0.5から1.0にします。これは私がJavaScriptで書いた機能ですが、私はそれを発射することができません。

function validate1(){ 
    $("#check").show(); 
    $("#fieldset2").css("opacity", "1.0"); 
    $("#fieldset2").attr("disabled", false); 
} 

は、これは私のhtmlです：

 <form name="form1" onsubmit="return validate1()" method="post"> 
     <fieldset id="fieldset1"> 
     <legend>Step 1</legend> 
     How many people will be attending? 
      <select name = step1 id="step1" onchange="showField()"> 
      <option value="0">Please Choose</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
      </select> 
     <br> 
     <div id="divName"></div> 
     <img id="check" src="Images/check.png"> 
     </fieldset> 
    </form> 

    <form name="form2" onsubmit="return validateForm()" method="post"> 
     <fieldset id="fieldset2" disabled> 
     <legend>Step 2</legend> 
      Would you like your company name on your badges?<br> 
      <input type="radio" id="companyYes" name="company">Yes<input type="radio" id="companyNo" name="company">No<br> 
      <input type="text" id="companyText"> 
     <br> 
     <div id="company"></div> 
     Will anyone in your group require special accommodations?<br> 
     (if yes) Please explain below:<br> 
     <input type="radio" name="special" id="specialYes" value="Yes">Yes<input type="radio" id="specialNo" name="special" value="No">No<br> 
     <input type="text" id="specialText"><br> 
      <img id="check2" src="Images/check.png"> 
     </fieldset> 
    </form> 

PS：私はJS、jQueryとHTMLのみを使用することができます、Ajaxはありません（経験は全くありません）。

Answer 1

あなたの関数を呼び出し、別のボタンを追加し、次のステップを有効：このことができます

<button onclick='nextStep()'>Next Step</button> 

希望を。

function nextStep(){ 
 
    $("#check").show(); 
 
    $("#fieldset2").css("opacity", "1"); 
 
    $("#fieldset2").attr("disabled", false); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="form1" method="post"> 
 
    <fieldset id="fieldset1"> 
 
    <legend>Step 1</legend> 
 
    How many people will be attending? 
 
    <select name = step1 id="step1" onchange=""> 
 
     <option value="0">Please Choose</option> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
     <option value="5">5</option> 
 
    </select> 
 
    <br> 
 
    <div id="divName"></div> 
 
    <img id="check" src="http://fotokaste.lv/images/05651826220882852674.png" style='display:none'> 
 
    </fieldset> 
 
</form> 
 
<button onclick='nextStep()'>Next Step</button> 
 
<form name="form2" onsubmit="return validateForm()" method="post"> 
 
    <fieldset id="fieldset2" disabled> 
 
    <legend>Step 2</legend> 
 
    Would you like your company name on your badges?<br> 
 
    <input type="radio" id="companyYes" name="company">Yes<input type="radio" id="companyNo" name="company">No<br> 
 
    <input type="text" id="companyText"> 
 
    <br> 
 
    <div id="company"></div> 
 
    Will anyone in your group require special accommodations?<br> 
 
    (if yes) Please explain below:<br> 
 
    <input type="radio" name="special" id="specialYes" value="Yes">Yes<input type="radio" id="specialNo" name="special" value="No">No<br> 
 
    <input type="text" id="specialText"><br> 
 
    <img id="check2" src="Images/check.png"> 
 
    </fieldset> 
 
</form>

Answer 2

STEP1 "「ユーザーが選択という名前からオプションを選択したときに起動するようにjQueryの.changeメソッドを使用"。

$("#step1").change(function() { 
    if ($("#step1").val() > 0) { 
     validate1(); 
    } 
}); 

Answer 3

あなたは、おそらくのonchangeを配置してみてください

すべての要素にこれを使用します。

<input id = 'nameInputFormElem' type='text' placeholder="Full Name" onchange="testFunction(event);"> 
<select name = step1 id="step1" onchange="testFunction(event);"> 
     <option value="0">Please Choose</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     </select> 

これは

function testFunction(event){ 
var temp = $(event.target).parents("form").find("select, input"); 
var isFormFilled = true; 
$(temp).each(function (key,value){ 
    if($(value).val() == '') 
     isFormFilled= false; 
}); 
if(isFormFilled == true) 
    console.log("success"); 
} 

の変化をキャッチする機能の一般的な実装することができ、あなたの関数の呼び出しに成功コンソールを交換してください。