Obtención de Datos de un Formulario con FormData interface

La interfaz formData se encarga de la creación de un set de pares key/value los cuales representaran los campos de el formulario y su valor. En pocas palabras es como una lista:

• Key1 – value1
• key2 – value2
• keyN – valueN

Esta podrá ser enviada a través de fetch, XMLHttpRequest.send(),navigator.sendBeacon(). En pocas palabras podremos pasarle como data este set de pares a nuestro axios, fetch, jquery.ajax o lo que estemos usando en una forma mas ordenada si se le puede decir, ademas que podemos obtener los nombes y valores de nuestro formulario de una forma fácil.

Obtener datos de un formulario

Bueno aquí vamos a lo que nos importa, como podríamos obtener la data de un formulario de forma rápida.

const formData = new FormData(FormElement);

veámoslo aplicado a un ejemplo: Para este ejemplo tomare el el formulario que hicimos para el login en php

necesitamos un poco de estilo CSS

<style>
      form{
          background-color:#d5d5d5;
          padding:10px 20px;
          width:600px;
          border-radius: 5px;
      }
      form .form_sector{
          margin-bottom: 5px;
      }
      form .form_label{
          display: inline-block;
          width:100px;
      }
      form .form_input{
          display: inline-block;
          width:450px;
      }
      form .form_submit{
          width:550px;
          text-align: right;
      }
      form .form_submit input{
          display: inline-block;
          width:150px;
      }
      input{
          width:100%;
      }
      .warning{
          width:550px;
          background-color:#ffe861;
          border-radius: 15px;
          padding: 10px;
      }
      .success{
          width:550px;
          background-color:#a2ffb9;
          border-radius: 15px;
          padding:10px;
      }
</style>

Para nuestro HTML podemos hacer lo siguiente:

<main>
            <form id="myform">
                <div><h2>Login</h2></div>
                <div class="form_sector">
                    <div class="form_label"><label for="name">Name:</label></div>
                    <div class="form_input"><input type="text" name="name" id="name" /></div>
                </div>
                <div class="form_sector">
                    <div class="form_label"><label for="password">Password:</label></div>
                    <div class="form_input"><input type="text" name="password" id="password" /></div>
                </div>
                <div class="form_sector">
                    <div class="form_submit"><input id type="submit" value="confirm"/></div>
                </div>
            </form>
 </main>

Nuestro javascript sera el siguiente

<script>
        let eform = document.getElementById("myform");
        eform.addEventListener("submit", (e) => {
            e.preventDefault();
            const formData = new FormData(eform);
            for (const value of formData.values()) {
                console.log(value);
            }
        });
</script>

como resultado obtendremos los valores que pusimos en el login en nuestra consola de inspección que tenga nuestro navegador:

JOSH
fwefwer3r3f

hemos obtenido los datos. Ahora puedes preguntarte y como recibo esto en PHP o otro lenguaje en el back-end? Pues Probémoslo.

Cambiemos nuestro script para utilizar jQuery.ajax para hacer las cosas un poco mas simple:

<script>
            let eform = document.getElementById("myform");
            eform.addEventListener("submit", (e) => {
            e.preventDefault();
            const formData = new FormData(eform);
            $.ajax({
                    method: "POST", //send method
                    url: "pdata.php", //URL 
                    data: formData, //data to be send
                    processData: false,
                    contentType: false
                })
                .done(function( msg ) {
                    $( "#resultado" ).append( msg );
                });
            });
</script>

para nuestro archivo php

<?php

echo "name: ".$_POST["name"]."<br/>";
echo "password: ".$_POST["password"];

FormData.append()

la interfaz formData tiene varios métodos los cuales podemos usar, pero el que nos interesa es append().

En caso de estar obteniendo datos de algo que no es un formulario podemos utilizar formData y utilizar append para agregar las key y los valores a formData, también en caso de que estemos tomando los datos de un formulario puede que queramos agregarle un dato y en ese caso podemos usar append también.

formData.append("name", "Jhonny");

Formdata también posee estos otros métodos si los desea ver :append(), delete(), entries(), get(), getAll(), has(), keys(), set() y values().