Question

在表单提交上，我正在调用以下函数。

function confirmSubmit() {
    var checkedAtLeastOne = false;
    var checkboxs = document.getElementsByName("reportColumns");
    var reportId = $('#reportId').val();

    console.log(checkboxs.length);
    for(var i = 0, l = checkboxs.length; i < l; i++) {
        if(checkboxs[i].checked) {
            checkedAtLeastOne = true;
            break;
        }
    }
    if(checkedAtLeastOne) {
        if(!reportId) {
            alert('Report ID cannot be empty');
            return false;
        } else {
            var xhttp = new XMLHttpRequest();

            xhttp.open("GET", "checkreportid.action?reportId=" + reportId, true);
            xhttp.send();

            xhttp.onreadystatechange = function (e) {
                if(xhttp.readyState == 4 && xhttp.status == 200) {
                    document.getElementById("checkreportid").innerHTML = xhttp.responseText;
                    var reportid = $('#reportid').val();
                    console.log("reportId->" + reportId);
                    console.log("reportid->" + $('#reportid').val());
                    if(reportid == reportId) {
                        alert("Duplicate Report ID!");
                        return false;
                    } else {
                        return true;
                    }
                }
            }

        }
    } else {
        alert("You must select atleast one column");
        //e.preventDefault();
        return false;
    }
}

如果 reportid 等于 reportId ，则会提供警报（重复报告ID），但会调用该操作。 return false 不会阻止调用操作。

我正在调用以下函数。

<s:form action="savereport" namespace="/" validate="true"
        onsubmit="return confirmSubmit()">

EDITED

现在我正在尝试跟随。如果报告ID为空，则会显示相关的警报消息（报告ID不能为空）。它不是空的，它会调用 checkreportid 操作，但即使存在重复的报告ID，它也不会提供重复的错误消息。它调用表单提交操作。

function confirmSubmit（）{ var checkedAtLeastOne = false; var checkboxs = document.getElementsByName（“reportColumns”）; var reportId = $（'＃reportId'）。val（）;

    console.log(checkboxs.length);
    for (var i = 0, l = checkboxs.length; i < l; i++) {
        if (checkboxs[i].checked) {
            checkedAtLeastOne = true;
            break;
        }
    }

    if (!reportId) {
        alert('Report ID cannot be empty');
        return false;
    } else {
        ////////
        $.ajax({
            url: "<s:url action='checkreportid'/>",
            type: "GET",
            data: {reportId: reportId},
            dataType: "text/javascript",
            traditional: true,
            statusCode: {
                200: function (data) {
                    console.log(data.responseText);
                    document.getElementById("checkreportid").innerHTML = data.responseText;
                    var reportid = $('#reportid').val();
                    console.log("reportId->"+reportId);
                    console.log("reportid->"+reportid);
                    if (reportid==reportId) {
                        alert("Duplicate Report ID!");
                        return false;
                    } else {
                        if (!checkedAtLeastOne) {
                            return true;
                        } else {
                            alert("You must select atleast one column");
                            return false;
                        } 
                    }

                }
            }

        }); 
    }       
}

我的代码缺少什么？

Answer 1

这是由于XMLHttpRequest的异步性质造成的。您在回调函数中返回false，而不是在onsubmit处理程序中返回。

你应该在没有XMLHttpRequest的情况下调查你想做的事情，或者使用同步请求（这在某些浏览器中不会被推荐和禁用）。

推荐选项是使用

停止表单一直提交

e.preventDefault();
return false;

如果您愿意，可以在原始回调中手动提交带有XMLHttpRequest的表单。

Answer 2

原因是XMLHttpRequest是同步的。

致电

xhttp.send();

立即返回，因此if-else分支没有return false。

代码中的return语句归结为：

if(checkedAtLeastOne) {
    if(!reportId) {
        return false;
    } else {
    }
} else {
    return false;
}

Answer 3

您应该将preventDefault方法添加到表单元素中，如下所示。

  <form onsubmit='event.preventDefault(); return confirmSubmit();'>
        <input type='submit' />
    </form>

Answer 4

使用onsubmit事件中的return来触发return false action，

<form onsubmit = "return confirmSubmit()"> 
</form>

返回false不会阻止在javascript中调用表单提交

4 个答案: