jQuery serializeArray n'inclut pas les soumettre bouton qui a été cliqué

J'ai un formulaire avec deux boutons. Un pour l'enregistrement d'un album et l'autre pour l'annulation de la procédure de sauvegarde. Je suis l'aide de la rails.js (une commune AJAX/jQuery plug-in pour ceux d'entre vous pas dans le savoir) fichier javascript qui fonctionne avec jQuery pour le javascript discret/appels ajax. Lorsque j'envoie le formulaire des données via ajax, je veux le nom et la valeur du bouton, j'ai cliqué pour être soumis avec le reste des données, afin que je puisse prendre une décision en se basant sur le bouton qui a été cliqué.

De la méthode dans le rails.js fichier utilise .serializeArray() pour l'envoi des données du formulaire au serveur. Le problème est que cela n'inclut pas la paire nom/valeur du bouton j'ai cliqué. jQuery états de site web qu'ils le font exprès (même si ses mon avis qu'ils devraient):

"La .serializeArray() méthode utilise la norme W3C règles pour succès de contrôles pour déterminer les éléments qu'il devrait inclure; en particulier, l'élément ne peut pas être désactivé et doit contenir un nom d'attribut. Pas de bouton soumettre valeur est sérialisé depuis le formulaire n'a pas été soumis à l'aide d'un bouton."

Comment peuvent-ils supposer qu'un formulaire N'a PAS été soumise à l'aide d'un bouton? Cela n'a aucun sens et une hypothèse erronée, je crois.

Sous les règles W3C, le bouton a été activé pour la soumission d'un formulaire est considéré comme un la réussite du contrôle.

Car les développeurs de jQuery ont décidé de le faire sur le but, puis-je supposer qu'il existe une autre méthode qui N'est PAS exclure le bouton activé dans une sérialisation?

EDIT: Voici un exemple rapide de ce que mon formulaire pourrait ressembler...

<!DOCTYPE html5>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#form').submit(function(e) {
      //put your breakpoint here to look at e
      var x = 0;
    });
  });
</script>
</head>
<body>
  <form id="form">
    <input name="name" type="text"><br/>
    <input name="commit" type="submit" value="Save"/>
    <input name="commit" type="submit" value="Cancel"/>
  </form>
</body>
  • Pour quelqu'un d'autre trouver cet, le même problème existe avec les <button> tag.
InformationsquelleAutor triplethreat78 | 2010-10-24
  1. 67

    Il n'y est pas, le comportement est basé sur la submit événement de la <form>, pas d'un bouton, par exemple, en appuyant sur entrée ou en appelant .submit() en JavaScript. Vous êtes de mélange 2 concepts ici, un .serialize() ou .serializeArray() peut ou peut ne pas avoir rien de le faire avec un clic de bouton - c'est juste un événement distinct au total, ils ne sont pas connectés. Ces méthodes à un niveau plus élevé que cela: vous pouvez sérialiser un formulaire (ou un sous-ensemble de celui-ci) à tout moment et pour toute raison.

    Vous pouvez toutefois ajouter les soumettre paire nom/valeur comme une forme normale de soumettre à partir de ce bouton, si vous envoyez à partir d'un bouton par exemple:

    $("#mySubmit").click(function() {
  var formData = $(this).closest('form').serializeArray();
  formData.push({ name: this.name, value: this.value });
  //now use formData, it includes the submit button
});
    • merci pour la réponse rapide. Je vais devoir modifier le rails.js (et éventuellement soumettre un patch) pour faire ce travail. Je vais donner un coup de cette.
    • Je ne suis pas familier avec leur code, est-il possible de remplacer le gestionnaire d'événement externe, peut-être? Si vous pouviez poster, je vais jeter un oeil
    • découvrez le fichier sur gh: github.com/rails/jquery-ujs/blob/master/src/rails.js. Regardez le gestionnaire sur les lignes 34 et 76. Est-il un moyen de savoir quel bouton a été cliqué dans la event objet passé en .submit(function(e){})?
    • Vous pouvez utiliser e.target et passer à callRemote est probablement la route la plus facile, il suffit d'accepter un paramètre d'événement, utilisez e.target à l'intérieur, vous pouvez vérifier if($(e.target).is(":submit"))...
    • hmm e.target est toujours la HTMLFormElement en venant de .submit. Je ne vois pas ce qui détermine le bouton qui a été cliqué. Chrome Developer tools fenêtre dit que e a une variable appelée button mais elle est toujours pas défini.
    • désolé pour la confusion, vous devez également joindre le click gestionnaire pour le bouton soumettre lui-même, comme ceci: $('form[data-remote] :submit').live('submit', function (e) { $(this.form).callRemote(e); return false; });
    • ok, j'ai réalisé que ce que vous me montrez existe déjà dans rails.js j'ai enlevé data-remote de mes boutons. Je pense que je peux le faire fonctionner, si j'ajoute que l'attribut de mes boutons.
    • J'ai régler le problème en ajoutant le name et value de document.activeElement dans le gestionnaire de soumission. Je ne pense pas que c'est parfaitement compatible avec tous les navigateurs, mais c'est dans le cadre d'une plus grande abstraction serait probablement débrouille bien.

    InformationsquelleAutor Nick Craver
  2. 5

    J'utilise le bout de code suivant, ajoute essentiellement un élément masqué avec le même nom

     var form = $("form");
 $(":submit",form).click(function(){
            if($(this).attr('name')) {
                $(form).append(
                    $("<input type='hidden'>").attr( { 
                        name: $(this).attr('name'), 
                        value: $(this).attr('value') })
                );
            }
        });

 $(form).submit(function(){
     console.log($(this).serializeArray());
 });
    InformationsquelleAutor digitalPBK
  3. 4

    Cette solution est "universel" comme il se chargera de tous vos commentaires soumet, en passant chaque comme une variable de formulaire de soumission.

    $(document).ready(function(){
    $('input:submit').each(function(){
        $(this).click(function(){
            var formData = $(this).closest('form').serializeArray();
            formData.push({ name: $(this).attr('name'), value: $(this).val() });
        });
    });
});
    • Vous n'avez pas besoin de la each appel et appeler à l' click directement sur l'objet jquery qui représente l'entrée de tous les éléments
    InformationsquelleAutor Robert Waddell
  4. 4

    relativement propre façon de résoudre ce problème:

    <form>
    <input type="hidden" name="stuff" value="">
    <button type="submit" onclick="this.form.stuff.value=this.value" value="reset">reset</button>
    <button type="submit" onclick="this.form.stuff.value=this.value" value="delete">delete</button>
</form>
    InformationsquelleAutor commonpike
  5. 0
        var form = button.closest('form');
    var serialize = form.serialize();

    if (button.attr('name') !== undefined) {
        serialize += '&'+button.attr('name')+'=';
    }
    InformationsquelleAutor kjdion84