表单上的任何修改都触发了事件

Question

我用输入文字和选择内容制作了一个表格。 要提交表单，我希望用户单击“验证”按钮以检查是否正确填写了所有字段。 如果是，则启用最初被禁用的提交按钮。

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

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

我该怎么办？

Answer 1

您可以使用表单（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> 

Answer 2

您需要使用jQuery的on Change函数触发事件。 您必须将其分配给每个输入字段/选择或任何其他内容，或者给它们全部相同的类。
这是一个文件

例：

<form>
    <input class="target" type="text" value="Field 1">
    <select class="target">
        <option value="option1" selected="selected">Option 1</option>
        <option value="option2">Option 2</option>
    </select>
</form>
<div id="other">
    Trigger the handler
</div>

脚本：

$( ".target" ).change(function() {
    alert( "Handler for .change() called." );
});

如果您提供任何示例代码，我们将为您提供更多帮助。