javascript - 如何使用 jQuery 将表单字段值动态传递到 div 中？

Question

在提交时，我想使用 jQuery 将带有 #firstname id 的输入字段的值显示到一个 div 中。

$("#form").submit(function(e) {
  $.ajax({
    url: '{{config path="web/unsecure/base_url"}}proteinlaunch/form/checkaddress',
    type: 'post',
    dataType: 'json',
    data: $('form#proteinForm').serialize(),
    success: handleData

  });
  e.preventDefault();

  function handleData(data) {
    //do some stuff



    var text = $('input#firstname').text();
    $("div#mydiv").html(text);
  }

})

我的表单元素是:

<input class="fname" id="firstname" name="firstname" type="text" placeholder="First Name" />

我的 html 是:

<div id="mydiv"></div>

Answer 1

当您想要获取输入字段的值时，您应该使用 .val() 而不是 .text(); :

$("div#mydiv").html( $('input#firstname').val() );

注意:如果输入的值不应该是 HTML，最好使用 .text() 而不是 .html() 。

$("#form").submit(function(e) {
  e.preventDefault();

  $.ajax({
    url: '{{config path="web/unsecure/base_url"}}proteinlaunch/form/checkaddress',
    type: 'post',
    dataType: 'json',
    data: $('form#proteinForm').serialize(),
    success: handleData
  });
});

function handleData(data) {
  var text = $('input#firstname').val();
  $("div#mydiv").html(text);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input class="fname" id="firstname" name="firstname" type="text" placeholder="First Name" />
</form>

<div id="mydiv"></div>