Comment utiliser le 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 se soumettent via un GET. Je voudrais 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

Une idée de comment je peux faire cela en utilisant jQuery?

J'ai regardé les documents jQuery et je pense que nous pouvons le faire en une seule ligne à l'aide de sélecteurs :

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

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

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

[value! = ''] est un attribut différent de filtre. La chose étrange (et utile) est que tout: les types d'élément d' entrée ont des attributs de valeur même des sélections et des cases à cocher, etc.

Enfin pour supprimer également les entrées où 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. L'utilisation d'une virgule implique un OU. Désolé si c'est évident pour les gens de CSS!

Je n'ai pas pu faire fonctionner la solution de Tom (?), Mais j'ai pu le faire en utilisant .filter()une fonction courte 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, cela n'a 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 ligne de version 3287.

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

Ou le meilleur moyen serait d'écrire quelque chose pour extraire les variables inutilisées de serializedFormStr. Une expression régulière qui recherche = & au milieu de la chaîne ou se terminant par = Des assistants d'expression régulière?

MISE À JOUR: J'aime mieux la réponse de rogeriopvl (+1) ... d'autant plus que je ne trouve pas de bons outils de regex pour le moment.

Une alternative à la solution de Rich :

$('#form').submit(function (e) {
  e.preventDefault();

  var query = $(this).serializeArray().filter(function (i) {
    return i.value;
  });

   window.location.href = $(this).attr('action') + (query ? '?' + $.param(query) : '');
});

Explications:

• .submit()s'accroche à l' submitévénement du formulaire
• e.preventDefault() empêche le formulaire de se soumettre
• .serializeArray() nous donne une représentation sous forme de tableau de la chaîne de requête qui allait être envoyée.
• .filter() supprime les valeurs fausses (y compris vides) dans ce tableau.
• $.param(query) crée une représentation sérialisée et conforme à l'URL de notre tableau mis à jour
• définition d'une valeur pour window.location.hrefenvoyer la demande

Dans coffeescript, procédez comme suit:

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

Vous voudrez peut-être regarder la fonction jquery .each (), qui vous permet de parcourir chaque élément d'un sélecteur, de cette façon, vous pouvez vérifier chaque champ de saisie et voir s'il est vide ou non, puis le supprimer du formulaire en utilisant element.remove (). Après cela, vous pouvez sérialiser le formulaire.