当字段更改时提交AJAX表格

我有一个GET表单，提交时使用AJAX请求更新一个php页面。当字段更改时提交AJAX表格

我希望这个表单能够在任何时候改变字段时自动提交，表单主要包含文本输入和几个下拉菜单。

我曾尝试：

onchange="this.form.submit()" - 这工作，但而不是数据AJAXing到PHP页面，它实际上重定向我的页面，这是一个没有去。

<input type="submit"> - 我想这是最后一招，因为我希望表单自动发送，，但它确实工作，否则。

我知道，发送的形式，每个输入变化通常不是一个好主意，所以我非常希望它发送表单1-2秒后闲置（显然输入东西后） - 如果这是不可能的，那么每次更改字段都可以接受，因为它是一个低流量的服务器。

所以我的问题是，通过ajax自动发送表单的正确方法是什么？

我现在：

     <form method="GET" id="submitRequest" action="showTable.php"> 
         <th><input type="text" id="SSeries" name="SSeries" class="form-control"></th> 
         <th><input type="text" id="SModel" name="SModel" class="form-control"></th> 
         <th><input type="text" id="SSerial" name="SSerial" class="form-control"></th> 
         <th><input type="text" id="SColor" name="SColor" class="form-control"></th> 
         <th><input type="text" id="SStorage" name="SStorage" class="form-control"></th> 
         <th><input type="text" id="SCarrier" name="SCarrier" class="form-control"></th> 
         <th><input type="text" id="SType" name="SType" class="form-control"></th> 
         <th><input type="text" id="SUPC" name="SUPC" class="form-control"></th> 
         <th><input type="text" id="SStatus" name="SStatus" class="form-control"></th> 
         <input type="submit" class="btn btn-success"> 
        </form>

我现在AJAX：

     $(document).ready(function() { 
          $('#submitRequest').submit(function(event) { 
           $.ajax({ // create an AJAX call... 
            data: $('#submitRequest').serialize(), // serialize the form 
            type: $('#submitRequest').attr('method'), // GET or POST from the form 
            url: $('#submitRequest').attr('action'), // the file to call from the form 
            success: function(response) { // on success.. 
             showTable(); 
            } 
           }); 
           event.preventDefault(); 
          }); 
         });

来源

2016-04-28 GrumpyCrouton

请添加一些代码，这样我们就可以检查问题 – Nehal

@ Ms.Nehal我说我的代码，但是我不要认为它是我的代码的问题，因为它不知道如何正确发送表单。 – GrumpyCrouton

你的输入标签没有'type'属性 – Nehal

试试这个：

当输入值变化进而形成将提交，

jQuery("#submitRequest input").change(function(){ 
    $('#submitRequest').submit(); 
});

来源

2016-04-28 13:08:19

没有解决问题基本上与我所做的一样，以实现它的工作 – GrumpyCrouton

我能够修复我的问题通过简单地改变我的jQuery选择和功能。

我改变了它从

$('#submitRequest').submit(function(event) {

要

$('.submitForm').on('keyup', function(){

和我添加submitForm到每个输入类。

来源

2016-04-28 13:11:02 GrumpyCrouton

你可以在变更后阿贾克斯执教，并获得来自服务器的响应

$("#submitRequest input").change(function(){ 
    var data = { 
     SSeries : $("#SSeries").val(), 
     ... 
    } 

    $.ajax({ 
     url: 'your_url_method', 
     type: 'POST', 
     data: data, 
     success : function(res){ 
      showTable(); 
      console.log("Success, you submit your form" + res); 
     }, 
     error : function(error){ 
      console.log(error, "Error in submit") 
     } 
    }); 

});

来源

2016-04-28 13:18:59

当字段更改时提交AJAX表格

回答

相关问题