2014-04-23 77 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 
});