Email: Formular Serializer native JS

siehe Thema. Also nicht jQuery. Gibts das mittlerweile?

MFG

  1. 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

    1. problematische Seite

      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

      1. problematische Seite

        aber suchst Du vielleicht FormData()?

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

        Dann suchst du vielleicht URLSearchParams.

        1. problematische Seite

          aber suchst Du vielleicht FormData()?

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

          Dann suchst du vielleicht URLSearchParams.

          Nein.

          1. problematische Seite

            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()
            }
            
            1. problematische Seite

              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

            2. problematische Seite

              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

              1. problematische Seite

                Das liefert leider nicht den gewünschten Enctype.

                ><((((*>

              2. problematische Seite

                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

                1. problematische Seite

                  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.

            3. problematische Seite

              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

              1. problematische Seite

                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.

    1. 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