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/