2009-09-16 5 views
0

Je travaille sur l'interface graphique Web d'un produit semblable à un appareil.Incidence des boutons "réussis" lors de l'appel de form.submit()

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

Il est nécessaire d'ajouter "Êtes-vous sûr?" confirmation au formulaire. Si j'ajoute un appel à

confirm("are you sure?"); 

comme méthode onsubmit dans la balise FORM, ou onclick dans la balise bouton Envoyer, il fonctionne très bien, mais utilise la boîte de dialogue de confirmation laid natif navigateur.

Ailleurs dans le produit que nous avons une belle boîte de dialogue de confirmation de style CSS personnalisé Je voudrais utiliser, mais cela fonctionne comme ceci: A l'endroit approprié, vous mettez un appel à

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

Cela met un masque de clic, personnalise une boîte de dialogue, centre et l'affiche, puis retourne FALSE et le formulaire ne pas soumettre. Plus tard, lorsque l'utilisateur décide, s'il appuie sur "Oui", il appelle la fonction confirmCallback. Dans l'autre, les pages basées sur Ajax du produit rassemblent des informations, créent un postBody et utilisent l'objet Ajax de Prototype pour les publier, et tout va bien. (Si « Non », la boîte de dialogue et clickmask sont supprimés et les choses continuent.)

Sur cette page plus simple, avec la forme pure HTML, j'ai une fonction confirmCallback qui ressemble à ceci:

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

et il se déclenche correctement, mais lorsque le formulaire est soumis, le bouton de suppression a déjà été cliqué, et le faux retourné par le client confirme la soumission supprimée. Au lieu de cela, ceci est considéré comme une nouvelle soumission, et le bouton de suppression n'a pas été cliqué, donc il n'est pas considéré comme "réussi" en termes de la norme HTML 4 de W3.org section 17.13.3. Le serveur obtient les données, aucun bouton de suppression, dit "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'ici, MERCI, et voici ma vraie question. Comment puis-je, dans ma fonction javascript de confirmationCallback, de manière croisée, déclencher le bouton de suppression, devenir "réussi" et soumettre avec le reste des données?

+0

Eh bien, ce qui fonctionnait était l'ajout d'une entrée cachée avec name = value = "remove", ce qui trompait le serveur en lui faisant croire que le bouton était enfoncé. Cela ne résout toujours pas le problème indiqué, mais fait fonctionner le formulaire AVEC le joli dialogue de confirmation, qui compte. Merci pour l'aide de tout le monde. – Berry

Répondre

0

On dirait que vous aurez besoin d'un champ caché pour prétendre être le bouton enfoncé, et chaque bouton ne nécessitera aucun nom, mais plutôt un événement onclick pour manipuler la valeur du champ caché. Si le nom des boutons est différent, vous devrez peut-être utiliser les méthodes DOM pour ajouter le champ masqué car je ne pense pas que vous puissiez changer le nom d'un champ une fois qu'il a été ajouté au DOM dans tous les champs. navigateurs. Si vous avez besoin que cette solution fonctionne encore sans JS, vous devrez peut-être jouer un peu plus avec la logique JS (pour apporter plus de modifications à votre arborescence DOM initiale) ou modifier le code du serveur. Vous pourriez même mettre le comportement "Are you sure" dans la réponse alors ...

+0

Merci Lee; C'est exactement ce que j'ai fini par faire. Comme il arrive, pour ce produit, nous n'avons pas besoin de considérer le cas "no JS", donc je suis prêt à partir! – Berry

0

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 et entraînera le bouton entraînant la publication du post avec les données du formulaire.

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

Hm, intéressant. Je vais essayer ça. Merci. – Berry

+0

OK. Pro: le formulaire n'est plus soumis sans le bouton. Con: le formulaire n'est plus soumis du tout. Cela semble être la bonne approche cependant; Je bricolerai encore plus et rapporterai si je le fais fonctionner. – Berry

+0

Pourrait être le feu ne fait pas ce que j'attends dans Prototype. J'ai déménagé à jQuery et ma mémoire est un peu floue. Vous devrez peut-être obtenir l'élément sous-jacent et cliquez dessus(). – tvanfosson

0

Si l'on suppose que le bouton est le bouton d'envoi pour cette forme alors probablement la solution la plus simple est de donner la forme d'un identifiant

<form id="submitForm"... 

Ensuite, dans votre confirmation appelez le formulaire soumettre

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

Je pense que cela va faire ce que vous demandez, mais il semble que vous étiez déjà à cette solution, donc si vous demandez quelque chose d'autre laissez-moi savoir.

+0

C'est à peu près ce que je fais; le problème est le moment où mon rappel est appelé, le formulaire a "reset" et ne considère plus le bouton submit "cliqué", et le serveur ne le voit pas dans les données POST. Merci d'avoir répondu. – Berry

Questions connexes