JSFiddle - React, Tailwind, and code Playground
HTML
<form action="form1" class="form">
<input type="text" name="nome" placeholder="Nome">
<input type="text" name="email" placeholder="E-mail">
<button>Enviar</button>
</form>
<form action="form1" class="form">
<input type="text" name="logradouro" placeholder="Logradouro">
<input type="text" name="estado" placeholder="Estado">
<input type="text" name="cidade" placeholder="Cidade">
<button>Enviar</button>
</form>
<form action="form1" class="form">
<input type="password" name="senha" placeholder="Senha atual">
<input type="password" name="novasenha" placeholder="Nova senha">
<input type="password" name="novasenha-checagem" placeholder="Nova senha denovo">
<button>Enviar</button>
</form>
<div class="simulador">
<h1>Simulando envio de form:</h1>
<span></span>
</div>
CSS
/*
O CSS não é necessário,
apenas usei pra estilizar o exemplo.
*/
.form {
width:200px;
padding:10px;
border:1px solid #ccc;
margin-bottom:10px;
text-align:right;
}
.form input {
display:block;
width:97%;
}
.simulador {
position:absolute;
right:10px;
top:10px;
background:#eee;
padding:10px;
min-width:100px;
}
JavaScript
function enviaForm(seletor) {
var form = $(seletor),
campos = new Object();
form.on('submit', function (e) {
//bloqueia o envio do form, para tratarmos dele aqui dentro
e.preventDefault();
//recolhe todos os inputs, desde que não sejam do tipo submit
$(this).children('input:not([type="submit"])').each(function (i, el) {
campos[el.name] = el.value;
});
//Com os dados todos computados, você faria o AJAX aqui
$('.simulador span').html(JSON.stringify(campos));
//limpa o objeto campos para rodar novamente caso necessário
campos = new Object();
});
}
//exemplo de como se chamaria a função
enviaForm('.form');