Question

我有一个正在使用类似功能的表单

$(document).ready(function() {
        $("#form1").submit(function() {

但是我有两种其他的形式，如果/当他们提交时，我想使用相同的功能，我该怎么写呢？

$(document).ready(function() {
        $("#form1").submit(function(), 
        $("#form2").submit(function(), 
        $("#form3").submit(function() {

谢谢

Answer 1

据我了解，您想为各种提交事件处理程序共享一个功能。这很简单：

function submitHandler() {
   // handler stuff here.
}
$(document).ready(function() {
    $("#form1").submit(submitHandler);
    $("#form2").submit(submitHandler);
    $("#form3").submit(submitHandler);
}

如果要处理所有表单，

和替代方法是在jquery选择器中指定哪些表单。您可以对页面上的所有表单执行此操作：

$(document).on('submit','form', function() { });

或者，如果您只是将类名添加到要在其上使用的表单：

$(document).on('submit','.formclass', function() { });

Answer 2

您可以传递表单ID来分别提交。

此代码将使您可以拥有任意数量的表单，而无需更新JS。

function submitForm(id) {
  $("#" + id).submit(function(e) {
    e.preventDefault();
    for (let i = 0; i < e.target.length - 1; i++) {
      console.log(e.target[i].name, e.target[i].value);
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
   <input name="name">
   <button onClick="submitForm('form1')">Submit</button>
</form>
<form id="form2">
   <input name="name">
   <button onClick="submitForm('form2')">Submit</button>
</form>
<form id="form3">
   <input name="name">
   <button onClick="submitForm('form3')">Submit</button>
</form>

Answer 3

通过JQuery，您可以将以下函数$("form").submitNow()与任何表单元素一起使用。

$.fn.submitNow = function() {
  var form = $(this);
  // handle form element
  console.log(this.id, this.action);
  $(this).submit();
}
//use it
$("form").submitNow();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="./action1" id="action1">
  <input type="submit" value="form1" />
</form>
<form action="./action2" id="action2">
  <input type="submit" value="form2" />
</form>
<form action="./action3" id="action3">
  <input type="submit" value="form3" />
</form>

Answer 4

您应该能够做到这一点：

$("#form1, #form2, #form3").submit(function() {
    formid = this.id;
    console.log('Processing form [' +formid+ ']');
    ...etc...

任何指定的ID都会触发该提交功能。

使用formid变量，您可以在函数中微调任何特定于形式的mod。

使用相同功能的多个表单提交

4 个答案: