javascript - 当用户使用 jQuery 提交表单而不刷新页面时填充字段

Question

在我的表单上有几个输入字段，一旦用户在输入字段中输入值并点击提交，我希望这些值填充一些相应的元素。

如何在不刷新页面的情况下使用 jQuery 来做到这一点？

<form method="get">
  <label for="yourName">Your name</label>
  <input name="yourName" id="yourName" type="text">
  <button type="submit">Submit</button>
</form>
<div id="result">
  <span class="rName"></span>
</div>

一些失败的JS。

$('#hCardForm').submit(function() {
  var rName = $('#yourName').val();
  $('.rName').text(rName);
});

Answer 1

您的代码有 2 个问题。1. 您的表单上没有 id 2. 您没有停止提交表单。

您可以将按钮类型更改为按钮，而不是通过 jquery 提交和提交表单。

jsfiddle

Answer 2

<form method="get">
  <label for="yourName">Your name</label>
  <input name="yourName" id="yourName" type="text">
  <button type="submit" id="submit">Submit</button>
</form>
<div id="result">
  <span class="rName"></span>
</div>

$('#submit').click(function(event){
    event.preventDefault();
    $('#result .rName').text($('#yourName').val());
});​

http://jsfiddle.net/MswhY/