当单击外部按钮时触发表单上所需的事件

Trigger required event on form when click on the outside button

本文关键字：事件 表单 外部 单击 按钮      更新时间：2023-09-26

下面是一个片段，我想做的是使用所需的事件在表单内的任何输入字段，当点击下一个按钮驻留在表单之外(意味着表单将停止，不提交，html5所需的通知将弹出)。有什么办法做到这一点吗?

$(document).ready(function(){
  $(document).on("click", "button", function(){
    
    
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
  <input name="test" value="" placeholder="your name" required />
  <button>save</button>
</form>
<button>Next</button>

您使用的是<button>元素。为了进行表单验证，您需要通过单击<input type="submit">来提交表单。添加其中一个，但隐藏在视图

<form action="" method="post">
  <input name="test" value="" placeholder="your name" required />
  <button>save</button>
  <input type="submit" class="hiddenSubmit" />
</form>
<button class="next">Next</button>

当点击"下一步"按钮时，触发对隐藏提交按钮的点击:

$(document).ready(function(){
  $(document).on("click", "button.next", function(){
    $(".hiddenSubmit").trigger("click");
  });
});

。

如果您的表单构造不同，那将是理想的，但我假设您坚持这种布局。

相关文章：