Question

我的表单代码：

$("form").on('submit', function(e) {
  console.log('Form submitted')
  e.preventDefault();
  e.stopImmediatePropagation();
});

$("#search1").on('submit', function(c) {
  console.log('Form submitted 1')
  c.preventDefault();
  c.stopImmediatePropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Form submit with JS function</h2>
<form name="search">
  Name:
  <input type="text" name="name1" /> Age:
  <input type="text" name="age1" />
  <input type="submit" name="Submit" value="Submit" />
</form>

<form name="search1" id="search1">
  Name:
  <input type="text" name="name1" /> Age:
  <input type="text" name="age1" />
  <input type="submit" name="Submit" value="Submit" />
</form>

问题：：当我尝试提交自己的表单时，它对两种表单都有效，我只想提交具有id search1在search1单击上并在搜索单击上进行搜索的表单，但是当我单击时，它将提交两种表单当我单击两次时，每次为每个表单两次重复工作

Answer 1

<h2>Form submit with JS function</h2>
<form name="search" id="search"> <--! set id for first form-->
  Name:
  <input type="text" name="name1" /> Age:
  <input type="text" name="age1" />
  <input type="submit" name="Submit" value="Submit" />
</form>

<form name="search1" id="search1">
  Name:
  <input type="text" name="name1" /> Age:
  <input type="text" name="age1" />
  <input type="submit" name="Submit" value="Submit" />
</form>

$("#search").on('submit', function (e) { // change the element selector as id selector. 
   console.log('Form submitted')
   e.preventDefault();
  e.stopImmediatePropagation();
});

$("#search1").on('submit', function (c) {
   console.log('Form submitted 1')
   c.preventDefault();
  c.stopImmediatePropagation();
});

$("form")将在您的html代码中捕获您的两个表单。因此，您应该为这两种形式都设置id并尝试按id捕获此表单submit事件，这样就可以了。

Answer 2

var formOne = document.getElementsByName('search');
var formTwo = document.getElementsByName('search');
document.getElementsByName("SubmitFirstForm")[0].addEventListener("click", function () {
  formOne[0].submit();
  alert('formone submitted');
});
document.getElementsByName("SubmitSecondForm")[0].addEventListener("click",function(){
  formTwo[0].submit();
  alert('formtwo submitted');
});
//or you can simply use the below commented code in place addEventListener
/*document.getElementsByName("SubmitFirstForm")[0].onclick= function () {
 formOne[0].submit();
   alert('formone submitted');
};
document.getElementsByName("SubmitSecondForm")[0].onclick= function () {
 formTwo[0].submit();
   alert('formtwo submitted');
};*/

You don't require to submit the form with JQuery here as the input type is **submit** in the form.
 You only require to submit the form with JavaScript or JQuery when the input type is **button**.
 And submit a form by its form name is very good practice using JavaScript.

e.g.

<h2>Form submit with JS function</h2>
<form name="search">
  Name:
  <input type="text" name="name1" /> Age:
  <input type="text" name="age1" />
  <input type="button" name="SubmitFirstForm" value="Submit" />
</form>

<form name="search1" id="search1">
  Name:
  <input type="text" name="name1" /> Age:
  <input type="text" name="age1" />
  <input type="button" name="SubmitSecondForm" value="Submit" />
</form>

Answer 3

尝试一下，为我工作

<form name="search" id="search1">
            Name:
            <input type="text" name="name1" /> Age:
            <input type="text" name="age1" />
            <input type="submit" name="Submit" value="Submit" />
        </form>

        <form name="search1" id="search2">
            Name:
            <input type="text" name="name1" /> Age:
            <input type="text" name="age1" />
            <input type="submit" name="Submit" value="Submit" />
        </form>

js代码：

$("#search1").on('submit', function (e) {
        alert("Form1 submitted");
        console.log('Form1 submitted')
        e.preventDefault();
        e.stopImmediatePropagation();
    });

    $("#search2").on('submit', function (c) {
        alert("Form2 submitted");
        console.log('Form2 submitted')
        c.preventDefault();
        c.stopImmediatePropagation();
    });

如何停止提交事件？叫了两次

3 个答案: