Can't submit the page even though using preventDefault in laravel

Question

I can't submit the form even though I used preventDefault, (page refreshed and doesn't take any action) My form inputs are filled dynamically here is my code.

HTML

<div class="modal-body">
  <form id="update_form">
    <!-- loaded below -->
  </form>
</div>

another request that fill my form data

@csrf
<div class="form-row">
    <div class="form-group col-md-6">
        <input type="hidden" name="request_type" value="{{RegisterTypesNames::Faculty}}">
        <label>University</label>
        <select name="university" class="custom-select" id="university{{$action}}">
            <option selected value="1">University of Cansas</option>
        </select>
    </div>
    <div class="form-group col-md-6">
        <label>Faculty</label>
        <input type="text" class="form-control" name="faculty" id="faculties{{$action}}">
    </div>
    <div class="form-group col-md-6">
        <label>Init</label>
        <input type="text" class="form-control" name="short_name" id="short_names{{$action}}">
    </div>
</div>
<button type="submit" class="btn btn-primary"><span class="fa fa-save"></span> Save</button>

And jquery code

$('#update_form').submit(function (e) {
    $.ajax({
        url: '/update_data',
        type: "POST",
        data: $('#update_form').serialize(),
        dataType: "json",
        success: function (data) {
            console.log(data.result);
        }

    });
    e.preventDefault();
});

Note: I use multiple partial forms like this all others works fine

Try placing `e.preventDefault();` after `.....submit(function(e)` — Rotimi, May 05 '20 at 13:11
Position of `e.preventDefault()` doesn't matter. The default behavior takes place after the last event anyway, so that's where the event is being checked for preventing. — Robo Robok, May 05 '20 at 13:14
First comment says to place it as the first line inside `.submit() { ..here.. ` rather than the last line. The 2nd comment is mostly correct unless there's an error or return before the prevent default (which there shouldn't be here, but generally) - so it's good practice to put the preventDefault as the first line *inside* the event handler. — freedomn-m, May 05 '20 at 13:17
Sure. Also for readability, I always prefer to place it 1st. — Robo Robok, May 05 '20 at 13:18
Try `$(document).on("submit", "#update_form", function(e) { ...` in case the form is being recreated or your code is not inside doc.ready and runs before the HTML — freedomn-m, May 05 '20 at 13:18
It may be that you just need to wrap your code in doc ready: `$(function() { $("#update_form").submit(...` — freedomn-m, May 05 '20 at 13:27
To address comments on deleted answer: "submit the form" *generally* means submit via the standard browser mechanism, ie a submit button inside a form. So in this case you do *not* want to submit the form (hence the preventDefault) - instead you want to post via ajax. Just slight wording confusion. — freedomn-m, May 05 '20 at 13:28
@BhavikHirani https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false — freedomn-m, May 05 '20 at 13:42

score 0 · Accepted Answer · answered May 05 '20 at 13:33

I can't submit the form even though I used preventDefault, (page refreshed and doesn't take any action)

Interpretation: the statements "page refreshed" and "used preventDefault" indicate that the problem is that the code inside the $("#id").submit( is not firing and the page's default submit is kicking in hence the "page refreshed".

As the jquery event is not firing, it likely means that the HTML does not exist when the script runs. This can usually be handled by putting in a doc.ready; OP indicates that it's already in doc.ready.

The alternative is to use event delegation. Though it's not clear if the code is running before the HTML is generated or if the HTML is added after (subtle difference).

The solution for event delegation is to use:

 $(document).on("submit", "#update_form", function(e) {
     e.preventDefault();

     $.ajax({...

});

Can't submit the page even though using preventDefault in laravel

1 Answers1