jquery: comment supprimer les champs vides d’un formulaire avant de le soumettre?

J’ai une page avec un ensemble de formulaires, utilisée pour les tests d’API. Pour des raisons qui ne méritent pas d’être expliquées, je ne souhaite généralement pas inclure de champs vides dans l’envoi au serveur. Comment puis-je supprimer des champs vides des données avant de les soumettre?

Par exemple, si j’ai un formulaire avec deux champs, foo et bar et que l’utilisateur laisse barre vide, je souhaite que le serveur voie la soumission comme si le seul champ était foo.

Ma première tentative a consisté à faire une boucle dans les champs en utilisant jquery avec

$("form").submit(function() { $(this).children(':input').each(...) }

Et enlever le champ. Mais cela a) n’a pas fonctionné, et b) semble supprimer le champ de la forme visible sur la page, ce qui n’est pas ce que je veux.

Une autre approche peut consister à parcourir les champs et à construire manuellement la chaîne d’envoi avec des champs ayant des valeurs autres que “”. Ça marchera? De meilleures idées?

Une solution consiste à définir l’atsortingbut “disabled” sur ces champs, ce qui empêche la sérialisation de leurs valeurs et leur envoi au serveur:

 $(function() { $("form").submit(function() { $(this).children(':input[value=""]').attr("disabled", "disabled"); return true; // ensure form still submits }); });

Si vous avez une validation côté client, vous voudrez également réactiver ces champs en cas d’échec de la validation:

 $(':input').removeAttr("disabled");

EDIT: bug réparé

En combinant les réponses ici, avec cette question concernant la recherche d’une entrée vide, je suis arrivé à cette solution.

 $(function() { $("form").submit(function() { $(this).find(":input").filter(function(){ return !this.value; }).attr("disabled", "disabled"); return true; // ensure form still submits }); });

Ainsi commence la solution de form @ Luke, ajoute sa suggestion d’utiliser find au lieu d’enfants (ma forme est dans un tableau), puis utilise la technique de filtrage de @ gdoron pour isoler les éléments vides.

Je suis généralement d’accord avec @Luke, mais la solution ci-dessous devrait prendre en compte toute valeur vide, qu’il s’agisse ou non d’une balise input. Rappelez-vous simplement d’append une propriété name à tous vos éléments enfants de formulaire si vous souhaitez qu’ils soient sérialisés. ;

Le HTML:

  input1: 

 input2: 

 input3: 

 input4: 

 select:

Le jQuery:

 $("#myForm").submit (function (e) { e.preventDefault(); var _form = $(this); var data = {}; var formData = _form.serializeArray(); $.each(formData, function (index, value) { var data_name = formData[index].name; var data_value = formData[index].value; if (data_value !== "") { data[data_name] = data_value; } }); // now with ajax you can send the sanitize data object $.post(_form.attr("action"), data, function(res, textStatus, jqXHR) { // do something }); });

La réponse la plus votée n’a pas fonctionné pour moi. Je crois que les sélecteurs n’étaient pas assez spécifiques. Voici ce qui a fonctionné pour moi:

 $(function() { $("#myForm").submit(function() { $("#myForm *").filter(":input").each(function(){ if ($(this).val() == '') $(this).prop("disabled", true); }); return true; // ensure form still submits }); });

Peut-être pas la meilleure solution mais cela devrait être un moyen rapide et facile de réaliser ce que vous recherchez

 $("form").submit(function() { $(this).children('input[value=""]').each(function(){ // Rename the name atsortingbute to something else if the value is "" to it isn't submitted $(this).attr('blank', $(this).attr('name')); $(this).removeAttr('name'); }); }

Ensuite, si vous utilisez la validation côté vlient ou si vous publiez via ajax, vous devez redéfinir l’atsortingbut name pour que la prochaine soumission fonctionne correctement …

 $(this).attr('name', $(this).attr('blank')); $(this).removeAttr('blank');

Supprimer les champs vides lors de l’envoi

 $(function() { $('form').submit(function () { var $empty_fields = $(this).find(':input').filter(function () { return $(this).val() === ''; }); $empty_fields.prop('disabled', true); return true; }); });

Combinant plusieurs fonctionnalités et styles subjectifs, notamment:

.find() va plus loin que .children() .
.val() === '' fonctionne pour textarea et les atsortingbuts modifiés , [value=""] ne fonctionne pas.
.prop() sur .attr() .