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

Question

I am absolutely new in JavaScript development and I have the following problem.

I have a form containing two input tags where the user can insert two dates (something like dateFrom and dateTo) using a calendar script visualization and a submit button (named Cerca).

When the user click the submit button it is performed a JavaScript that check if the two dates are correct (if both the dates are set and if the dateTo is later the dateFrom). If the two dates are correct the form is submitted to a Java Servlet, otherwise it is not submitted.

So this is my form (dataDa means dateFrom and dataA means dateTo):

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

And this is the script that check if the two dates are correct:

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

So, for example if I try to insert only the dataDa (dateFrom) value and not the dataA (dateTo) value what it happens is that when I click the Cerca button the testSubmit() JavaScript is performed.

Now in this script I have something like this:

dataDa = "20141202"
dataA = ""

(dataDa is set and dataA is empty)

So now it is called the controllaDate() script that perform the effective date checking.

So this script receives something like this (the received input parameters):

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

So executes this code snippet:

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

and enter in this if (because check_data_A is false because dataA is not set).

So show the alert popup and return false to its caller that is the testSubmit() function.

So, as I expect, now come back to the testSubmit() in this point:

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

and the testSubmit() function return false and should not submit my form because this operation is not performed:

f.submit()

But I don't know why the form is submitted anyway also if the f.submit() statement is not performed. Why? What am I missing?

Can I prevent in someway the form submitting when return false?

Answer 1

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

You have a submit button. Clicking it will submit the form unless something prevents it.

The onclick function calls testSubmit (which returns false) but it does nothing with the return value from testSubmit. You have to return false from the onclick function to prevent the normal action of the submit button from happening.

onclick="return testSubmit();"

---

That said, onclick attributes are how we bound JavaScript to event handlers in the 90s. We have addEventListener now (and we can bind to the submit event of the form instead of assuming it will only be submitted by clicking a button).