javascript - 表单提交预防技术不起作用

Question

我想要完成的事情我之前已经做过几次了，但似乎有些不同。这是我使用 Laravel 的第一个项目，我正在构建的项目非常基础。尽管如此，我认为这个问题仅仅是 HTML/JS 问题，但我认为我应该把它放在那里，因为我很生气。

我想要得到的行为

用户进入输入字段，按回车键，而不是提交表单，而是阻止表单运行(这样我就可以使用ajax，但是ajax还不是这个等式的一部分)。

我尝试过的

这是 HTML。

<form action="test" method="POST">
  <input type="text" id="text_input" class="form-control" autocomplete="off" />
  <input type="submit" id="submit_input" class="btn btn-success" />
</form>

这是我尝试过的一些 JavaScript。

这在过去的项目中是有效的。然而在这个项目中，警报发生了，但表单已提交。当我将 return false 放在开头时，它会阻止表单提交，但是，我当然无法运行任何代码。

$(document).ready( function() {
    $('#submit_input').click(function() {
        alert();
        $('#text_input').val() = '';
        $('#text_input').focus();
        return false;
    });
});

我尝试使用 PreventDefault，它允许警报运行，但会运行警报之后的任何代码。

$(document).ready( function() {
    $('form').submit(function (e) {
        e.preventDefault();
        alert();
        $('#text_input').val() = '';
        $('#text_input').focus();
    });
});

我不想要的解决方案

我知道我可以在专注于该字段的同时获取按钮提交或输入键上的输入，并且无需使用 html 表单即可获得此行为，也许我会，但是，我想知道是什么原因导致了这种情况去工作。

JSFiddle

我的 jsfiddle 做错了，所以我无法用这个来演示。我以前没有在 jsfiddle 上使用过表单，并且收到错误 {"error": "Please use POST request"} 但我不知道为什么，因为我在表单中指定了帖子。

http://jsfiddle.net/r50h0a44/

其他信息

在 Chrome 上使用 Laravel 5、使用 WAMP、加载 jQuery 2.1 执行此操作，控制台中没有错误。请帮忙。

Answer 1

您以错误的方式使用val()。你应该这样调用它 $('#text_input').val('some text');

更新:您应该使用代码的第二种变体(使用 e.preventDefault())