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

时间:2022-11-23 16:50:32

What I'm trying to accomplish I've done several times before, but something seems to be different. This is my first project using laravel, and what I'm building is very basic. Still, the issue I would think is solely an HTML/JS issue, however I thought I should put that out there as I'm miffed.

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

The behavior I'm trying to get

我想要的行为

User enters into input field, presses the enter key, and instead of submitting the form, the form is prevented from running (so that I can use ajax, however ajax is not yet part of this equation).

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

What I've tried

我试过的

Here's the HTML.

这是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>

Here's some javascript I've tried.

这是我尝试过的一些JavaScript。

This worked in past projects. However in this project, The alert happens, but the form is submitted. When I put the return false at the start, it prevents the form from submitting, however, then I can't run any code of course.

这适用于过去的项目。但是在此项目中,警报发生,但表单已提交。当我在开始时将return返回false时,它会阻止表单提交,但是,当然我不能运行任何代码。

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

I've tried using preventDefault, that allows the alert to run, but does run any of the code after it.

我已经尝试过使用preventDefault,它允许警报运行,但是在它之后运行任何代码。

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

Solution I don't want

解决方案我不想要

I'm aware that I can get the inputs on button submit or enter key while focused on the field, and get this behavior without using the html form, and maybe I will, however, I want to know what's causing this not to work.

我知道我可以在按钮提交时输入输入或在关注字段时输入密钥,并且在不使用html表单的情况下获得此行为,但是,我可能会想知道是什么导致这不起作用。

JSFiddle

I'm doing something wrong with my jsfiddle, so I'm not able to demonstrate with this. I haven't used a form on jsfiddle before, and I'm getting the error {"error": "Please use POST request"} but I don't know why, because I am specifying the post in the form.

我的jsfiddle做错了,所以我无法证明这一点。我之前没有在jsfiddle上使用过表单,我收到错误{“错误”:“请使用POST请求”}但我不知道为什么,因为我在表单中指定了帖子。

http://jsfiddle.net/r50h0a44/

Additional Information

Doing this with Laravel 5, using WAMP, with jQuery 2.1 loaded, on Chrome, with no errors in my console. Please help.

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

1 个解决方案

#1


You're using val() in a wrong way. You should call it this way $('#text_input').val('some text');

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

Update: You should use a second variant of your code (with e.preventDefault())

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

#1


You're using val() in a wrong way. You should call it this way $('#text_input').val('some text');

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

Update: You should use a second variant of your code (with e.preventDefault())

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