jQuery Forum

I have the following JavaScript code in a page:

var flagProceedWithSubmit;

        function WarnDate() {
            flagProceedWithSubmit = true;
            $("#popUpDialog").dialog({
                modal: true,
                dialogClass: "no-close",
                buttons: [{
                        text: "Sim",
                        click: function () {
                            alert("yes");
                            $(this).dialog("close");
                            // $("form").attr("action", '@Url.Action("SendOrdForm")');
                            $("form").submit(); // ***HERE***
                            return true;
                        }
                    }, {
                        text: "Não",
                        click: function () {
                            alert("no");
                            $(this).dialog("close");
                            return false;
                        }
                    }]
            });

            return (false); // flagProceedWithSubmit
        }

        // set event handler which checks the date for "high" values
            $(document).ready(function () {
                $("form").submit(function (e) {
                    flagProceedWithSubmit = true;
                    if ($("#tableRow").length == 0)
                        return true;
                    alert("this: " + $(this).value);
                    $(".appDatePickClass").each(function (index, item) {
                        if ((new Date(item.value) - (new Date()) > 2*30*24*3600*1000)) {
                            flagProceedWithSubmit = false;
                        }
                    });
                    if (!flagProceedWithSubmit)
                        flagProceedWithSubmit = WarnDate();
                    return (flagProceedWithSubmit);
                }); // function not transposed to view Edit
    });

When I submit the form with a date too high, a dialog appears, but when I press the button "Sim" ("Yes"), the form get submitted through the submit with date check, and not through the submit before the handler that I defined.

Could you help me?

Thank you.

I have the following HTML:

...

<tr id="tableRow">

<input id="p_Date" name="p.Date" data-key="0" type="text" />

</tr>

<input id="p_Date" name="p.Date" data-key="1" type="text" />

...

As you see the date elements have the same id and name...

Now I run the following jQuery when the page is ready ($(document).ready) :

$("#tableRow #p_Data").each(function (index, item) {
                    $(item).datepicker({
                    dateFormat: "yy-mm-dd"
                });
            });

I tried also:

$("#tableRow #p_Data").datepicker(…)

The problem is that when I try to pick a date with the datepicker, for the second <input> the datepicker assignes the date selected to the first <input> !!!!!!

How can I have the right behavior with datepicker?

Thank you.

P.S. - I also tried:

            var n = $("#tableRow #p_Data").length;
            for (var i = 0; i < n; i++) {
                $("#tableRow #p_Data[data-key='" + i + "']").datepicker({
                    dateFormat: "yy-mm-dd"
                });
            }

I am using Microsoft Edge,..