web-dev-qa-db-fra.com

Comment modifier des données de formulaire sérialisées dans jQuery?

J'essaie de soumettre mon formulaire en AJAX, je dois donc sérialiser () les données. Mais j'utilise fckEditor et jQuery ne sait pas comment le gérer. Après la sérialisation, j'essaie de modifier manuellement la valeur, mais pas de chance jusqu'à présent ... aucune idée

if(content_val!=""){
    var values = $("#frmblog").serialize();
    values.content = content_val; //content_val is the manually fetched data which I am trying to insert into the serialized content.
    alert(content_val); alert(values);
}
78
Bluemagica

serialize retourne une chaîne encodée en URL contenant les champs du formulaire. Si vous devez l’ajouter, utilisez les règles de chaîne standard codées par URL, par exemple:

var values = $("#frmblog").serialize();
values += "&content=" + encodeURIComponent(content_val);

(Ce qui précède suppose qu’il y aura toujours une valeur dans values après l’appel serialize; si ce n’est pas nécessairement vrai, déterminez s’il faut utiliser & basé sur si values est vide avant de l’ajouter.)

Alternativement, si vous le souhaitez, vous pouvez utiliser serializeArray puis ajouter au tableau et utiliser jQuery.param pour transformer le résultat en chaîne de requête, mais cela semble être un long chemin à parcourir:

// You can also do this, but it seems a long way 'round
var values = $("#frmblog").serializeArray();
values.Push({
    name: "content",
    value: content_val
});
values = jQuery.param(values);

Mise à jour : Dans un commentaire ajouté plus tard, vous avez dit:

Le problème est que certaines valeurs par défaut sont définies dans la clé 'contenu' pendant le processus de sérilisation, je ne peux donc pas simplement attacher une nouvelle valeur, je dois mettre à jour celle qui y figure déjà. "

Cela change les choses. Il est difficile de rechercher content dans la chaîne encodée par l'URL, je choisirais donc le tableau:

var values, index;

// Get the parameters as an array
values = $("#frmblog").serializeArray();

// Find and replace `content` if there
for (index = 0; index < values.length; ++index) {
    if (values[index].name == "content") {
        values[index].value = content_val;
        break;
    }
}

// Add it if it wasn't there
if (index >= values.length) {
    values.Push({
        name: "content",
        value: content_val
    });
}

// Convert to URL-encoded string
values = jQuery.param(values);

Vous voudrez probablement en faire une fonction réutilisable.

146
T.J. Crowder

Voici un plugin complet jquery basé sur la réponse de @ T.J. Tu peux appeler

$('form#myForm').awesomeFormSerializer({
    foo: 'bar',
})

Qui remplacera ou ajoutera le paramètre 'foo' avec la valeur 'bar' (ou tout autre paramètre que vous ajouterez dans l'objet)

plugin jQuery:

// Not builtin http://stackoverflow.com/a/5075798/2832282
(function ( $ ) {
    // Pass an object of key/vals to override
    $.fn.awesomeFormSerializer = function(overrides) {
        // Get the parameters as an array
        var newParams = this.serializeArray();

        for(var key in overrides) {
            var newVal = overrides[key]
            // Find and replace `content` if there
            for (index = 0; index < newParams.length; ++index) {
                if (newParams[index].name == key) {
                    newParams[index].value = newVal;
                    break;
                }
            }

            // Add it if it wasn't there
            if (index >= newParams.length) {
                newParams.Push({
                    name: key,
                    value: newVal
                });
            }
        }

        // Convert to URL-encoded string
        return $.param(newParams);
    }
}( jQuery ));
4
Cyril Duchon-Doris

Avec la version JQuery maintenant. Vous pouvez utiliser celui-ci à la place pour éditer la valeur soumise actuelle (la plus courte)

var values = $("#frmblog").serializeArray();
values.find(input => input.name == 'content').value = content_val;
console.log(values);
0
Yanuarizal Kurnia