Y compris & # 8220; réussi & # 8221; boutons lors de l'appel de form.submit ()

Question

Je travaille sur l'interface graphique Web d'un produit similaire à une appliance.

J'ai un formulaire HTML qui fonctionne bien: il affiche une liste d'éléments avec des cases à cocher, l'utilisateur en vérifie certaines et clique sur le lien "supprimer". bouton qui soumet le formulaire. Le serveur obtient le POST, supprime les éléments et actualise la page. Tout va bien.

Il est obligatoire d'ajouter un "êtes-vous sûr?" confirmation au formulaire. Si j'ajoute un appel à

 confirm("are you sure?");

en tant que méthode onsubmit dans la balise FORM, ou que l'onclick dans la balise du bouton d'envoi, cela fonctionne correctement, mais utilise la boîte de dialogue de confirmation native du navigateur, très laide.

Ailleurs dans le produit, nous avons une belle boîte de dialogue de confirmation de style CSS que je voudrais utiliser, mais qui fonctionne comme suit: au bon endroit, vous appelez

.

myConfirm("Confirm", "Are you sure", "Yes", "No", confirmCallback);

Ceci crée un masque de clic, personnalise une boîte de dialogue, le centre et l'affiche, puis renvoie FALSE et le formulaire n'est pas soumis.

Lorsque l'utilisateur décide, s'il appuie sur "Oui", il appelle ensuite la fonction confirmCallback. Dans l’autre, les pages Ajax du produit qui recueille les informations, crée un postBody et utilise l’objet Ajax de Prototype pour le poster, et tout va bien. (Si "Non", la boîte de dialogue et le masque de clic sont supprimés et les choses se poursuivent.)

Sur cette page plus simple, avec le formulaire HTML pur, j'ai une fonction confirmCallback qui ressemble à ceci:

var confirmCallback = function() {
    document.myForm.submit();
}

et tout se passe bien, mais lorsque le formulaire est soumis, le bouton de suppression a déjà été cliqué et la valeur renvoyée par la confirmation personnalisée a été supprimée. Au lieu de cela, ceci est considéré comme une nouvelle soumission et le bouton de suppression n'a pas été réellement cliqué, il n'est donc pas considéré comme "réussi". en termes de la section 17.13.3 du standard HTML 4 de W3.org. Le serveur récupère les données, pas de bouton de suppression, indique "Je l’ai eu mais je ne sais pas ce que vous voulez que je fasse avec", et ne fait que servir la page suivante.

Si vous avez lu jusqu'à présent, MERCI, et voici ma question actuelle. Comment puis-je, dans ma fonction javascript confirmCallback, de manière croisée, faire en sorte que le bouton de suppression se déclenche et devienne "réussi"? et soumettre avec le reste des données?

Answer 1

On dirait que vous aurez besoin d’un champ caché pour prétendre être le bouton enfoncé et que chaque bouton n’aura pas besoin de nom, mais plutôt d’un événement onclick pour manipuler la valeur du champ caché.

Si les noms des boutons sont tous différents, vous devrez peut-être utiliser des méthodes DOM pour ajouter le champ masqué, car je ne pense pas que vous puissiez modifier le nom d'un champ une fois qu'il a été ajouté au DOM dans tous les navigateurs. .

Si vous souhaitez que cette solution fonctionne toujours sans JS, vous devrez peut-être jouer un peu plus avec la logique de JS (pour apporter davantage de modifications à votre arborescence DOM initiale) ou modifier le code du serveur. Vous pouvez même mettre le code "Êtes-vous sûr"? comportement dans la réponse alors ...

Answer 2

En supposant que le bouton de suppression soit le bouton de soumission de ce formulaire, la solution la plus simple consiste probablement à lui attribuer un identifiant

<form id="submitForm"...

Ensuite, dans votre appel de confirmation, le formulaire d'envoi

document.getElementById("submitForm").submit()

Je pense que cela fera ce que vous demandez, mais il semble que vous ayez déjà déjà trouvé cette solution. Si vous demandez quelque chose d'autre, faites-le-moi savoir.

Answer 3

Dans votre rappel, supprimez le gestionnaire onclick du bouton (provoquant la confirmation), puis cliquez sur le bouton. Cela entraînera le clic du bouton pour soumettre le formulaire, ce qui entraînera la publication de la soumission avec les données du formulaire.

var confirmCallback = function() {
    $('submitButton').stopObserving('click');
    $('submitButton').click();
}