Löschen Sie leere Werte aus Formular-Params vor dem Senden

Question

Ich habe einige Javascript, die Änderungen an einem Formular abfängt, dann ruft die regelmäßige Senden-Funktion des Formulars. Das Formular ist ein GET-Formular (für eine Suche) und ich habe viele leere Attribute in den Params durchlaufen. Was ich möchte, ist zu tun, alle leere Attribute zu löschen, bevor die Einreichung, um eine sauberere URL zu erhalten: zum Beispiel, wenn jemand das ‚Subjekt‘ auswählen, um ‚Englisch‘ ich will ihre Suche url

http://localhost:3000/quizzes?subject=English 

sein ändert

statt

http://localhost:3000/quizzes?term=&subject=English&topic=&age_group_id=&difficulty_id=&made_by=&order=&style= 

wie es im Moment ist. Dies ist nur rein zu dem Zweck, eine sauberere und sinnvollere URL zu haben, um mit und für die Lesezeichen der Leute usw. zu verknüpfen. Also, was ich brauche, ist etwas in dieser Richtung, aber das ist nicht richtig, da ich nicht die tatsächliche Form bearbeite aber ein js Objekt aus der Form des params gemacht:

quizSearchForm = jQuery("#searchForm"); 
    formParams = quizSearchForm.serializeArray(); 
    //remove any empty fields from the form params before submitting, for a cleaner url 
    //this won't work as we're not changing the form, just an object made from it. 
    for (i in formParams) { 
    if (formParams[i] === null || formParams[i] === "") { 
     delete formParams[i]; 
    } 
    } 
    //submit the form 

ich glaube, ich bin in der Nähe mit diesem, aber ich vermisse den Schritt, wie die tatsächlichen Form der Attribute zu bearbeiten, anstatt ein anderes Objekt zu machen und das bearbeiten.

dankbar für jeden Rat - max

EDIT - GELÖST - dank der vielen Menschen, die darüber geschrieben. Hier ist, was ich habe, was perfekt zu funktionieren scheint.

function submitSearchForm(){ 
    quizSearchForm = jQuery("#searchForm"); 
    //disable empty fields so they don't clutter up the url 
    quizSearchForm.find(':input[value=""]').attr('disabled', true); 
    quizSearchForm.submit(); 
} 

Answer 1

Die Eingaben mit dem Attribut disabled auf true werden nicht mit dem Formular gesendet. So in einer jQuery Linie:

$(':input[value=""]').attr('disabled', true); 

Answer 2

Sie können es auf diese Weise nicht tun, wenn Sie die submit-Methode des Formulars aufrufen; Dadurch wird das gesamte Formular übermittelt, nicht das Array, das jQuery für Sie erstellt hat.

Sie können die Formularfelder deaktivieren, die vor dem Senden des Formulars leer sind. deaktivierte Felder werden beim Senden des Formulars ausgelassen. Gehen Sie also durch die Elemente des Formulars und deaktivieren Sie für jedes leere Element die Methode submit im Formular. (Wenn das Ziel ein anderes Fenster ist, möchten Sie dann die Felder erneut aktivieren. Wenn das Ziel das aktuelle Fenster ist, ist es egal, die Seite wird trotzdem ersetzt.)

Answer 3

Nun ein, was man tun könnte, wäre, die leeren Eingänge vor deaktivieren „serializeArray“

$('#searchForm').find('input, textarea, select').each(function(_, inp) { 
    if ($(inp).val() === '' || $(inp).val() === null) 
    inp.disabled = true; 
    } 
}); 

Die „serializeArray()“ Routine die in ihrer Ergebnisse enthalten nicht aufrufen. Jetzt müssen Sie möglicherweise zurückgehen und diese erneut aktivieren, wenn der Formular-Post nicht zu einer vollständig aktualisierten Seite führt.

Answer 4

$('form#searchForm').submit(function() { 
    $(':input', this).each(function() { 
     this.disabled = !($(this).val()); 
    }); 
}); 

Answer 5

Ihr Problem hat mir geholfen, meine Situation herauszufinden, die ein bisschen anders ist - so vielleicht jemand anderes davon profitieren können. Anstatt direkt ein Formular zu senden, musste ich verhindern, dass leere Formularelemente in einem serialisierten Array gesammelt werden, das über AJAX gepostet wird. dann.

In meinem Fall habe ich einfach eine Schleife durch die Formelemente benötigt und alle deaktivieren, die leer waren, und dann, wie so die Reste in ein Array sammeln:

// Loop through empty fields and disable them to prevent inclusion in array 
$('#OptionB input, select').each(function(){ 
    if($(this).val()==''){ 
     $(this).attr('disabled', true); 
    } 
}); 

// Collect active fields into array to submit 
var updateData = $('#OptionB input, select').serializeArray(); 

Answer 6

Ein weiterer Ansatz ist immer empfehle ich zu tun dass auf Server-Seite, so sind Sie in der Lage:

1. Validate die Eingangsdaten korrekt
2. Set Standardwerte
3. ändern Eingabewerte, wenn n eeded
4. haben eine saubere URL oder eine freundliche URL wie "/ Quiz/Englisch/Level-1 /"

Andernfalls werden Sie mit Texteingabe wählen, Radio etc ...

zu tun haben

Answer 7

Vielleicht funktionierten einige der vorgeschlagenen Lösungen in dem Moment, in dem die Frage gestellt wurde (März 2010), aber heute, im August 2014, funktioniert die Lösung der Deaktivierung leerer Eingaben einfach nicht. Die deaktivierten Felder werden auch in meinem Google Chrome gesendet. Ich habe jedoch versucht, das "Name" -Attribut zu entfernen und es hat gut funktioniert!

$('form').submit(function(){ 
    $(this).find('input[name], select[name]').each(function(){ 
     if (!$(this).val()){ 
      $(this).removeAttr('name'); 
     } 
    }); 
}); 

Update: Ok, wahrscheinlich der Grund, weil Felder deaktivieren mir nicht funktionierte nicht, dass etwas seit 2010 geändert, aber noch nicht in meinem Google Chrome arbeiten. Ich weiß nicht, vielleicht ist es nur in der Linux-Version. Wie auch immer, ich denke, dass das Entfernen des Namens attr besser ist, da trotz der Richtlinien, die der Browser über deaktivierte Felder annimmt, es keine Möglichkeit gibt, die Parameter zu senden, wenn der Name attr fehlt. Ein weiterer Vorteil ist, dass normalerweise das Deaktivieren von Feldern einige Stiländerungen mit sich bringt, und es ist nicht schön, eine Formatänderung in der Form eine Sekunde vor dem endgültigen Einreichen des Formulars zu sehen. Es gibt auch einen Nachteil, wie Max Williams in den Kommentaren erwähnt, da der remove Name attr solution nicht umschaltbar ist. Hier ist ein Weg, um dieses Problem zu vermeiden:

$('form').submit(function(){ 
    $(this).find('input[name], select[name]').each(function(){ 
     if (!$(this).val()){ 
      $(this).data('name', $(this).attr('name')); 
      $(this).removeAttr('name'); 
     } 
    }); 
}); 

function recoverNames(){ 
    $(this).find('input[name], select[name]').each(function(){ 
     if ($(this).data('name')){ 
      $(this).attr('name', $(this).data('name')); 
     } 
    }); 
} 

Aber ich denke, das ist nicht ein sehr verbreiteter Fall, da wir die Form einreichen, so wird angenommen, dass es nicht notwendig ist, den fehlenden Namen attrs zu erholen.

Answer 8

Oder serialisiert, klar leeren Schlüssel-Wert-Paare mit regex und rufen window.location:

$("#form").submit(function(e){ 
    e.preventDefault(); 
    //convert form to query string, i.e. a=1&b=&c=, then cleanup with regex 
    var q = $(this).serialize().replace(/&?[\w\-\d_]+=&|&?[\w\-\d_]+=$/gi,""), 
    url = this.getAttribute('action')+ (q.length > 0 ? "?"+q : ""); 
    window.location.href = url; 
});