web-dev-qa-db-fra.com

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 les 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 pourrait 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?

jqueryform-submit
26
Dave Orr

Une solution consiste à définir l'attribut "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é

38
Luke Dennis

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.

17
ReggieB

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'ajouter une propriété name à tous vos éléments enfants de formulaire si vous souhaitez qu'ils soient sérialisés ;

Le HTML:

<form action="yourUrl.php" name="myForm" id="myForm">
input1: <input type="text" name="field1" /><br /><br />
input2: <input type="text" name="field2" /><br /><br />
input3: <input type="text" name="field3" /><br /><br />
input4: <input type="text" name="field4" /><br /><br />
select: <select name="selectField">
    <option value="">empty value</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
</select><br /><br />
<input type="submit" name="submit" value="submit" />
</form>

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
    });
});
5
Ady Ngom

La réponse la plus votée n'a pas fonctionné pour moi. Je pense que les sélecteurs n’étaient pas assez précis. 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
  });
});

1
Ken Brockert

Suppression des 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:

0
Bob Stein

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 attribute 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'attribut name pour que la prochaine soumission fonctionne correctement ...

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