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）。有谁知道我做错了什么？

修改

我已经玩了一些，当我尝试从bootstrap模式的外部到达它时，我似乎可以访问javascript方法，它在模态中的某个地方出错。

Answer 1

使用return false而不是阻止函数的默认结束，并使用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

试试这个

 if (!headers_sent($file, $line)) {
     header('Location: /index');
     exit("headers: {$file}, line number: {$line}");
     } else {
       echo  "Cannot redirect";
       exit;
     }

Answer 3

请试试下面的代码。请检查帖子URL＆＃34; / Dashboard / UpdateUser＆＃34;是对吗？

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

或者在表单中使用动作属性。

HTML表单提交未达到我的javascript

4 个答案: