How to display html form values in same page after submit?

Question

could give me an example to extract data from input after submit button and send in same page to output h2?

This my input and submit button.

<div class="input-field col s6">
  <i class="material-icons prefix">perm_identity</i>
  <input placeholder="..." id="nameClient" name="nameClient" type="text" class="validate">
  <label for="nameClient">Nome do cliente:</label>
</div>

<button class="btn waves-effect waves-light indigo" id="publish-sell" type="submit"><i class="material-icons left">attach_money</i>EFETUAR VENDA</button>

Was using this example to extract the typed data input to another input by means of a click.

$("#copyMapResearch").click(function () {
  var endereco = $("#addressDeliveryClient").val();
  $("#pac-input").val(endereco);
});

$("#copyToForm").click(function () {
  var endereco = $("#pac-input").val();
  $("#addressProvider").val(endereco);
});

The purpose of this code is to introduce it into a complete function of ajax.

$(document).ready(function () {
  $('#draft-sell').click(function () {
    var payload = {
      nameClient: $('#nameClient').val(),
      nameFantasySell: $('#nameFantasySell').val(),
      addresOfClientSell: $('#addresOfClientSell').val(),
      annotations: $('#annotations').val(),
      neighborhood: $('#neighborhood').val(),
      cep: $('#cep').val(),
      phoneLandline: $('#phoneLandline').val(),
      cellphone: $('#cellphone').val(),
      autocompleteBusinessReseller: $('#autocompleteBusinessReseller').val(),
      amountProduct: $('#amountProduct').val(),
      productSoldSell: $('#productSoldSell').val(),
      producFinalPrice: $('#producFinalPrice').val(),
      registeredDaySell: $('#registeredDaySell').val()
    };
    $.ajax({
      url: "/product/sell-draft",
      type: "POST",
      contentType: "application/json",
      processData: false,
      data: JSON.stringify(payload),
      complete: function (data) {
        // here is the place of the code that will extract the data from the data entered in the input and write in front-end
      }
    });
  });
});

This my final html tag to display results.

<h2 class="left-align white-text person-name" id="nameClientReciept">

Thanks for help!!

Answer 1

If you want to use a form with submit button, then you need to use the submit action of the form, and prevent the default.

 let form = document.querySelector('form'); let nameClinet = document.querySelector('#nameClient'); let output = document.querySelector('#output'); form.onsubmit = function(e){ e.preventDefault(); // stop the submit from actually happening console.log("Client Name:", nameClient.value); output.innerText = nameClient.value; } 

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/> <form> <div class="input-field col s6"> <i class="material-icons prefix">perm_identity</i> <input placeholder="..." id="nameClient" name="nameClient" type="text" class="validate"> <label for="nameClient">Nome do cliente:</label> <h2 id="output"></h2> </div> <button class="btn waves-effect waves-light indigo" id="publish-sell" type="submit"> <i class="material-icons left">attach_money</i>EFETUAR VENDA </button> </form>