时间戳

首页 > 解决方案 > 如何解决我的提交按钮问题，我无法移动到下一页

jquery - 如何解决我的提交按钮问题，我无法移动到下一页

问题描述

实际上，我在所有这些输入字段中都使用了 required 属性，因为它们是强制性的。实际上我正在使用条件选择选项，如果用户选择是，则出现一个强制输入字段，用户必须填写，在这种情况下，我的提交按钮工作，我移至下一页但是当用户选择否并且没有强制字段出现，在这种情况下，当我单击提交按钮时，它不起作用。我该如何解决这个问题？我正在使用 jquery。

$(document).ready(function() {
  Orientation();
  $("#to_check_recognition").change(function() {
    Orientation();
  });
});

function Orientation() {
  if ($("#to_check_recognition").val() == 'yes')
    $("#Average_orientation").show();
  else
    $("#Average_orientation").hide();
}
<title> Cycle Time Calculation INSIGNUM</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="form_table_output.html" name="myform" method="post" onsubmit="return ValidateForm(this);" style="width: 1200px; margin:0px auto">
  <h1 title="Cycle calculation"> Cycle Time Calculation INSIGNUM </h1>
  <hr><br>
  <p>Cycletime calcualation of module siyes between 5mil and 15mil</p>

  <table border="0" cellpadding="18" cellspacing="10" style="margin:0px 40px;">
    <tr>
      <td style="width: 50%">
        <label for="to_check_recognition"><b>Do you have to check Orientation? <span style="color:red">*</span></b></label><br><br>
        <select id="to_check_recognition" name="to_check_recognition" style="width: 350px; height: 35px; border-radius: 8px" required>
          <option value="" disabled selected> Please Select... </option>
          <option value="yes"> Yes</option>
          <option value="no"> No </option>
        </select><br><br>
      </td>
      <td style="width: 50%">
        <div id="Average_orientation" style="display: none;">
          <label for="Average_orientation"><b>Average amount of orientation check per panel <span style="color:red">*</span></b></label><br><br>
          <input type="number" step="any" name="Average_orientation" style="width: 350px; height: 25px; border-radius: 8px" required /><br><br>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="text-align: right; height: 225px">
        <input name="submit" type="submit" value="Click To Submit" style="width: 200px; height: 50px; border-radius: 12px; color: blue; background: gold; cursor: pointer;" />
      </td>
    </tr>
  </table>
</form>

标签： jqueryhtml

解决方案

问题在于，尽管该字段是隐藏的，但它仍然具有required设置的属性。因此无法提交表单。要解决此问题，您需要在显示/隐藏字段时添加/删除该属性。

另请注意，您的 JS 代码不应随意放置在table元素的中间。将其放在<head>或 之前</body>。

最后，不要使用 和 等内联事件onclick属性onsubmit。改为使用不显眼的事件处理程序。同样，不要将您的 CSS 内联在 HTML 中。它应该从单独的样式表中应用。

说了这么多，试试这个：

$(document).ready(function() {
  Orientation();

  $("#to_check_recognition").change(function() {
    Orientation();
  });

  $('form').on('submit', function(e) {
    console.log('form submitting...');
    if (!ValidateForm(this)) {
      e.preventDefault();
    }
  });
});

function Orientation() {
  var averageReqd = $("#to_check_recognition").val() === 'yes';
  $("#Average_orientation").toggle(averageReqd);
  $('input[name="Average_orientation"]').prop('required', averageReqd);
}

function ValidateForm() {
  // noop
}
form {
  width: 1200px;
  margin: 0px auto;
}

table {
  margin: 0px 40px;
}

table td {
  width: 50%;
}

#to_check_recognition {
  width: 350px;
  height: 35px;
  border-radius: 8px;
}

#Average_orientation {
  display: none;
}

span,
span {
  color: red;
}

#Average_orientation input {
  width: 350px;
  height: 25px;
  border-radius: 8px;
}

td.foo {
  text-align: right;
  height: 225px;
}

td.foo input {
  width: 200px;
  height: 50px;
  border-radius: 12px;
  color: blue;
  background: gold;
  cursor: pointer;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="form_table_output.html" name="myform" method="post">
  <h1 title="Cycle calculation"> Cycle Time Calculation INSIGNUM </h1>
  <hr><br>
  <p>Cycletime calcualation of module siyes between 5mil and 15mil</p>

  <table border="0" cellpadding="18" cellspacing="10">
    <tr>
      <td>
        <label for="to_check_recognition">
          <b>
            Do you have to check Orientation? 
            <span>*</span>
          </b>
        </label><br><br>
        <select id="to_check_recognition" name="to_check_recognition" required>
          <option value="" disabled selected>Please Select...</option>
          <option value="yes">Yes</option>
          <option value="no">No</option>
        </select><br><br>
      </td>
      <td>
        <div id="Average_orientation">
          <label for="Average_orientation">
            <b>
              Average amount of orientation check per panel 
              <span>*</span>
            </b>
          </label><br><br>
          <input type="number" step="any" name="Average_orientation" required /><br><br>
        </div>
      </td>
    </tr>
    <tr>
      <td colspan="2" class="foo">
        <button type="submit">Click To Submit</button>
      </td>
    </tr>
  </table>
</form>

推荐阅读