Trasformare i dati di un form in JSON con jQuery

Mattepuffo's logo
Trasformare i dati di un form in JSON con jQuery

Trasformare i dati di un form in JSON con jQuery

Programmazione, Javascript - AJAX

jQuery ha la comoda funzione serializeArray che permette appunto di serializzare una serie dati.

Oggi vediamo come usarla per serializzare un form, e poi trasformarli in formato JSON.

Per fare tutto questo invieremo il form tramite jQuery:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>TEST</title>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"
                integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
        </script>
        <script>
            $(document).ready(function () {
                let form = $("#frm");
                form.submit(function (event) {
                    var json = JSON.stringify(form.serializeArray());
                    console.log(json);
                    event.preventDefault();
                });
            });
        </script>
    </head>
    <body>
        <form method="post" id="frm" action="test.php">
            <input type="text" value="CIAO" name="txt">
            <br>
            <button type="submit" name="btn">Invia</button>
        </form>
    </body>
</html>

Inviate il form e guardate la console.

Enjoy!

Condividi

Commentami!