找到你要的答案

Q:Form submit prevention techniques not working

Q:表单提交预防技术不工作

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.

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

What I've tried

Here's the 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.

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.

$(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.

$(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.

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.

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.

我试图完成的事情我已经做了几次,但似乎有些不同。这是我的第一个项目使用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我试过。

这在过去的项目。然而,在这个项目中,警报发生,但表单提交。当我把返回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形式之前,我得到的错误{“错误”:“请使用POST请求”}但我不知道为什么,因为我在表格指定后。

http://jsfiddle.net/r50h0a44/

附加信息

这样5使用WAMP,laravel,jQuery 2.1载,铬,在我的控制台没有错误。请帮助。

answer1: 回答1:

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

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

你用了错误的方式val()。你应该这么称呼$(' # text_input”)。瓦尔('

Some text
');

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

javascript  jquery  ajax  forms  laravel