Stop form submit from javascript

Question

I have prepared this demo for the problem http://jsfiddle.net/20k4ur8o/

As you can see when you try to submit the form via the input it is stopped but when you click the button the form submits. How can I prevent the form from submitting when .submit() is called without overwriting the default behavior of the function, because I need to also keep other submit listeners active when it is called?

HTML

<form action=test id=form>
    <input type=submit>
</form>
<button id=submit>Submit</button>

JS

document.getElementById('form').addEventListener('submit', function (e) {
    e.preventDefault();
    alert('stopped');
}, false);

document.getElementById('submit').onclick = function () {
    document.getElementById('form').submit();
}

What do you mean why? And how the hell did you post a 4 character comment O.O — php_nub_qq
– php_nub_qq, Commented Feb 22, 2015 at 15:30
If someone wanted to call .submit() on the form, clearly, they wanted to submit it, why are you trying to stop them? You're creating a race condition. As for the comment, there are many things you don't know about this site :) — Madara's Ghost
– Madara's Ghost, Commented Feb 22, 2015 at 15:30
I really didn't want to go into details on this but, well you brought this on yourself! I have a script that uses a hidden form to submit requests from inputs throughout the page. Namely I have comments and instead of having forms all over the place I just put textareas that map to 1 form, since you can only send 1 comment at a time I figured this is not an issue. However I have another script that intercepts a form submission and does a bunch of other stuff then submits the data via another form. Apart from being hacky it is also helping a great lot against spam bots. Anyway that's why — php_nub_qq
– php_nub_qq, Commented Feb 22, 2015 at 15:34
@php_nub_qq see this post:stackoverflow.com/questions/24248576/… — Suchit kumar
– Suchit kumar, Commented Feb 22, 2015 at 15:59

t.niese · Accepted Answer · 2015-02-22 16:07:09Z

2

You could do something like this:

(function() {
  var form = document.getElementById('form');
  var submit = form.submit;

  form.submit = function() {
    var evt = new Event('submit', {
      cancelable: true
    });

    form.dispatchEvent(evt);

    //minimc the default behaviour and submit the form if 'preventDefault'  was not called.
    if (!evt.defaultPrevented) {
      submit.call(form);
    }
  };
}());

But be award that this might result in memory leaking in older browsers.

EDIT Update the code to include Event emitting. This is only tested in latest WebKit/BLINK and FireFox. For IE and older browser you might need a fallback.

Updated fiddle

EDIT 2
You should maybe think about another solution, e.g. something like this:

function submitCallback(e) {
    e.preventDefault();
    alert('stopped');
}    

document.getElementById('form').addEventListener('submit', submitCallback, false);

formPreventSubmit(document.getElementById('form'), submitCallback);


function formPreventSubmit(form, submitCallback) {
  var submit = form.submit;

  form.submit = function() {
    var evt = new SomeCustomEvent();

    submitCallback(evt)

    if (!evt.defaultPrevented) {
      submit.call(form);
    }
  };
}

SomeCustomEvent need to be some class that mimics the behavior of a real event having a preventDefault function.

edited Feb 22, 2015 at 16:07

answered Feb 22, 2015 at 15:34

t.niese

41k9 gold badges78 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

php_nub_qq Over a year ago

but submit is not a child of form :?

t.niese Over a year ago

@php_nub_qq I thought you would like to prevent document.getElementById('form').submit(); from submitting the form?

php_nub_qq Over a year ago

Oh sorry, now I see what you did. It is a good idea but unfortunately not possible to implement because I can't afford to take away the default behavior of form.submit(). For instance if I did that then calling form.submit() wouldn't trigger submit listeners

t.niese Over a year ago

@php_nub_qq as you can see in the fiddle the even listener is still called, and if you remove the e.preventDefault() in the listener the form will still be submitted. This just prevents the direct document.getElementById('form').submit() call.

t.niese Over a year ago

@php_nub_qq updated the code to emit event. But you might better use an approach similar to the code I added to EDIT 2

|

Sean Perryman · Accepted Answer · 2015-02-22 15:47:10Z

0

document.getElementById('submit').onclick = function () {
  document.getElementById('form').submit(function(e) {
    alert( "Handler for .submit() called." );
    e.preventDefault();
  });
}

EDIT: My mistake, I misread your question. You just need to bind an event listener to the submit method and run the same preventDefault method.

http://api.jquery.com/submit/

edited Feb 22, 2015 at 15:47

answered Feb 22, 2015 at 15:32

Sean Perryman

2514 silver badges15 bronze badges

2 Comments

php_nub_qq Over a year ago

It's not about the button, I can call .submit() from anywhere

php_nub_qq Over a year ago

well that's exactly what I'm doing? Also I'm not using jquery

Collectives™ on Stack Overflow

Stop form submit from javascript

HTML

JS

2 Answers 2

8 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JS

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related