it-swarm.com.de

Wie verwende ich jQueries form.serialize, aber schließe leere Felder aus

Ich habe ein Suchformular mit einer Reihe von Texteingaben und Dropdowns, die über ein GET übermittelt werden. Ich möchte eine sauberere Such-URL, indem ich die leeren Felder aus der Abfragefolge entferne, wenn eine Suche durchgeführt wird.

var form = $("form");  
var serializedFormStr = form.serialize();  
// I'd like to remove inputs where value is '' or '.' here
window.location.href = '/search?' + serializedFormStr

Hast du eine Idee, wie ich das mit jQuery machen kann?

104
Tom Viner

Ich habe die jQuery docs durchgesehen und ich denke, wir können dies in einer Zeile mit Selektoren tun:

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

Offensichtlich bekommt #myForm das Element mit der ID "myForm", aber was mir anfangs weniger klar war, war, dass das Leerzeichen zwischen #myForm und: Eingabe wie es der Nachkomme Operator ist.

: input entspricht allen Eingabe-, Textarea-, Select- und Button-Elementen.

[value! = ''] ist ein Attribut ungleich filter. Das Seltsame (und Hilfreiche) ist, dass alle: Eingabe Elementtypen Wertattribute haben, sogar Auswahl- und Kontrollkästchen usw.

Schließlich, um auch Eingaben zu entfernen, bei denen der Wert '.' War (wie in der Frage erwähnt):

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

In diesem Fall impliziert ein Nebeneinander, dh Platzieren von zwei Attributselektoren nebeneinander , ein UND. mit einem Komma impliziert ein ODER. Sorry, wenn das für CSS-Leute offensichtlich ist!

164
Tom Viner

Ich konnte Toms Lösung nicht zum Laufen bringen (?), Aber ich konnte dies mit .filter() und einer kurzen Funktion zum Identifizieren leerer Felder tun. Ich verwende jQuery 2.1.1.

var formData = $("#formid :input")
    .filter(function(index, element) {
        return $(element).val() != '';
    })
    .serialize();
47
Rich

Das funktioniert bei mir:

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

Sie könnten es mit einem Regex tun ...

var orig = $('#myForm').serialize();
var withoutEmpties = orig.replace(/[^&]+=\.?(?:&|$)/g, '')

Testfälle:

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

Ich habe obige lösung benutzt aber bei mir hat das nicht funktioniert. Also habe ich folgenden Code verwendet

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

Kann für jemanden nützlich sein

3
Rajan Rawal

Ich würde mir den Quellcode für jQuery ansehen. In der neuesten Version Zeile 3287.

Ich könnte in einem "serialize2" und "serializeArray2" Funktionen hinzufügen. nenne sie natürlich etwas gemeines.

Oder der bessere Weg wäre, etwas zu schreiben, um die unbenutzten Vars aus der serializedFormStr zu ziehen. Ein Regex, der nach = & in der Mitte der Zeichenfolge sucht oder mit = endet. Gibt es Regex-Assistenten?

PDATE: rogeriopvls Antwort gefällt mir besser (+1) ... zumal ich momentan keine guten Regex-Tools finde.

1
BuddyJoe

Führen Sie in coffeescript Folgendes aus:

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