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>

希望这有帮助。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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");
}

通过调用您的函数替换成功控制台。

在不使用提交按钮的情况下触发表单中的函数

3 个答案: