提交后如何在同一页面中显示html表单值？答案

【问题标题】：How to display html form values in same page after submit?提交后如何在同一页面中显示html表单值？
【发布时间】：2018-03-12 07:08:36
【问题描述】：

能否举个例子，在提交按钮后从输入中提取数据并在同一页面中发送到输出 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">

感谢您的帮助！

【问题讨论】：

提交后打开一个新页面！
@ivan.rosina 我希望通过脚本将结果显示在页面本身上，将发送的信息写入一个h2
我明白，但在这种情况下，您首先必须删除提交按钮

标签： javascript jquery html ajax

【解决方案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>

【讨论】：