CODEWITHSUNDEEP
javascriptjqueryhtml
Jagdish Sharma
Jagdish Sharma

Reputation: 309

How to stop an submit event? which called twice

my form code: 

$("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>

Problem: when i try to submit my form it work for both form i just want to submit form having id search1 on search1 click and search on search click but when i click it is submitting both form and as i click twice it work twice for each form again and again submission

Upvotes: 0

Views: 1557

Answers (3)

Chiranjibi Rout
Chiranjibi Rout

Reputation: 26

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>

Upvotes: 1

Mustafa Alan
Mustafa Alan

Reputation: 386

<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") will catch both of your form in your html code. So you should set id for both forms and try to catch this forms submit events by id, and it will works.

Upvotes: 4

kalai
kalai

Reputation: 186

try this,its working for me

<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 code:

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

Upvotes: 0

Related Questions