Question

我正在努力为我的表单修复一些验证。验证工作，问题是当没有发生验证错误时，表单提交用户尝试提交的次数。这就像请求堆积起来一样。

表单有这个提交按钮，可以调用我的ajax函数create_new_stuff

<input id='submitButton' onclick='create_new_stuff()' name='submit' type='submit' value='create' />

功能

function create_new_stuff(){

    $("#createForm").submit(function(event){       

        event.preventDefault();
        event.returnValue = false;

        var input_value = $("#createValue").val();

        if(input_value === "" || null){

            console.log("Wrong input value");
            return;
        }
        else{

            var request;
            var $form = $(this);
            var serializedData = $form.serialize();

            request = $.ajax({
                url: "/new_stuff.php",
                type: "post",
                data: serializedData              
            });

            // callback handler that will be called on success
            request.done(function (response, textStatus, jqXHR){

                console.log("Stuff created!", response);             
                create_new_stuff_form();
                var successDiv = $("<div class='success'>Stuff was created</div>");
                $("#responseMessages").html(successDiv);

            });

            // callback handler that will be called on failure
            request.fail(function (jqXHR, textStatus, errorThrown){

                console.error(
                    "The following error occured: "+
                    textStatus, errorThrown
                );

            });          
        }         
    });
}

Answer 1

<input id='submitButton' onclick='return create_new_stuff()' name='submit' type='submit' value='create' />

如果您不想从javascript函数提交表单，则返回false。

Answer 2

更改按钮类型提交到按钮或更改onclick到onsubmit

Answer 3

不是添加 onclick 事件来提交按钮，而是将 onsubmit 事件添加到表单中。

<form onsubmit= 'create_new_stuff()'>
</form>

Answer 4

通过以下方式阻止事件冒泡：

event.stopPropagation();

Answer 5

每次单击“提交”按钮时，onclick都会调用create_new_stuff（）方法来执行所需的操作。如果您认为在表单提交或按钮单击上执行此操作，则两者都应显示相同的行为。你可以尝试这样的事情：

HTML

<label for="formelement">Enter Value Here:</label>
<input type="text" id="formelement" name="formelement">
<input type="submit" id="submitbutton" value="Submit">

JS

$("#submitbutton").on('click', function(e) {
e.preventDefault();
$('#submitbutton').attr('disabled',true);
var x = $("#formelement").val();
  if(x=="" || null)
{
    console.log("Wrong Input..!!");
    return;
}
else {
    console.log("Hello" + " " +x);
}
});

工作演示：DEMO

你可以在这里放一个加载器来显示正在完成的服务器操作。!!!

Answer 6

当您尝试对不同的表单使用相同的代码并且必须使用单独的函数进行表单提交而不是直接提交时，我认为这是针对情况的最佳解决方案 boost

你可以做到的

$("#this_is_form_id_string").on('submit', function(e){ });

Ajax请求被多次提交

6 个答案: