代码之家 › 专栏 › 技术社区 › Jagdish Sharma

如何停止提交事件?打了两次电话

html jquery javascript

Jagdish Sharma · 技术社区 · 6 年前

我的格式代码:

$("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上单击并在SEARCHICK上搜索,但当我单击它时,它同时提交两个表单,当我单击两次时,它对每个表单都适用,一次又一次提交。

3 回复 | 直到 6 年前

Chiranjibi Rout 6 年前

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>

Mustafa Alan 6 年前

<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,并尝试捕获此表单 submit 事件按ID,它将工作。

kalai 6 年前

试试这个,对我有用

<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();
    });