如果此脚本禁止提交,为什么还要提交此表单

Why this form is submitted also if this script forbids the submission?

本文关键字:提交 表单 为什么 禁止 如果 脚本      更新时间:2023-09-26

我在JavaScript开发方面绝对是新手,我有以下问题。

我有一个包含两个输入标签的表单,用户可以使用日历脚本可视化和提交按钮(名为 Cerca(插入两个日期(如 dateFromdateTo(。

当用户单击提交按钮时,将执行一个JavaScript,检查两个日期是否正确(如果两个日期都设置了,并且dateTo是否晚于dateFrom(。如果两个日期正确,则表单将提交到 Java Servlet,否则不会提交。

所以这是我的形式(dataDa表示日期开始dataA表示日期到(:

<form id="dataDaAForm" name="dataDaAForm" action="salwf.do?serv=<%=request.getSession(false).getAttribute("service")%>&matricola=<%=request.getSession(false).getAttribute("matricola")%>" method="post">
                <div class="customPanel" style="width: 100% !important; overflow-y: auto;">
                    <div class="pane">
                        <table class="dataDaATable" width="100%">
                            <tr>
                                <!-- DATA DA: -->
                                <td align="right">
                                    Da:
                                </td>
                                <td>
                                    <input type="hidden" size="9" class="impPrfTot" readonly="readonly"
                                           onchange="cambioDataDa(this.value)"
                                           name="dataDa" id="datada" value=""
                                           style="font-size: 11px;color: #000000;">
                                    <input id="datada2" onchange="" type="text" maxlength="9" size="9"
                                           class="impPrfTot"
                                           readonly="readonly" style="width: 100px" value="<%=request.getSession(false).getAttribute("dataDa")%>"
                                           style="font-size: 11px;color: #000000;">
                                    <img style="cursor:pointer;margin-left: 3px;"
                                         src="js/calendar/cal.gif"
                                         alt="Seleziona data" border="0"
                                         onClick="displayCalendar(document.getElementById('datada'),'yyyymmdd',this)">
                                </td>
                                <!-- DATA A: -->
                                <td align="right">
                                    A:
                                </td>
                                <td>
                                    <input type="hidden" size="9" class="impPrfTot" readonly="readonly"
                                           onchange="cambioDataA(this.value)"
                                           name="dataA" id="dataa" value=""
                                           style="font-size: 11px;color: #000000;">
                                    <input id="dataa2" onchange="" type="text" maxlength="9" size="9"
                                           class="impPrfTot" value="<%=request.getSession(false).getAttribute("dataA")%>"
                                           readonly="readonly" style="width: 100px"
                                           style="font-size: 11px;color: #000000;">
                                    <img style="cursor:pointer;margin-left: 3px;"
                                         src="js/calendar/cal.gif"
                                         alt="Seleziona data" border="0"
                                         onClick="displayCalendar(document.getElementById('dataa'),'yyyymmdd',this)">
                                </td>
                                <!-- SUBMIT BUTTON: -->
                                <td>
                                    <button class="dataDadataAButton" name="submitdataDadataA" onclick="testSubmit();">Cerca</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
</form>

这是检查两个日期是否正确的脚本:

function testSubmit() {
        //f = document.forms[0];
        var f = document.getElementById('dataDaAForm');
        //var dataConfermaDA = f.dataDa.value;
        //var dataConfermaA = f.dataA.value;
        var dataDa = f.dataDa.value;
        var dataA = f.dataA.value;
        // TODO:
        if (!controllaDate(dataDa, dataA, "'Data Conferma'")) {
            return false;
        }
        //f.action = "edimon.do?serv=M.5";
        f.submit();
    }

    function controllaDate(DataDA, DataA, nomeCampo) {
        var check_DataDA = (DataDA != "");
        var check_DataA = (DataA != "");
        var check_data_DA = check_DataDA;
        var check_data_A = check_DataA;
        if (!check_data_DA && (check_DataA)) {
            alert(nomeCampo + " Selezionare correttamente Data Da");
            return false;
        }
        if (!check_data_A && (check_DataDA)) {
            alert(nomeCampo + " Selezionare correttamente Data A");
            return false;
        }
        if (check_data_DA && check_data_A) {
            /**
            var giorno = DataDA.substr(6, 7);
            var mese = DataDA.substr(4, 5);
            var anno = DataDA.substr(0, 4);
            var dataDa = new Date(anno, mese - 1, giorno);
            var giorno = DataA.substr(6, 7);
            var mese = DataA.substr(4, 5);
            var anno = DataA.substr(0, 4);
            */
            var giorno = DataDA.substring(6, 8);
            var mese = DataDA.substring(4, 6);
            var anno = DataDA.substring(0, 4);
            var dataDa = new Date(anno, mese - 1, giorno);
            var giorno = DataA.substring(6, 8);
            var mese = DataA.substring(4, 6);
            var anno = DataA.substring(0, 4);
            var dataA = new Date(anno, mese - 1, giorno);
            if (dataA < dataDa) {
                alert(nomeCampo + " La Data Da deve essere minore o uguale alla Data A");
                return false;
            }
        }
        return true;
    }

因此,例如,如果我尝试仅插入dataDa(dateFrom(值而不是dataA(dateTo(值,则会发生的情况是,当我单击Cerca按钮时,将执行testSubmit()的JavaScript。

现在在这个脚本中,我有这样的东西:

dataDa = "20141202"
dataA = ""

( dataDa 已设置,dataA为空(

因此,现在它被称为执行有效日期检查的controllaDate()脚本。

所以这个脚本收到类似这样的东西(收到的输入参数(:

controllaDate("20141202", "", "'DataConferma'")

因此执行此代码片段:

if (!check_data_A && (check_DataDA)) {
    alert(nomeCampo + " Selezionare correttamente Data A");
    return false;
}

并在此 if 中输入(因为check_data_A为假,因为未设置dataA(。

因此,向调用方显示警报弹出窗口并return false,即testSubmit()函数。

所以,正如我所期望的那样,现在回到这一点testSubmit()

if (!controllaDate(dataDa, dataA, "'Data Conferma'")) {
    return false;
}

并且testSubmit()函数返回false并且不应提交我的表单,因为未执行此操作:

f.submit()

但我不知道如果不执行f.submit()声明,为什么还要提交表格。为什么?我错过了什么?

我可以以某种方式防止表单在返回 false 时提交吗?

<button class="dataDadataAButton" name="submitdataDadataA" onclick="testSubmit();">Cerca</button>

您有一个提交按钮。单击它将提交表单,除非有人阻止它。

onclick函数调用testSubmit(返回 false (,但它对 testSubmit 的返回值不执行任何操作。您必须从onclick函数返回false,以防止发生提交按钮的正常操作。

onclick="return testSubmit();"

也就是说,onclick属性是我们在 90 年代将 JavaScript 绑定到事件处理程序的方式。我们现在有addEventListener(我们可以绑定到表单的submit事件,而不是假设它只能通过单击按钮提交(。