Question

我正在努力 - 我必须遗漏一些明显的东西，但我检查了格式错误的HTML，javascript尝试通过firebug调试，选择不同，但没有工作。为什么我不能序列化我的表格？我的代码如下：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.6/themes/le-frog/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="./application/css/main.css" />
<link rel="stylesheet" type="text/css" href="./application/css/uniform.default.css" />
</head>
<body>
<div id="markerinfocontainer">
<div id="actionpanel">
<div id="reportmarker" title="click to report this marker as invalid"></div>
<div id="vieweditmarker" class="view" title="click to edit this marker"></div>
</div><div id="star-rating" class="rating"></div>
<form id="markerForm" method="post" action="">
<table id="markertable">
<tr>
<td class="label">Title</td>
<td><input id="txtTitle" type="text" maxlength="70" /></td>
</tr>
<tr>
<td class="label">Goalsize</td>
<td><select id="selGoals">   <option value="1">2v2</option>   <option value="2">5v5</option>   <option value="3">7v7</option>   <option value="4">11v11</option>   </select></td>
</tr>
<tr>
<td class="label">Fieldsize</td>
<td><select id="selCapacity">   <option value="1">2v2</option>   <option value="2">5v5</option>   <option value="3">7v7</option>   <option value="4">11v11</option>   </select>
</td>
</tr>
<tr>
<td class="label">Fundament</td>
<td><select id="selFundament">   <option value="1">Grass</option>   <option value="2">Asphalt</option>   <option value="3">Growel</option>   <option value="4">Indoor</option>   </select>
</td>
</tr>
<tr>
<td class="label">Facilities</td>
<td>Stadium:<input type="checkbox" id="facStadium" />Waterpost:<input type="checkbox" id="facWaterpost" />Toilet:<input type="checkbox" id="facToilet" />Bench:<input type="checkbox" id="facBench" />Fence:<input type="checkbox" id="facFence" />
</td>
</tr>
<tr>
<td class="label">Extra</td>
<td><textarea id="txtExtra" rows="3" cols="20"></textarea></td>
</tr>
</table>
</form>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script src="./application/js/jquery.uniform.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
console.log("what!");
alert("argh");
$(document).ready( function() 
{
console.log("markerform " , $("#markerForm").serialize());
});
});
</script>
</body>
</html>

Answer 1

HTML表单元素在name attr上运行，而不是id attr。所以你会想要例如

<input type="checkbox" name="facStadium" id="facStadium" />

然后你应该在调用序列化时收回东西。此外，您可能无法将两个文档就绪处理程序嵌套在一起;删除内部的。

（每次使用表格进行布局时，也会有数千名网页开发人员死亡...）

Answer 2

可能是因为你有两个嵌套的$(document).ready？

$(document).ready(function(){
    console.log("what!");
    alert("argh");
    $(document).ready( function() 
    {
        console.log("markerform " , $("#markerForm").serialize());
    });
});

无法使用jquery .serialize序列化表单

2 个答案: