Forme de piège Jquery submit ()

Je suis actuellement à l'aide de jquery pour piège de la soumission d'un formulaire et d'indiquer aux utilisateurs une boîte de dialogue de confirmation. Si l'utilisateur clique sur oui, puis forme devrait se soumettre. Si l'utilisateur clique sur non, puis fermez la boîte de dialogue.

Tout cela fonctionne bien, mais pour une question: lorsque l'utilisateur clique sur oui, cela déclenche alors de nouveau le même code, et le dialogue est ré-ouvert.

$("#myform").submit(function (event) {
    if (something) {
        var $dialog = $('<div></div>').dialog({
            buttons: {
                "OK": function () {
                    $dialog.dialog('close');
                    $("#myform").submit();
                    return;
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        $dialog.dialog('open');
        event.preventDefault();
        return false;
    } else {
        $("#myform").submit();
    }
});

Je comprends pourquoi ce qui se passe, tout simplement pas sûr de la meilleure façon de les contourner. Je me rends compte que je pourrais montrer le modal sur clic du bouton, au lieu de soumettre le formulaire, mais cela ne marche pas à contourner le problème de l'utilisateur de frapper le bouton enter sur le clavier pour envoyer le formulaire.

source d'informationauteur JonoB

  1. 12

    Parce que quand vous submit la forme, la submit événement déclenche à nouveau et si le gestionnaire d'événement. Vous devez unbind la submit gestionnaire d'événement lorsque l'utilisateur dit OK. Essayez cette

    $("#myform").submit(function (event) {
    if (something) {
        var $dialog = $('<div></div>').dialog({
            buttons: {
                "OK": function () {
                    $dialog.dialog('close');
                    //Check this line - unbinding the submit event handler
                    $("#myform").unbind('submit').submit();
                    return;
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        $dialog.dialog('open');
        event.preventDefault();
        return false;
    } else {
        $("#myform").submit();
    }
});
  2. 5

    Vous devez retourner false lorsque OK:

    $("#myform").submit(function (event) {
    if (something) {
        var $dialog = $('<div></div>').dialog({
            buttons: {
                "OK": function () {
                    $dialog.dialog('close');
                    $("#myform").submit();
                    return false; //<=== not just return;
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        $dialog.dialog('open');
        event.preventDefault();
        return false;
    } else {
        $("#myform").submit();
    }
});

    Ou supprimer le manuel de soumettre:

    buttons: {
"OK": function () {
    $dialog.dialog('close');
    //$("#myform").submit();  <-- delete it
    return;
},
  3. 0

    Intstead de l'utilisation de l'objet jQuery pour soumettre le formulaire, vous pouvez utiliser l'élément du DOM que l'objet jQuery se réfère pour soumettre le formulaire. Cela contourne le jQuery, le gestionnaire d'événement. Votre OK fonction devrait ressembler à ceci:

    "OK": function () {
    $dialog.dialog('close');
    $("#myform").get(0).submit(); //use the underlying DOM element to sumbit
    return false;
},
  4. 0

    Je voudrais faire something soit un espace de noms global, ou une valeur de certains secrets d'entrée comme suit:

    var something = nameSpaced.something ||  $('#hiddenInput').val(); //your choice
if (something) {
    ...
} ...

    Votre logique devrait fonctionner normalement ensuite.