按enter键时不要刷新页面

Question

当表单中有输入时，我在enter键上遇到一些问题，触发了页面的刷新。

如果按下enter，并且在文本区域( #input )中没有输入文本，下面的代码不会刷新页面，但是如果按下enter，并且如果光标位于文本区域，则会刷新页面。我不知道是什么触发了它，因为#submit是一个常规按钮。

<div id="forms" class="container">
            <form>
                Enter your verb here in plain (dictionary) form:
                <input type="text" class="input-sm" id="input"></input>
                <div class="radio">
                    <label>
                        <input type="radio" name="input-method" value="Hiragana" checked />Radio 1
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="input-method" value="Romaji" />Radio 2
                    </label>
                </div>
                <input type="button" class="btn btn-default" id="submit" value="Submit">
                </input
            </form>
        </div>

我试图用jquery来解决这个问题，但在这方面需要帮助。如有任何建议，将不胜感激！

Answer 1

您可以在正文末尾添加以下脚本

<script>
        $("form").submit(function (e) {
            e.preventDefault();
            alert("call some function here");
        });
</script>

或者你可以把你的表格标签像这样

<form onsubmit="return false">

无论是哪种方式，您都必须将onClick="SOMEFUNCTION()“写入输入

另外，一个额外的/button tag...remove也有一个错误，并使用

<input type="button" class="btn btn-default" id="submit" value="Conjugate" />

注意结尾斜杠

Answer 2

只需更改html：

<div id="forms" class="container">
        <form action="javascript:void(-1)">
            Enter your verb here in plain (dictionary) form:
            ....

jsfiddle 这里 -很有魅力

Answer 3

在html代码中有语法错误：

<input type="button" class="btn btn-default" id="submit" value="Submit">
            </button>

将其更改为：

 <button type="button" class="btn btn-default" id="submit" value="Submit">
            </button>

此外，您还需要使用Javascript/jquery提交表单，以防止刷新整个页面