jquery Form.submit handler not triggered

Question

trying to use form.submit(event) handler to send form data with ajax based on following example. jQuery AJAX submit form

But my Handler function does not seem to trigger at all, I have tried adding return false and various prevention of default behavior, but the form still get submitted to action file.

Javascript:

$('#formWebUI').submit(function(e) {

        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

        let form = $(this);
        let url = form.attr('action');

        $.ajax({
               type: "POST",
               url: url,
               data: form.serialize(), // serializes the form's elements.
               success: function(data)
               {
                   ChangeLocation();
               }
             });
        return false;
    });

HTML

<form id="formWebUI" class="form-inline pb-5" action="/php/form_WebUI.php" method="POST">
      <div class="container">
        <div class="row">
          <div class="col-3 p-0">
            <div class="form-group">
              <input type="text" class="form-control w-100" id="alias" name="alias" placeholder="Alias">
            </div>
          </div>
          <div class="col-7 px-1">
            <div class="form-group">
              <input type="text" class="form-control w-100" id="text" name="text" placeholder="Text">
            </div>
          </div>
          <div class="col-2 p-0">
            <input type="submit" class="btn btn-secondary w-100" id="formWebUI" value="Add">
          </div>
        </div>
      </div>
    </form>

I have also tried the button to be of element button instead of input. Type of the element was always submit never button. I have tried alerting in javascript, but it seems that the handler is never called no matter what I do. Would be thankful for any advice.

we cannot use duplicate id which you have used ("formWebUI"). so use different id — Shusil Satyal, Feb 21 '20 at 04:48

score 0 · Answer 1 · answered Feb 21 '20 at 00:02

0

Your input element shares the same id with the form. Make sure the elements have unique id's, then bind the .submit to the form id.

Wrapping your JQuery in $(document).ready solved the issue for me. See the jsfiddle here:

https://jsfiddle.net/520x83s7/

$( document ).ready(function(){
    $('#formWebUI').submit(function(e) {

        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

        let form = $(this);
        let url = form.attr('action');

        $.ajax({
               type: "POST",
               url: url,
               data: form.serialize(), // serializes the form's elements.
               success: function(data)
               {
                   ChangeLocation();
               }
             });
        return false;
    });
});

answered Feb 21 '20 at 00:02

Mahatmasamatman

1,488
2
4
19

When an ID is duplicated, the selector will find the first one, so it seems like it should match the form rather than the input. – Barmar Feb 21 '20 at 00:03
Yes, thank you. I made the note about the ID just so he does not miss the duplicate. – Mahatmasamatman Feb 21 '20 at 00:05
I was desperately experimenting with the id on submit button, but originally it was only on form. – Libor Smycek Feb 21 '20 at 00:05
I really do appreciate such fast response and good will to help, thank you. – Libor Smycek Feb 21 '20 at 00:06

score 0 · Answer 2 · answered Feb 21 '20 at 00:04

0

Ok just found the issue.

The form is loaded asynchronously from other file with Ajax. So when I register the listener it is actually before the form is loaded and can be properly affected.

So to fix I just reinitialize the listener after I load the form from a file.

answered Feb 21 '20 at 00:04

Libor Smycek

1
3

See [Event binding on dynamically-created elements](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Barmar Feb 21 '20 at 00:05

jquery Form.submit handler not triggered

2 Answers2