提交后如何在同一頁中顯示html表單值？

Question

可以給我一個例子，在提交按鈕后從輸入中提取數據並發送到同一頁面以輸出h2嗎？

這是我的輸入和提交按鈕。

<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>

使用此示例通過單擊將輸入的數據輸入提取到另一個輸入。

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

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

該代碼的目的是將其引入ajax的complete function中。

$(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
      }
    });
  });
});

這是我最終的html標簽，用於顯示結果。

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

感謝幫助！！

Answer 1

如果要使用帶有“提交”按鈕的表單，則需要使用表單的“ submit操作，並避免使用默認設置。

 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>