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

Posted 2023-02-22

技术标签:

【中文标题】如何解决我的提交按钮问题，我无法移动到下一页[重复]【英文标题】：How can i fix my submit button problem, I can't move to the next page [duplicate] 【发布时间】：2020-06-15 22:47:31 【问题描述】：

实际上，我在所有这些输入字段中都使用了 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>

【问题讨论】：

1.缺少 ValidateForm； 2. 单击“否”时出现控制台错误 3. 切勿在表单中调用任何内容“提交” 4. 关闭隐藏字段***.com/questions/22148080/… 上的 HTML5 验证 【参考方案1】：

问题在于，尽管该字段已隐藏，但仍设置了 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>

【讨论】：

您最好也更改提交按钮的名称你的意思也是$('form').on('submit', function(e) if (!ValidateForm(this)) e.preventDefault(); ); 你在这两个方面都是对的，谢谢。

以上是关于如何解决我的提交按钮问题，我无法移动到下一页[重复]的主要内容，如果未能解决你的问题，请参考以下文章

在Objective C中导航到下一页[重复]

单击按钮移动到下一页时出错

Laravel 提交按钮不跳转到下一页和上一页

移动到下一页时不显示对话框[重复]

单击登录后如何重定向到下一页并检查用户凭据是不是正确

我们如何导航到一个网页，抓取数据，移动到下一页，然后再做一次？