Formular Serializer native JS

[Email]

siehe Thema. Also nicht jQuery. Gibts das mittlerweile?

MFG

[Felix Riesterer]

Lieber Email,

siehe Thema.

bin nicht sicher, ob ich Dein knappest formuliertes Anliegen überhaupt richtig verstanden habe, aber suchst Du vielleicht FormData()?

Liebe Grüße

Felix Riesterer

[Email]

siehe Thema.

bin nicht sicher, ob ich Dein knappest formuliertes Anliegen überhaupt richtig verstanden habe,

Ja hast Du, danke Dir ;)

aber suchst Du vielleicht FormData()?

Nein. Ich habe vergessen den Enctype application/x-www-form-urlencoded zu nennen.

MFG

[1unitedpower]

aber suchst Du vielleicht FormData()?

Nein. Ich habe vergessen den Enctype application/x-www-form-urlencoded zu nennen.

Dann suchst du vielleicht URLSearchParams.

[Email]

aber suchst Du vielleicht FormData()?

Nein. Ich habe vergessen den Enctype application/x-www-form-urlencoded zu nennen.

Dann suchst du vielleicht URLSearchParams.

Nein.

[1unitedpower]

aber suchst Du vielleicht FormData()?

Nein. Ich habe vergessen den Enctype application/x-www-form-urlencoded zu nennen.

Dann suchst du vielleicht URLSearchParams.

Mit FormData kannst du eine Liste von Schlüssel-Werte-Paaren aus einem Formular erstellen.

Mit URLSearchParams kannst du eine solche Liste zu application/x-www-form-urlencoded kodieren.

Wenn du beides kombinierst, kannst du damit ein Formular so kodieren, wie du es möchtest:

function encode (form) {
  return new URLSearchParams(new FormData(form)).toString()
}

[Tabellenkalk]

Hallo,

wie du es möchtest:

Vielleicht kann Email ja nochmal versuchen, zu formulieren, was er möchte. Gerne auch in ganzen Sätzen. Bisher wissen wir nur „Formular Serializer native JS“

Gruß
Kalk

[Email]

aber suchst Du vielleicht FormData()?

Nein. Ich habe vergessen den Enctype application/x-www-form-urlencoded zu nennen.

Dann suchst du vielleicht URLSearchParams.

Mit FormData kannst du eine Liste von Schlüssel-Werte-Paaren aus einem Formular erstellen.

Mit URLSearchParams kannst du eine solche Liste zu application/x-www-form-urlencoded kodieren.

Wenn du beides kombinierst, kannst du damit ein Formular so kodieren, wie du es möchtest:

function encode (form) {
  return new URLSearchParams(new FormData(form)).toString()
}

Das liefert leider nicht den gewünschten Enctype.

MFG

[1unitedpower]

Das liefert leider nicht den gewünschten Enctype.

><((((*>

[Email]

moin,

function encode (form) {
  return new URLSearchParams(new FormData(form)).toString()
}

Das liefert leider nicht den gewünschten Enctype.

Nun, eine Lösung die funktioniert habe ich hier mal festgehalten (mit Demo).

MFG

[dedlfix]

Tach!

function encode (form) {
  return new URLSearchParams(new FormData(form)).toString()
}

Das liefert leider nicht den gewünschten Enctype.

Nun, eine Lösung die funktioniert habe ich hier mal festgehalten (mit Demo).

// multipart/form-data
var fdata = new FormData(form);
var q = new URLSearchParams();
for (const [key, val]  of fdata.entries()) {
    q.append( key, val );
}
// application/x-www-form-urlencoded
xhr.send( q.toString() );

Wenn die obige nicht richtig sein soll, die untere aber schon, wo ist da jetzt der Unterschied, außer dass du unnötigerweise die Daten mit For-Schleife an URLSearchParams übergibst, statt dem Konstruktor die Arbeit zu überlassen?

dedlfix.

[Email]

aber suchst Du vielleicht FormData()?

Nein. Ich habe vergessen den Enctype application/x-www-form-urlencoded zu nennen.

Dann suchst du vielleicht URLSearchParams.

Mit FormData kannst du eine Liste von Schlüssel-Werte-Paaren aus einem Formular erstellen.

Ja, schau mal: Eine FormData-Instanz kapselt die Daten eines Formulars im Enctype multipart/form-data. Wenn Du Schlüssel-Werte haben willst, dann geht das z.B. so:

    var fd = new FormData( document.forms[0] );
    for (const [key, value]  of fd.entries()) {
        console.log(key, " => " ,value);
    }

Das hab ich gerade eben getestet aber das war nicht meine Frage. Wenn Du das an URLSearchParams übergeben willst, müsstest Du noch die Funktion encodeURIComponent() auf die Werte anwenden.

Auch getestet:

    var fd = new FormData( document.forms[0] );
    var params = [];
    var q = new URLSearchParams();
    for (const [key, value]  of fd.entries()) {
        var hunt = { key: encodeURIComponent(value) };
        params.push(hunt);
        q.append( key, encodeURIComponent(value) )
    }

    console.log(q.toString()); // JSON.stringify(params, false, 1) );

MFG

[1unitedpower]

Wenn Du das an URLSearchParams übergeben willst, müsstest Du noch die Funktion encodeURIComponent() auf die Werte anwenden.

Nein, das wäre sogar falsch, so hättest du die Werte doppelt kodiert. URLSearchParams.prototype.toString kümmert sich schon um die Kodierung.

[Raketenwissenschaftler]

• JSON.stringify
• falls Dir das nicht reicht
• encodeURIComponent

[Email]

Meine Frage ist, anders formuliert, ob es mittlerweile in native JS eine (builtin) Alternative gibt zu jQuery(form).serialize(). Und das legt auch den Enctype fest auf application/x-www-form-urlencoded. Das ist der Default Enctype, der beim Senden von Formularen verwendet wird.

MFG