Formular mit Enter senden, ohne die Seitenaktualisierung auszulösen

Question

Ich weiß, dass es möglich ist, ein Formular mit der Eingabetaste zu senden, aber dadurch wird die Seite aktualisiert.

Ich mache ein interaktives Spiel, in dem die Antworten des Benutzers zu einer div hinzugefügt werden, wenn er eine Antwort (übergibt das Formular).

Durch Aktualisieren der Seite verschwindet jedoch der aktuelle Text in div, und dies ist daher NICHT erwünscht.

Ist es möglich, ein Skript mit der Eingabetaste auszulösen, wenn Sie ein Formular OHNE die Seite aktualisieren?

Illustrated Beispiel:

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

Dies ist die Form, die ich verwende. Ich habe versucht, eine Funktion answer(e) zu machen, um auf die Benutzereingabe zu reagieren, und den Text zum div anzuzeigen.

Der Code answer(e) wird jedoch nicht ausgeführt, und die Seite wird ebenfalls aktualisiert. Wie soll ich das bekämpfen? Danke im Voraus.

UPDATE:

diejenigen Um den Inhalt des Ereignisses in answer(e) fragen, es ist wie folgt:

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

addText() derjenige ist, der die HTML zum div anhängt, ist responseCheck() die Funktion, die berechnet die Antwort und der Rest sollten offensichtlich sein.

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)"> 

jetzt unter js Funktion

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

     } 
     }) 
    } 
} 

Answer 2

Verwenden Sie preventDefault() in Ihrer js-Funktion, um das Standardverhalten "enter" zu unterdrücken. http://www.w3schools.com/jsref/event_preventdefault.asp

Answer 3

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

Dann, wenn Sie jQuery verwenden sind

$('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 */ 
    } 
}); 

Die obige Snippet wird ausgeführt, wenn ein Schlüssel wird während einer te gedrückt xt Feld ist im Fokus. Wenn die gedrückte Taste die Eingabetaste ist, wird sie in den if-Block eingegeben, wo Sie Ihren Code schreiben können, um Ihre Aktion mit AJAX aufzurufen.