Question

我正在使用JavaScript提交表单。

这是我的表格：

 <form id="rolesSelectForm" class="stdform" action="" onsubmit="return submitForm()">

<p>
    <label>Select User</label>
    <span class="field">
        <select name="selectUser" id="selectUser">
            @foreach (var item in Model.Users)
            {
                <option value="@item.Id">@item.UserName</option>
            }
        </select>
    </span>
</p>
<p class="stdformbutton">
    <button class="submit radius2" type="submit">Save</button>
</p>

这是我的剧本：

<script>
function submitForm() {

    var usersRoles = new Array;
    jQuery("#dualSelectRoles2 option").each(function () {
        usersRoles.push(jQuery(this).val());
    });

    var model = new Object();
    model.userId = jQuery('#selectUser').val();
    model.rolesList = usersRoles;

    console.log('model: ' + 'user: ' + model.userId + 'roles: ' + model.rolesList);
    console.log('JSON: ' + JSON.stringify(model));

    jQuery.ajax({
        type: "POST",
        url: "@Url.Action("AddUser")",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify(model),
        success: function (data) { showSuccessMessage(data); },
        failure: function (errMsg) {
            alert(errMsg);
        }
    });
}

//Shows the success message
function showSuccessMessage(data) {
    alert(data);
}

现在当我点击按钮时，页面会刷新，我从未收到警报。

在chrome中它至少会发出ajax post请求，但在Firefox中，它只是在发布帖子之前重新加载页面。

根据我的阅读，如果我让我的表单返回JavaScript函数，它将不会重新加载。然而，这不是我的情况。

Answer 1

从我读到的，如果我让我的表单返回java脚本函数，它将不会重新加载。

没有。您必须返回false。

这通常通过返回函数的返回值，然后从该函数返回false来完成。很多时候这将有条件地完成（因为在允许表单提交之前，通常会测试用户输入以确保它没问题。）

您的功能中没有return声明。

Answer 2

请在功能

中添加return false

function submitForm() {

    var usersRoles = new Array;
    jQuery("#dualSelectRoles2 option").each(function () {
        usersRoles.push(jQuery(this).val());
    });

    var model = new Object();
    model.userId = jQuery('#selectUser').val();
    model.rolesList = usersRoles;

    console.log('model: ' + 'user: ' + model.userId + 'roles: ' + model.rolesList);
    console.log('JSON: ' + JSON.stringify(model));

    jQuery.ajax({
        type: "POST",
        url: "@Url.Action("AddUser")",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify(model),
        success: function (data) { showSuccessMessage(data); },
        failure: function (errMsg) {
            alert(errMsg);
        }
    });
 return false;
}

当我使用JavaScript提交时，为什么我的表单仍然重置？

2 个答案: