jQuery - ajouter des paramètres supplémentaires lors de la soumission (PAS ajax)

206

En utilisant «soumettre» de jQuery - existe-t-il un moyen de transmettre des paramètres supplémentaires à un formulaire? Je ne cherche PAS à le faire avec Ajax - c'est une soumission de formulaire normale et typique.

$('#submit').click(function () {
    $('#event').submit(function () {
        data: { 
        form['attendees'] = $('#attendance').sortable('toArray').toString();
    });
});

jquery parameter-passing form-submit

— Ciel
source

Quelle technologie côté serveur utilisez-vous?

— Enrique

Voir ma réponse [ici] [1], qui s'ajoute à un formulaire sérialisé avant de le soumettre. [1]: stackoverflow.com/questions/17809056/…

— Jeff Lowery

Jetez un œil à stackoverflow.com/questions/603924/…

— LCJ

371

Celui-ci l'a fait pour moi:

var input = $("<input>")
               .attr("type", "hidden")
               .attr("name", "mydata").val("bla");
$('#form1').append(input);

est basé sur la réponse de Daff, mais a ajouté l'attribut NAME pour le laisser apparaître dans la collection de formulaires et a changé VALUE en VAL. Également vérifié l'ID du FORM (form1 dans mon cas)

utilisé le firebug de Firefox pour vérifier si l'élément a été inséré.

Les éléments masqués sont publiés dans la collection de formulaires, seuls les champs en lecture seule sont ignorés.

Michel

— Michel
source

46

Comment puis-je chanter «tu es mon soleil» en binaire? Merci beaucoup. Cela résout tellement de choses.

— Ciel

38

Vous pouvez légèrement améliorer la lisibilité: var input = $ ("<input>", {type: "hidden", nom: "mydata", valeur: "bla"}); $ ('# form1'). append ($ (entrée));

— Konstantine Kalbazov

2

$ ("<input>") .attr ("type", "hidden"). attr ("name", "mydata"). val ("bla"). appendTo ('# form1'); est une autre façon

— kiev

6

J'ai aimé un combo de: $ ("<input>", {type: "caché", nom: "mesdonnées", valeur: "bla"}). AppendTo ("# form1");

— gabeio

N'y a-t-il pas de limite sur la taille des données? J'ai envoyé un gros objet en utilisant JSON.stringify (obj) et cette méthode et il semblait être tronqué.

— omikron

26

Dans votre cas, il suffit d'ajouter dynamiquement un autre champ masqué à votre formulaire.

var input = $("<input>").attr("type", "hidden").val("Bla");
$('#form').append($(input));

— Daff
source

Les données que je dois soumettre ne sont pas compatibles avec le formulaire. Il doit être capturé et géré côté serveur.

— Ciel

Qu'entendez-vous par «pas capable de forme»?

— Vincent Ramdhanie

Désolé - cela n'a pas fonctionné du tout. Même avec seulement des données forcées, il ne les injecte pas dans le formulaire.

— Ciel

Il ne peut pas être placé dans un champ de formulaire.

— Ciel

2

Si c'est une chaîne, elle peut être placée dans un champ de formulaire

— PetersenDidIt

19

Vous pouvez même utiliser celui-ci. a bien fonctionné pour moi

$("#registerform").attr("action", "register.php?btnsubmit=Save") 
$('#registerform').submit();

cela soumettra btnsubmit = Enregistrer en tant que valeur GET au formulaire register.php.

— Parag
source

Cela semble être une solution plus élégante. N'oubliez pas d'utiliser encodeURIComponent()la valeur du paramètre en fonction du type de données.

— Andres SK

1

Celui-ci est en fait meilleur lorsque vous autorisez l'utilisateur à soumettre plusieurs fois le formulaire. Le formulaire n'obtiendra pas plus d'un champ masqué avec des valeurs différentes.

— Mellon

11

Vous pouvez écrire une fonction jQuery qui vous permet d'ajouter des champs cachés à un formulaire:

// This must be applied to a form (or an object inside a form).
jQuery.fn.addHidden = function (name, value) {
    return this.each(function () {
        var input = $("<input>").attr("type", "hidden").attr("name", name).val(value);
        $(this).append($(input));
    });
};

Et puis ajoutez le champ caché avant de soumettre:

var frm = $("#form").addHidden('SaveAndReturn', 'Save and Return')
                    .submit();

— Jonathan
source

1

Voir stackoverflow.com/questions/2601223/… pour une version plus avancée d'addHidden

— Jonathan

1

J'aime la simplicité de cette solution. Il ne gère pas beaucoup de cas, mais il gère bien le cas.

— Phil

11

Vous n'avez pas besoin de lier l'événement d'envoi au clic du bouton d'envoi, il suffit de lier l'événement d'envoi et il capturera l'événement d'envoi quelle que soit la façon dont il est déclenché.

Pensez à ce que vous voulez soumettre le triable comme vous le feriez via ajax. Essayez de faire quelque chose comme ceci:

var form = $('#event').submit(function () {
    $.each($('#attendance').sortable('toArray'),function(i, value){
        $("<input>").attr({
            'type':'hidden',
            'name':'attendace['+i+']'
        }).val(value).appendTo(form);
    });
});

— PetersenDidIt
source

ne s'affiche toujours pas sur la collection de formulaires côté serveur ... y a-t-il quelque chose de spécial que je dois faire pour qu'un champ caché apparaisse sur un serveur? Il passe par C # / ASP.NET MVC à l'aide d'un objet FormCollection.

— Ciel

Mis à jour ma réponse, je pense avoir compris ce que vous essayez de faire.

— PetersenDidIt

Ajoutez-vous un nameattribut à l'entrée de formulaire masqué générée? Selon stackoverflow.com/questions/504681/… il semble que les objets FormCollection nécessitent que tous les <input>éléments aient des noms.

— npdoty

Oui, j'essaie de pousser un triable dans la collection de formulaires sous la forme d'une chaîne de valeurs séparées par des virgules. J'ai essayé votre mise à jour et elle ne s'affiche toujours pas. Je ne suis pas sûr de ce que je fais mal ... J'apprécie l'aide.

— Ciel

On dirait que le problème n'est pas du côté client mais du côté serveur.

— PetersenDidIt

2

Réponse similaire, mais je voulais juste la rendre disponible pour un test facile / rapide.

var input = $("<input>")
               .attr("name", "mydata").val("go Rafa!");

$('#easy_test').append(input);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>



<form id="easy_test">
  
</form>

Développer l'extrait

— Cacho Santa
source