HTML Form Submit does not reach my javascript

Question

I am trying to reach my javascript code when I press the submit button within my form and it is not triggering my javascript code at all. So I got this form within my Bootstrap Modal using the following code:

<form id="updateUserForm">
  <div class="form-group">
    <label for="firstName">First name:</label>
    <input type="text" class="form-control" id="firstnameModalInput" />
  </div>
  <div class="form-group">
    <label for="middleName">Middle name:</label>
    <input type="text" class="form-control" id="middlenameModalInput" />
  </div>
  <div class="form-group">
    <label for="lastName">Last name:</label>
    <input type="text" class="form-control" id="lastnameModalInput" />
  </div>
  <div class="form-group">
    <label for="mobileNumber">Mobile number:</label>
    <input type="text" class="form-control" id="mobilenumberModalInput" />
  </div>
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="text" class="form-control" id="emailModalInput" />
  </div>
  <div class="form-group">
    <label for="Enabled">Enabled:</label>
    <input type="checkbox" class="form-control" id="enabledModalInput" style="width:34px" />
  </div>
  <div class="modal-footer">
    <input type="submit" class="btn btn-default" data-dismiss="modal" id="submit" value="Apply" />
  </div>
</form>

And the javascript code I have:

$('document').ready(function(){
$("#updateUserForm").submit(function (event) {
    console.log("Method entered");
    event.preventDefault();
    var serialize = $("#updateUserForm").serialize();

    $.ajax({
        type: "POST",
        data: serialize,
        url: "/Dashboard/UpdateUser",
        datatype: JSON,
        succes: function (data) {
            console.log("succes!");
            console.log(data);
        },
        error: function (data) {
            console.log("error");
            console.log(data);
        }
      })
   })
})

I have another function in that javascript that is used to populate the input fields and that works fine, so I guess the HTML can reach the javascript file. But it does not reach the javascript submit function (it doesn't do the console.log for example) . Does anyone have an idea what I am doing wrong?

EDIT:

I have been playing around a bit more, and it seems that I can acces the javascript method when I try to reach it from outside of the bootstrap modal, it goes wrong somewhere within the modal.

Answer 1

Use return false instead of prevent default end of the function and change the submit function with on function .

$('document').ready(function(){
    $("#updateUserForm").on("submit", function () {
        console.log("Method entered");
        var serialize = $("#updateUserForm").serialize();

        $.ajax({
            type: "POST",
            data: serialize,
            url: "/Dashboard/UpdateUser",
            datatype: JSON,
            succes: function (data) {
                console.log("succes!");
                console.log(data);
            },
            error: function (data) {
                console.log("error");
                console.log(data);
            }
        })
        return false;
    })
})

Answer 2

try this

  $("#updateUserForm").on('submit', function (e) {
       e.preventDefault();
   });

Answer 3

Can you please try below code. and please check post URL"/Dashboard/UpdateUser" is right?

$("#UpdateUserForm").submit(function (e)
{
    var isValid = $("#UpdateUserForm").valid();
    if (!isValid)
        return;

    //This is important as it prevents the form being submitted twice
    e.preventDefault();

    $.ajax({
        type: "POST",
        url: "/Dashboard/UpdateUser",
        data: $("#UpdateUserForm").serialize(),
        success: function (response)
        {                    
            var status = '';
            status = response.Status;
            console.log("succes!");
            console.log(data);
        }
    })
    .error(function () {
        console.log("error");
        console.log(data);
    });
});

Answer 4

    $("#updateUserForm").on('submit', function (e) {
       e.preventDefault();
   });

Or use action properties in form.