web-dev-qa-db-fra.com

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

J'ai un formulaire de recherche avec un certain nombre d'entrées de texte et de listes déroulantes qui est envoyé via un outil GET. J'aimerais avoir 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?

javascriptjqueryformsserializationinput
104
Tom Viner

J'ai regardé jQuery docs et je pense que nous pouvons le faire en une seule ligne avec sélecteurs :

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

Évidemment, #myForm obtient l'élément avec l'id "myForm", mais ce qui m'était moins évident au début était que le caractère d'espace est nécessaire entre #myForm et: comme c'est l'opérateur descendant .

: input correspond à tous les éléments input, textarea, select et button.

[valeur! = ''] est un attribut différent du filtre. La chose étrange (et utile) est que all: les types d’éléments 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, la juxtaposition, c'est-à-dire placer deux sélecteurs d'attributs l'un à côté de l'autre , implique un ET. tiliser une virgule implique un OU. Désolé si c'est évident pour les gens de CSS!

164
Tom Viner

Je ne pouvais pas obtenir la solution de Tom au travail (?), Mais je pouvais 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();
47
Rich

Cela fonctionne pour moi:

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

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
7
nickf

J'ai utilisé la solution ci-dessus mais pour moi ceux-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

3
Rajan Rawal

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

Je pourrais ajouter dans les fonctions "serialize2" et "serializeArray2". bien sûr, nommez-les quelque chose de méchant.

Ou bien, le meilleur moyen serait d'écrire quelque chose pour extraire les vars inutilisés de serializedFormStr. Quelques regex qui recherchent = & in mid string ou se terminant par = Des assistants regex autour?

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

1
BuddyJoe

Dans coffeescript, procédez comme suit:

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