フォームリフレッシュを行わずにEnterキーを押してフォームを送信

Question

Enterキーを使用してフォームを送信することは可能ですが、ページを更新することができます。

私は対話型ゲームを作っています。ユーザーの応答がdivに追加されたときに、応答を送信する（フォームを送信する）と、

ただし、ページを更新すると、divの現在のテキストが消えてしまいます。したがって、これは望ましくありません。

ページを更新せずにフォームを送信するときにEnterキーを使用してスクリプトをトリガーすることはできますか？

イラスト例：

<form action="tdat.php" method="post" onsubmit="return answer(event)"> 
    <input type="text" name="userInput" id="searchTxt" maxlength="50" size="50"> 
</form> 

これは私が使用していますフォームです。私は、ユーザの入力に応答し、divにテキストを表示する機能をanswer(e)にしようとしました。

ただし、コードanswer(e)は実行されず、ページも更新されます。私はこれとどのように戦うべきですか？前もって感謝します。

UPDATE：

次のようにanswer(e)のイベントの内容を思ったものには、次のとおり

function answer(e) { 
    if (e.keyCode == 13) { 
     addText() 
     responseCheck() 
     document.getElementById("searchTxt").value = "" 
     autoScroll() 
    } 
} 

addText()はresponseCheck()が計算する関数であり、divにHTMLを付加するものです応答と残りは明白でなければなりません。

Answer 1

First Add onkeydown in input and remove the form tag which cause reload whole page

<input type="text" name="userInput" id="searchTxt" maxlength="50" size="50" onkeydown="return answer(event)"> 

テッドが押されている間xtフィールドにフォーカスがあります。押されたキーがエンターボタンの場合、AJAXを使用してアクションを呼び出すコードを書くことができるifブロックに入ります。

Answer 2

js関数でpreventDefault（）を使用して、デフォルトの動作を「入力」しないようにします。今、あなたはjQueryの

$('input[type=text]').keypress(function(e) { 
    if (e.which == 13) { 
     e.preventDefault(); 

     /* AJAX code to post data to action */ 
     /* add Div based on response from AJAX call */ 
    } 
}); 

を使用している場合は、上記のスニペットはいつでもキーを実行します、そして、jsの機能の下

function answer(e) { 
    if (e.keyCode == 13) { 
     addText(); 
     $.ajax({ 
     url:"tdat.php", 
     type:"POST", 
     data:$("#searchTxt").val(), 
     success:function(){ 
      $("searchTxt").val(""); 
      autoScroll() 

     } 
     }) 
    } 
} 

Answer 3

First of all you will need to remove the action attribute from the form tag.

を使用 http://www.w3schools.com/jsref/event_preventdefault.asp