DaniloCeesar/html-form-to-json.html

## 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/jquery-serializejson@3.2.1/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/jquery-serializejson@3.2.1/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>