wake-up-neo.com

jquery: Wie entferne ich leere Felder vor dem Absenden aus einem Formular?

Ich habe eine Seite mit einer Reihe von Formularen, die für API-Tests verwendet werden. Aus Gründen, die nicht näher erläutert werden sollen, möchte ich generell keine leeren Felder in die Übermittlung an den Server einschließen. Wie lösche ich leere Felder vor dem Absenden aus den Daten?

Wenn ich beispielsweise ein Formular mit zwei Feldern, foo und bar, habe und der Benutzer das Feld leer lässt, möchte ich, dass der Server die Übermittlung sieht, als ob das einzige Feld foo wäre.

Mein erster Versuch bestand darin, mit jquery durch die Felder zu schleifen

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

Und das Feld entfernen. Aber a) hat nicht funktioniert, und b) scheint das Feld aus dem sichtbaren Formular auf der Seite zu löschen, was ich nicht möchte.

Ein anderer Ansatz könnte darin bestehen, die Felder zu durchlaufen und die Übergabezeichenfolge manuell mit Feldern zu erstellen, die andere Werte als "" haben. Wird es funktionieren? Irgendwelche besseren Ideen?

26
Dave Orr

Eine Möglichkeit wäre, das Attribut "disabled" für diese Felder festzulegen, um zu verhindern, dass ihre Werte serialisiert und an den Server gesendet werden:

$(function()
{
    $("form").submit(function()
    {
        $(this).children(':input[value=""]').attr("disabled", "disabled");

        return true; // ensure form still submits
    });
});

Wenn Sie über eine clientseitige Validierung verfügen, möchten Sie diese Felder auch im Falle eines Validierungsfehlers erneut aktivieren:

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

BEARBEITEN: Fehler behoben

38
Luke Dennis

Durch die Kombination der Antworten mit diese Frage nach der Suche nach leeren Eingaben bin ich zu dieser Lösung gekommen.

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

Also fängt form @ Luke's Lösung an, fügt seinen Vorschlag hinzu, find anstelle von children zu verwenden (mein Formular befindet sich in einer Tabelle) und verwendet dann @ gdorons Filtertechnik, um die leeren Elemente zu isolieren.

17
ReggieB

Im Allgemeinen stimme ich @Luke nur zu, aber die Lösung unten sollte für jeden leeren Wert sorgen, unabhängig davon, ob es sich um ein Eingabe-Tag handelt oder nicht. Denken Sie daran, eine Namenseigenschaft für alle untergeordneten Formularelemente hinzuzufügen, wenn sie serialisiert werden sollen ;

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

Die 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

Die am besten gewählte Antwort funktionierte nicht für mich. Ich glaube, die Selektoren waren nicht spezifisch genug. Folgendes hat für mich funktioniert:

$(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

Leere Felder werden beim Senden entfernt

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

Verschiedene Funktionen und subjektive Stile kombinieren, insbesondere:

0
Bob Stein

Vielleicht nicht die beste Lösung, aber dies sollte ein schneller und einfacher Weg sein, um zu erreichen, was Sie suchen

$("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');

    });
}

Wenn Sie dann die vlient-seitige Validierung verwenden oder über ajax posten, müssen Sie das Namensattribut zurücksetzen, damit die nächste Übergabe richtig funktioniert ...

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