DaniloCeesar · June 22, 2022 00:28
diff --git a/html-form-to-json.html b/html-form-to-json.html
 <!doctype html>
 <html lang="pt-BR">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Exemplo de exportação para JSON a partir de formulário eletrônico, usando a biblioteca jquery.serializeJSON">
    <title>Formulário eletrônico</title>
 </head>
 <body>

    <!-- Define o `id` do formulário eletrônico, e o método HTTP POST; atribui um atributo `name` para cada campo do formulário -->
    <form id="formulario" method="POST">
        <input type="text" name="titulo" value="Dune"/>
        <input type="text" name="autor[nome]" value="Frank Herbert"/>
        <input type="text" name="autor[periodo]" value="1945–1986"/>

        <button id="btn-enviar" type="button">Enviar dados</button>
    </form>

    <!-- Importa as dependências -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.serializejson.min.js" integrity="sha256-IfgV2KWiEgB7xvdglzXFAPS6YIFJsZVdea1U7JLD49w=" crossorigin="anonymous"></script>     
    
    <!-- Exporta os valores para o Console do browser -->
    <script type="text/javascript">
        $('#btn-enviar').on('click', function(e) { // Ao clicar no botão "Enviar dados"
            e.preventDefault();

            let formularioJSON = $('#formulario').serializeJSON(); // Transforma os campos em um único Object JSON
            console.log( formularioJSON ); // Imprime os valores no Console
        });
    </script>

 </body>
 </html>
	<!doctype html>
	<html lang="pt-BR">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="Exemplo de exportação para JSON a partir de formulário eletrônico, usando a biblioteca jquery.serializeJSON">
	<title>Formulário eletrônico</title>
	</head>
	<body>

	<!-- Define o `id` do formulário eletrônico, e o método HTTP POST; atribui um atributo `name` para cada campo do formulário -->
	<form id="formulario" method="POST">
	<input type="text" name="titulo" value="Dune"/>
	<input type="text" name="autor[nome]" value="Frank Herbert"/>
	<input type="text" name="autor[periodo]" value="1945–1986"/>

	<button id="btn-enviar" type="button">Enviar dados</button>
	</form>

	<!-- Importa as dependências -->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.serializejson.min.js" integrity="sha256-IfgV2KWiEgB7xvdglzXFAPS6YIFJsZVdea1U7JLD49w=" crossorigin="anonymous"></script>

	<!-- Exporta os valores para o Console do browser -->
	<script type="text/javascript">
	$('#btn-enviar').on('click', function(e) { // Ao clicar no botão "Enviar dados"
	e.preventDefault();

	let formularioJSON = $('#formulario').serializeJSON(); // Transforma os campos em um único Object JSON
	console.log( formularioJSON ); // Imprime os valores no Console
	});
	</script>

	</body>
	</html>