0

On my page, there is a form with id=save-questions-form. I'm trying intercept form submit by the following way:

$('#save-questions-form').on('submit', handler);

There is a content of the handler function below (inside ajax, a post-request is sent to the form action):

function handler() {
    $.ajax({...});
    return false;
}

In this case, the form is sent twice. This option below doesn't help either.

function handler(event) {
    event.preventDefault();
    $.ajax({...});
    return false;
}

But if I'm trying to do the same things without ajax, for example like this:

function handler(event) {
    return false;
}

then it works fine, and form isn't sent.

I solved this problem in the following way:

$('document').on('submit', '#save-questions-form', saveQuestionsSubmit);

In this case, everything works fine and form doesn't send twice.
But I don't understand how it works? Any ideas?

freedomn-m
  • 27,664
  • 8
  • 35
  • 57
Roman Andreev
  • 444
  • 3
  • 6
  • 18
  • Are you adding the `submit` event handler multiple times? – Rory McCrossan Apr 17 '19 at 09:51
  • 1
    Can we see your HTML code ? – Thanveer Shah Apr 17 '19 at 09:53
  • @RoryMcCrossan Absolutely not. this case is excluded – Roman Andreev Apr 17 '19 at 09:53
  • Try `$('#save-questions-form).submit(function(e){ e.preventDefault(); $.ajax(); return false; })` – Marios Nikolaou Apr 17 '19 at 09:53
  • @MariosNikolaou logically that's identical to the first example in the question – Rory McCrossan Apr 17 '19 at 09:54
  • @MariosNikolaou I tried this, and I wrote out this in my question! – Roman Andreev Apr 17 '19 at 09:54
  • 1
    @RomanAndreev at what point do you add the event handler to the form? Also, if you add `$('#save-questions-form').off('submit')` before adding the handler does it fix the problem? One other thing to try, click 'preserve log' in the console so that errors don't disappear when the page is unloaded. I suspect an error is occurring in your event handler logic which is preventing the `return false` from being executed. – Rory McCrossan Apr 17 '19 at 09:55
  • `return false` doesn't submit the form. – Marios Nikolaou Apr 17 '19 at 09:55
  • @RoryMcCrossan I add the event handler to the form when a document is ready `$(function() {//my function here});`. Preserve log doesn't show any errors. And yes, if I add `off` before adding the handler it fixes the problem. But why it happens? I don't add another handler for the `submit` event to the same form anywhere else. How can I found out it? – Roman Andreev Apr 17 '19 at 10:11
  • Add `event.stopPropagation()` at the top, right after `e.preventDefault()`. As you've noted, without any code, just a `return false` you don't get the problem. This indicates that the `return false` is not getting reached. Return false is the same as the above 2 lines, but occurs at the end (https://stackoverflow.com/a/1357151/2181514) so if the function exists before this it won't be hit. – freedomn-m Apr 17 '19 at 10:12
  • `And yes, if I add off before adding the handler it fixes the problem.` Then this definitely means that the handler is being bound multiple times. If your logic doesn't do it, then it must be happening somewhere else. Without seeing the complete sample of your code we can't really help you any further. – Rory McCrossan Apr 17 '19 at 10:14
  • I think you are probably getting an error somewhere, so return false is not getting reached, try just returning false, no other stuff, see if that works and work up from there – David Bray Apr 17 '19 at 10:14
  • When you say the form is being sent twice, do you mean you are receiving the form data twice, or are you seeing two AJAX requests to your endpoint? If it's the latter, it might be that you are seeing a preflight (OPTIONS) check... – Alex Mulchinock Apr 17 '19 at 10:31

0 Answers0