Comment utiliser le fichier form.serialize de jQuery mais exclure les champs vides

StackOverflow https://stackoverflow.com/questions/608730

Question

J'ai un formulaire de recherche avec plusieurs entrées de texte & amp; listes déroulantes envoyées via un GET. J'aimerais une URL de recherche plus propre en supprimant les champs vides de la chaîne de requête lorsqu'une recherche est effectuée. 

var form = $("form");  
var serializedFormStr = form.serialize();  
// I'd like to remove inputs where value is '' or '.' here
window.location.href = '/search?' + serializedFormStr

Avez-vous une idée de comment faire cela avec jQuery?

Était-ce utile?

La solution

J'ai consulté la documentation jQuery et je pense que nous pouvons le faire en une seule ligne avec < a href = "http://docs.jquery.com/Selectors" rel = "noreferrer"> sélecteurs : 

$("#myForm :input[value!='']").serialize() // does the job!

De toute évidence, #myForm obtient l'élément portant l'identifiant "myForm". mais ce qui était moins évident pour moi au début, c’est que le caractère d'espacement est nécessaire entre #myForm et: input, car il s'agit du descendant , opérateur.

: input correspond à toutes les entrées, textarea, select et button éléments.

[value! = ''] est un attribut non filtre égal. Ce qui est étrange (et utile), c’est que les types d’éléments all: input ont des attributs de valeur, même les sélections et les cases à cocher, etc.

.

Enfin, supprimez également les entrées pour lesquelles la valeur était '.' (comme mentionné dans la question): 

$("#myForm :input[value!=''][value!='.']").serialize()

Dans ce cas, juxtaposition, c'est-à-dire placer deux sélecteurs d'attribut l'un à côté de l'autre , implique un ET . L'utilisation d'une virgule implique un OU. Désolé si cela est évident pour les utilisateurs de CSS!

Autres conseils

Je n’ai pas réussi à faire fonctionner la solution de Tom (?), mais j’ai pu le faire en utilisant .filter () avec une courte fonction pour identifier les champs vides. J'utilise jQuery 2.1.1. 

var formData = $("#formid :input")
    .filter(function(index, element) {
        return $(element).val() != '';
    })
    .serialize();

Cela fonctionne pour moi: 

data = $( "#my_form input").filter(function () {
        return !!this.value;
    }).serialize();

Vous pouvez le faire avec une regex ... 

var orig = $('#myForm').serialize();
var withoutEmpties = orig.replace(/[^&]+=\.?(?:&|$)/g, '')

Cas de test: 

orig = "a=&b=.&c=&d=.&e=";
new => ""

orig = "a=&b=bbb&c=.&d=ddd&e=";
new => "b=bbb&d=ddd&"  // dunno if that trailing & is a problem or not

J'ai utilisé la solution ci-dessus, mais pour moi, celles-ci n'ont pas fonctionné. J'ai donc utilisé le code suivant 

$('#searchform').submit(function(){

            var serializedData = $(this).serializeArray();
            var query_str = '';

            $.each(serializedData, function(i,data){
                if($.trim(data['value'])){
                    query_str += (query_str == '') ? '?' + data['name'] + '=' + data['value'] : '&' + data['name'] + '=' + data['value'];
                }
            });
            console.log(query_str);
            return false;
        });

Peut être utile pour quelqu'un

Je regarderais le code source de jQuery. Dans la dernière version, ligne 3287.

J'ajouterais peut-être un " serialize2 " et " serializeArray2 " les fonctions. bien sûr, nommez-les quelque chose de méchant.

Ou le meilleur moyen serait d'écrire quelque chose pour extraire les vars inutilisés du serializedFormStr. Quelques regex qui recherchent = & amp; en milieu de chaîne ou se terminant par = Des magiciens de regex autour?

UPDATE: J'aime mieux la réponse de rogeriopvl (+1) ... surtout que je ne trouve aucun bon outil regex pour le moment.

Dans coffeescript, procédez comme suit: 

serialized_form = $(_.filter($(context).find("form.params input"), (x) -> $(x).val() != '')).serialize()

Vous voudrez peut-être examiner la fonction .each () jquery, qui vous permet de parcourir tous les éléments d'un sélecteur. Vous pourrez ainsi vérifier chaque champ de saisie et voir s'il est vide ou non, puis le supprimer. depuis le formulaire en utilisant element.remove (). Après cela, vous pouvez sérialiser le formulaire.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top