Simulador Cadastro

by MPrates

HTML

<table id='form1'>
  <label>
    <button class="back">Campo1:</button>
  </label>
  <input type='text' id='campo1' value='' />
  
   <label>
    <button class="back2">Campo2:</button>
  </label>
  <input type='text' id='campo2' value='' />
  
  
   <label>
    <button class="back3">Campo3:</button>
  </label>
  <input type='text' id='campo3' value='' />


  <button id="enviar">Enviar</button>
</table>
<br>
<hr />
<label>Campo1 oculto:</label>
<input id="oculto1" type="text" value="" />

<label>Campo2 oculto:</label>
<input id="oculto2" type="text" value="" /> 

<label>Campo3 oculto:</label>
<input id="oculto3" type="text" value="" />

CSS

input,
label {
  with: 100%;
  float: left;
  display: block;
}

label a {
  text-decoration: none;
  color: #000;
}

.back, .back2, .back3 {
  border: none;
  background: none;
  cursor: pointer;
}

JavaScript

$('#enviar').click(function() {
  var valorInput1 = $("#campo1").val();
  var valorInput2 = $("#campo2").val();
  var valorInput3 = $("#campo3").val();
  
  //Apois clicar em Enviar seta valores dos inputs nos ocultos
  $("#oculto1").val(valorInput1);
  $("#oculto2").val(valorInput2);
  $("#oculto3").val(valorInput3);
  
  //Apagar valores apos enviar
  $('#campo1, #campo2, #campo3').each(function() {
    $(this).val('');
  });
});

//Retorna dados do campo oculto para o campo do form ao clicar no label
$('.back').click(function() {
  var foo = $("#oculto1").val();
  $("#campo1").val(foo);
});

$('.back2').click(function() {
  var foo = $("#oculto1").val();
  var foo2 = $("#oculto2").val();
   $("#campo1").val(foo);
  $("#campo2").val(foo2);
});