多次提交Ajax请求

我正在修改一些验证到我的表单。验证工作，问题是，当没有验证错误发生时，表单提交多次用户试图提交。这就像请求堆积如山。多次提交Ajax请求

形式有这个提交按钮调用我的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 
       ); 

      });   
     }   
    }); 
}

来源

2014-07-14 Bullfinch

难道是因为您在提交类型按钮上有onClick事件吗？试着将你的按钮类型从'submit'切换到'button'。 – Fluitketel

成功验证后，您可以禁用提交按钮，并进行服务器调用或在按钮位置显示一些加载图像..并根据服务器响应对待 – vivek

而不是增加的onclick事件提交按钮，添加的onsubmit事件形成。

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

来源

2014-07-14 06:41:23

这个技巧，并结合跳过'$（“＃createForm”）。submit（function（event）{}'函数，直接在'create_new_stuff（event）'函数中执行 – Bullfinch

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

并返回false时，你不希望从您的JavaScript提交表单功能。

来源

2014-07-14 06:34:16

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

来源

2014-07-14 06:37:15 zhaoyou

@Bullfinch您只需提交表单就可以将数据提交给服务器。你可以使用$ .ajax来做到这一点。 – zhaoyou

从冒泡阻止事件：

event.stopPropagation();

来源

2014-07-14 07:06:10 Koushan

你点击提交按钮，每一次的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

你可以在这里放一个装载器来显示服务器正在执行的动作。

来源

2014-07-14 07:07:56 MixedVeg

多次提交Ajax请求

回答

相关问题