2014-04-23 30 views
0

这应该是查找表单中的所有字段并将它们提交到将插入到mysql的PHP页面,但是我得到的所有数据都是空数组。这里缺少什么?我不需要.val()?查找所有表单值并提交

<form id="form"> 
<table width="100%"> 
<tbody><tr><th>Displayname</th><th>URL</th><th>Parent</th><th>Sort Order</th><th>Active</th></tr> 
<tr class="even"><td width="200">Settings</td><input type="hidden" value="1" id="Settings[0]"><td><input type="textbox" value="settings.php" size="75" id="Settings[1]"></td><td><select id="Settings[2]"><option selected="" value="0">No Parent</option><option value="1">Settings</option><option value="2">Grid Demo</option><option value="3">TEST</option><option value="4">Grid Options</option><option value="5">setGridOptions</option><option value="6">Menu Items</option><option value="7">Ajax Menu</option></select></td><td><input type="textbox" value="0" size="5" id="Settings[3]"></td><td><input type="hidden" value="INACTIVE" id="Settings[4]"> <input type="checkbox" value="ACTIVE" id="Settings[4]"></td></tr> 
<tr class="odd"><td width="200">Grid Demo</td><input type="hidden" value="2" id="Grid_Demo[0]"><td><input type="textbox" value="grid.php" size="75" id="Grid_Demo[1]"></td><td><select id="Grid_Demo[2]"><option selected="" value="0">No Parent</option><option value="1">Settings</option><option value="2">Grid Demo</option><option value="3">TEST</option><option value="4">Grid Options</option><option value="5">setGridOptions</option><option value="6">Menu Items</option><option value="7">Ajax Menu</option></select></td><td><input type="textbox" value="100" size="5" id="Grid_Demo[3]"></td><td><input type="hidden" value="INACTIVE" id="Grid_Demo[4]"> <input type="checkbox" value="ACTIVE" id="Grid_Demo[4]"></td></tr> 
</tbody></table> 
<input type="submit" id="formsubmit"> 
</form> 
<br><br> 
<div class="contentarea2"></div> 

<script> 
$("#form").submit(function(e) { 
    console.log('Submit Clicked'); 
    e.preventDefault(); 
    var $form = $(this); 
    var $inputs = $form.find("input, select, button, textarea"); 
    var postData = $form.serialize(); 
    request = $.ajax({ 
     url: "saveform.php", 
     type: "POST", 
     data: postData 
    }) 
    .done(function(response, textStatus, jqXHR) { 
     // do something 
     console.log('Submit Done'); 
    }//return what was found into <div> 
    ,function (data) { 
       $(".contentarea2").html(data); 
      },"html") 
    .fail(function(jqHXR, textStatus, errorThrown) { 
     console.error('Error: ' + textStatus, errorThrown); 

    }); 
}); 
</script> 
+0

所有窗体输入都被收集在serialize()函数中。如果您在请求期间观看浏览器的控制台,您将发布数据。控制台还会告诉你有关请求/响应的其他内容。 –

+0

这只是一个黑暗中的刺:从不使用变量$输入。如果下一行是“var postDate = $ inputs.serialize();” ? – BrettFromLA

+1

你的输入没有看到'name'属性。 – lsouza

回答

4

documentation for the .serialize() method说:

只有“成功控制”被序列化到字符串...对于要包含在序列化的字符串形式元素的值,元素必须有一个名称属性。

你的表单元素没有name="something"属性。给他们一个名字,他们会被提交。

请注意,您不需要$inputs变量(无论如何,您目前不使用该变量)。一旦你给出你的元素名称,postData = $form.serialize()就足够了。

0

我在不同的问题上以不同的方式提出了正确的答案。如上所述,您确实需要name =“something”,然后您可以使用正常的PHP表单提交,并将其粘贴在底部。无需做其他更改。

$('form').on('submit', function(){ 
    var $this = $(this); 
    $.ajax({ 
     type: $this.prop('method'), 
     url: $this.prop('action'), 
     data: $this.serialize(), 
     success: function(data){ 
      //do something with the return of the php script 
     } 
    }); 
    return false; //prevent the form from causing the page to refresh 
});