CODEWITHSUNDEEP
jqueryhtml
Jakob
Jakob

Reputation: 4854

can't serialize form with jquery .serialize

I'm trying so hard - I must be missing something obvious, but I've checked for malformed html, javascript tried debugging via firebug, selecting differently, but NOTHING works. Why can't I serialize my form?? My code is as follows:

<!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>

Upvotes: 0

Views: 3104

Answers (2)

Lorenzo
Lorenzo

Reputation: 29427

Is maybe because you have two nested $(document).ready?

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

Upvotes: 2

issa marie tseng
issa marie tseng

Reputation: 3234

HTML form elements operate on the name attr, not the id attr. So you'll instead want for example

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

Then you should get stuff back when you call serialize. Also, it probably doesn't help that you've nested two document ready handlers within each other; remove the inner one.

(also, a thousand web developers die every time you use tables for layout...)

Upvotes: 7

Related Questions