如何修复我的提交按钮问题，我无法移动到下一页[重复]

Question

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

Answer 1

这个问题是因为，尽管字段是隐藏的，但它仍然具有required属性。因此，表格不能提交。要解决这个问题，您需要在字段显示/隐藏时添加/删除该属性。

还要注意，您的JS代码不应该随意地放在table元素的中间。可以将其放在中，也可以放在之前。

最后，不要使用内联事件属性，如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>