Prevent submit form twice with change event

Question

i hava a form with a hidden submit button and one text input. In the text input, with jQuery i attached to it a change event that submits the form. The thing is that if i hit enter on the input, then the form submits twice. I think is because the enter submits the form and the input detects a change event and it submit the form again. I have two questions: - Is my thought right? - How can i fix this?

This is the javascript:

$("input.price").live('change', function () {
  $(this).closest('form').submit();
});

Edit: I think that the e.preventDefault() is preventing the default of the event "change" but no preventing the event "submit".. i try this before the event "change" with no luck but maybe im close to the solution:

$("input.price").live('submit', function (e) {
       e.preventDefault();
});

score 1 · Answer 1 · answered Mar 12 '13 at 20:47

1

$("input.price").live('change', function (eventObject) {
     eventObject.preventDefault();
     $(this).closest('form').find('input.submitButton').click();
 });

answered Mar 12 '13 at 20:47

Brad M

7,857
1
23
40

score 1 · Answer 2 · answered Mar 12 '13 at 20:48

1

You need to use the preventDefault() function to prevent the form from submitting.

E.g.

$("input.price").live('change', function (e) {
  e.preventDefault();
  $(this).closest('form').find('input.submitButton').click();
});

answered Mar 12 '13 at 20:48

dev

3,969
3
24
36

score 1 · Answer 3 · answered Mar 12 '13 at 20:50

1

What am i missing here, why wouldn't you do this instead:

$("input.price").live('change', function (eventObject) {
     $(this).closest('form').submit();
 });

answered Mar 12 '13 at 20:50

Mike C.

3,024
2
21
18

Thanks, i just change it. (but the problem persists) – Phoenix_uy Mar 12 '13 at 20:59
If you submit your form using the method I've shown, could you just remove your hidden submit button? – Mike C. Mar 12 '13 at 21:02
Yes Mike, i removed the button. But the double submit persists – Phoenix_uy Mar 13 '13 at 15:16
I think we'd need to see more code. What you're describing doesn't make much sense, unless you are binding multiple times somewhere on accident. – Mike C. Mar 13 '13 at 16:58

score 0 · Accepted Answer · answered Mar 13 '13 at 22:05

Finally i came out with a solution! The thing was that.. as Mike C. says, the extra code could help to solve the problem. The problem was that the form that i'm trying to submit it's an Ajax.BeginForm of MVC so.. the main problem is the ajax submit of that form, that was the second submit!

I couldn't change that behavior.. only changing the Ajax.Beginform with a Html.Beginform.. thing that i don't want to do. So.. i came out with this "rusty" solution:

$("input.price").live('keypress', function (e) {
     if (e.keyCode == 13) {
        $(this).attr('data-submitting', true);
     }
});

$("input.price").live('change', function (e) {
     if (!$(this).attr('data-submitting')) {
         $(this).closest('form').submit();
     }
});

Prevent submit form twice with change event

4 Answers4

Linked