Wie ändere ich serialisierte Formulardaten in jQuery?

80

Ich versuche, mein Formular in AJAX einzureichen, daher muss ich die Daten serialisieren (). Aber ich benutze fckEditorund jQuery weiß nicht, wie ich damit umgehen soll. Nach der Serialisierung versuche ich, den Wert manuell zu ändern, aber bisher kein Glück ... irgendwelche Ideen

if(content_val!=""){
    var values = $("#frmblog").serialize();
    values.content = content_val; //content_val is the manually fetched data which I am trying to insert into the serialized content.
    alert(content_val); alert(values);
}
Bluemagica
quelle
Warum fügst du es nicht vor der Serialisierung ein?
Adam Arold
Das Problem ist, dass während des Serilisierungsprozesses einige Standardwerte im 'Content'-Schlüssel festgelegt werden. Ich kann also nicht einfach einen neuen Wert anhängen, sondern muss den bereits darin
enthaltenen
Ah, das ändert die Dinge; siehe meine aktualisierte Antwort.
TJ Crowder

Antworten:

151

serializeGibt eine URL-codierte Zeichenfolge zurück, die die Formularfelder enthält. Wenn Sie daran anhängen müssen, verwenden Sie dazu die Standardregeln für URL-codierte Zeichenfolgen, z.

var values = $("#frmblog").serialize();
values += "&content=" + encodeURIComponent(content_val);

(Bei den obigen Angaben wird davon ausgegangen, dass valuesnach dem serializeAufruf immer ein Wert vorhanden ist . Wenn dies nicht unbedingt zutrifft, bestimmen Sie &anhand des Leerwerts, ob er verwendet werden valuessoll, bevor Sie ihn hinzufügen.)

Wenn Sie möchten, können Sie alternativ serializeArraydas Array verwenden und dann hinzufügen und jQuery.paramdas Ergebnis in eine Abfragezeichenfolge umwandeln. Dies scheint jedoch ein langer Weg zu sein:

// You can also do this, but it seems a long way 'round
var values = $("#frmblog").serializeArray();
values.push({
    name: "content",
    value: content_val
});
values = jQuery.param(values);

Update : In einem später hinzugefügten Kommentar sagten Sie:

Das Problem ist, dass während des Serilisierungsprozesses einige Standardwerte im 'Content'-Schlüssel festgelegt werden. Ich kann also nicht einfach einen neuen Wert anhängen, sondern muss den bereits darin enthaltenen aktualisieren. "

Das ändert die Dinge. Es ist schwierig, contentin der URL-codierten Zeichenfolge zu suchen , daher würde ich mich für das Array entscheiden:

var values, index;

// Get the parameters as an array
values = $("#frmblog").serializeArray();

// Find and replace `content` if there
for (index = 0; index < values.length; ++index) {
    if (values[index].name == "content") {
        values[index].value = content_val;
        break;
    }
}

// Add it if it wasn't there
if (index >= values.length) {
    values.push({
        name: "content",
        value: content_val
    });
}

// Convert to URL-encoded string
values = jQuery.param(values);

Sie möchten dies wahrscheinlich zu einer wiederverwendbaren Funktion machen.

TJ Crowder
quelle
4

Hier ist ein vollständiges JQuery-Plugin, das auf der Antwort von @ TJ basiert. Du kannst anrufen

$('form#myForm').awesomeFormSerializer({
    foo: 'bar',
})

Dadurch wird der Parameter 'foo' durch den Wert 'bar' (oder einen anderen Parameter, den Sie dem Objekt hinzufügen) ersetzt oder hinzugefügt.

jQuery-Plugin:

// Not builtin http://stackoverflow.com/a/5075798/2832282
(function ( $ ) {
    // Pass an object of key/vals to override
    $.fn.awesomeFormSerializer = function(overrides) {
        // Get the parameters as an array
        var newParams = this.serializeArray();

        for(var key in overrides) {
            var newVal = overrides[key]
            // Find and replace `content` if there
            for (index = 0; index < newParams.length; ++index) {
                if (newParams[index].name == key) {
                    newParams[index].value = newVal;
                    break;
                }
            }

            // Add it if it wasn't there
            if (index >= newParams.length) {
                newParams.push({
                    name: key,
                    value: newVal
                });
            }
        }

        // Convert to URL-encoded string
        return $.param(newParams);
    }
}( jQuery ));
Cyril Duchon-Doris
quelle
2

Jetzt mit ES15. Sie können diesen stattdessen zum Bearbeiten des aktuell übermittelten Werts verwenden (der kürzeste).

var values = $("#frmblog").serializeArray();
values.find(input => input.name == 'content').value = content_val;
console.log(values);

oder native Funktion

var values = $("#frmblog").serializeArray();
values.find(function(input) { 
    return input.name == 'content';
}).value = content_val;
console.log(values);
Yanuarizal Kurnia
quelle
0

Verwenden Sie die folgende Funktion, die bei mir funktioniert hat

function(elementName,newVal)
{
    var postData = $("#formID").serialize();

var res = postData.split("&");
var str = "";

for(i=0;i<res.length;i++)
  {
    if(elementName == res[i].split("=")[0])
      {
        str += elementName + "=" + newVal+ "&";
      }
      else
      {
        str += res[i] + "&";
      }
  }
return str;
}
Malek Tubaisaht
quelle