1

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();
}
php_nub_qq
  • 15,199
  • 21
  • 74
  • 144
  • What do you mean why? And how the hell did you post a 4 character comment O.O – php_nub_qq Feb 22 '15 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 Feb 22 '15 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 Feb 22 '15 at 15:34
  • @php_nub_qq see this post:http://stackoverflow.com/questions/24248576/prevent-form-submission-javascript – Suchit kumar Feb 22 '15 at 15:59

2 Answers2

1

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.

t.niese
  • 39,256
  • 9
  • 74
  • 101
  • but `submit` is not a child of `form` :? – php_nub_qq Feb 22 '15 at 15:35
  • @php_nub_qq I thought you would like to prevent `document.getElementById('form').submit();` from submitting the form? – t.niese Feb 22 '15 at 15:36
  • 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 – php_nub_qq Feb 22 '15 at 15:43
  • @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 Feb 22 '15 at 15:45
  • I just edited the comment, what I meant is that if I overwrote `submit` then calling it wouldn't trigger submit listeners – php_nub_qq Feb 22 '15 at 15:47
  • @php_nub_qq That wasn't part of the question ;) I'll update my answer to include that. – t.niese Feb 22 '15 at 15:52
  • Sorry, I thought the solution was much simpler, I'll edit the question as well. – php_nub_qq Feb 22 '15 at 15:53
  • 1
    @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** – t.niese Feb 22 '15 at 16:05
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/

Sean Perryman
  • 251
  • 3
  • 15