时间戳

首页 > 解决方案 > 对我的表单进行任何修改时触发的事件

javascript - 对我的表单进行任何修改时触发的事件

问题描述

我制作了一个带有输入文本和选择的表单。要提交表单，我希望用户单击验证按钮以检查所有字段是否正确归档。如果是，那么最初禁用的按钮提交现在已启用。

这是问题所在，我希望如果用户再次修改表单中的任何内容，然后按钮转回禁用，以便他必须再次验证才能提交。

为此，我想找到一个 jQuery 事件，该事件会在我的表单上的任何事件上触发，以返回提交按钮以再次禁用。

知道我该怎么做吗？

标签： javascriptjqueryhtml

解决方案

您可以使用表单 (delegateTarget) 然后从中选择您希望在范围内的输入类型 ( https://stackoverflow.com/a/3165569/125981 ) 以附加事件处理程序，并禁用该类型所需的那些。由于可能有多个我已经包含和示例，其中有两个提交按钮和一个未禁用的重置按钮。为了扭转这种情况，您需要有某种方法来清除它们，所以我添加了一个自定义事件的示例。

添加了一个重置​​事件处理程序，因为它可能会在这里发挥作用。

$('#myform').on('change keyup', 'input[type="text"], select', function(event) {
    $(event.delegateTarget).find('input[type="submit"]').each(function() {
      console.log("disable:", this);
      this.disabled = true;
    });
  })
  .on('all-clear', function(event) {
    $(event.delegateTarget).find('input[type="submit"]').each(function() {
      this.disabled = false;
    });
  })
  .on('click', '#allclear', function(event) {
    $(event.delegateTarget).trigger('all-clear');
  })
  .on('reset', function(event){
      // do whatever is desired on the reset of the form
  });
  .find('input[type="text"]').trigger('change'); //IF you want disabled initially
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form id="myform">
  <input type="text" value="text stuff" />
  <select>
    <option value="option1" selected="selected">First Option</option>
    <option value="option2">Another Option</option>
  </select>
  <input type="submit" value="Submit" />
  <input type="submit" value="Possible Submit" />
  <input type="reset" value="Reset" />
  <button id="allclear" type="button">All clear</button>
</form>

推荐阅读