使用enter提交表单而不触发页面刷新

I know it is possible to submit a form using the enter key, but doing so refreshes the page.

我知道可以使用回车键提交表单,但这样做会刷新页面。

I am making an interactive game where the user's responses are added to a div whenever he makes a response (submits the form).

我正在制作一个互动游戏,每当他做出回应(提交表格)时,用户的回复就会被添加到div中。

However, by refreshing the page, the current text in the div disappears, and thus this is NOT desired.

但是,通过刷新页面,div中的当前文本消失,因此不需要。

Is it possible to trigger a script using the enter key when you submit a form WITHOUT the page refreshing?

当您提交表单而不刷新页面时,是否可以使用回车键触发脚本?

Illustrated example:

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

This is the form that I am using. I tried making a function answer(e) to respond to the user's input, and display the text to the div.

这是我正在使用的表单。我尝试使用函数答案(e)来响应用户的输入,并将文本显示给div。

However, the code answer(e) does not run, and the page also refreshes. How should I combat this? Thanks in advance.

但是,代码答案(e)不会运行,页面也会刷新。我该如何对抗这个?提前致谢。

UPDATE:

To those wondering the contents of the event in answer(e) it is as follows:

对于那些在回答(e)中想知道事件内容的人,如下:

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

addText() is the one that appends the HTML to the div, responseCheck() is the function that calculates the response and the rest should be obvious.

addText()是将HTML附加到div的函数,responseCheck()是计算响应的函数,其余部分应该是显而易见的。

3 个解决方案

#1

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

首先在输入中添加onkeydown并删除导致重新加载整个页面的表单标记

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

now use below js function

现在使用js函数下面

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

        }
       })
     }
}

#2

Use preventDefault() in your js function to suppress "enter" default behaviour. http://www.w3schools.com/jsref/event_preventdefault.asp

在js函数中使用preventDefault()来禁止“输入”默认行为。 http://www.w3schools.com/jsref/event_preventdefault.asp

#3

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

首先,您需要从表单标记中删除action属性。

Then, if you're using jQuery

然后,如果你正在使用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 */
    }
});

The above snippet will run whenever a key is pressed while a text field is in focus. If the pressed key is the enter button then it will enter the if block where you can write your code to call your action using AJAX.

只要在文本字段处于焦点时按下某个键,上面的代码段就会运行。如果按下的键是输入按钮,则它将进入if块,您可以在其中编写代码以使用AJAX调用您的操作。

#1