HTML表單提交未到達我的JavaScript

Question

當我按下表單中的“提交”按鈕時，我試圖獲取我的JavaScript代碼，而這根本沒有觸發我的JavaScript代碼。 因此，我使用以下代碼在Bootstrap Modal中獲得了此表單：

<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>

還有我擁有的javascript代碼：

$('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);
        }
      })
   })
})

我在該javascript中有另一個函數，該函數用於填充輸入字段並且可以正常工作，因此我猜HTML可以到達javascript文件。 但是它沒有達到javascript提交功能（例如，它沒有執行console.log）。 有人知道我在做什么錯嗎？

編輯：

我玩的更多了，當我嘗試從引導程序模態之外訪問它時，似乎可以訪問javascript方法，但該模態內的某個地方出錯了。

Answer 1

使用return false代替防止函數的默認結束，並使用on function更改Submit 函數 。

$('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

嘗試這個

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

Answer 3

您可以嘗試下面的代碼嗎？ 並檢查發布網址“ / Dashboard / UpdateUser”是否正確？

$("#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();
   });

或使用表單的動作屬性。