当Enter键已被禁用时,按Enter键后,jQuery禁用Enter键

时间:2011-09-27 16:43:15

标签: jquery ajax double-submit-prevention

我已经禁用了我的回车键以便我可以进行ajax提交,但我想确保如果用户在服务器的响应返回之前输入两次,则表单不会被提交两次。

这里我已经禁用了回车键并为其分配了一个名为submitForm()的功能:

$(document).ready(function(){
    offset = $("#quantity").html();
    $("#lastName").focus();
    $(document).bind("keypress" , function(e){
        if (e.which == 13 && (!$("#notes").is(":focus")) && (!$("#submit").is(":focus"))) {
            submitForm(); return false;
        }
    })
    $("#submit").click(function(){ submitForm(); });
});

我曾在其他地方尝试bind(),但它没有做任何事情。我在不同的地方试过preventDefault(),但我想我要么把它放在错误的地方,要么就是错误的做法。我似乎无法让这个工作。

我发现了这个:How to disable Enter/Return Key After a function is executed because of it?,但它没有回答我的问题,因为在海报的示例中,脚本会检查框中是否有任何内容,但我想查看是否有提交与否。我不知道该怎么做。我真正想要做的是禁用回车键,直到我在ajax调用上收到服务器的回复。这是submitForm():

function submitForm() {
    $.post("/ajax/files" , $("#files").serialize(), function(data){
        filesReset();
        if (data != "") {
            $("#lastInsert table tbody:last").prepend(data);
            $("#lastInsert table tbody:last tr:first").find("td").hide();
            $("#lastInsert table tbody:last tr:first").find("td").fadeIn(1000);
            $("#lastInsert table tbody:last tr:first").effect("highlight" , {"color": "aqua"}, 1000);

            $("#lastInsert table tbody:last tr:last").remove();
        } else {
            alert("Insert rejected: either insufficient criteria or the server is down.");
            $("#hidden").click();
        }
    });
}

我不想在服务器端做任何事情,因为我需要尽快提交此提交功能(这将是一个快节奏的数据输入表单)。

2 个答案:

答案 0 :(得分:3)

使用这样的变量:

$(function(){

    var running = false;

    $(document).bind("keypress" , function(e){
        if (e.which == 13) {
            if(running === false) {
                running = true;
                submitForm();
            }
            return false;
        }
    })

    $("#submit").click(function(){
        if(running === false) {
            running = true;
            submitForm(); 
        }
    });

});

答案 1 :(得分:0)

通过常规按钮更改提交按钮更方便,使用onclick事件使用JavaScript提交表单。这样按下输入什么都不做。单击按钮时禁用该按钮,并在Ajax调用成功时启用它。