I have a form with a bunch of checkboxes and input fields. I'm using jquery(1.10.1) to manipulate a number of things about the form based on user input from another form on the page. This was all working a few weeks ago but suddenly I've found that none of the checkboxes are submitting after they are changed by jquery.
The checkboxes are of the form:
<input type="checkbox" id="prod_70" name="prod[70]" class="product style_1 color_1 lens_3 status_1 " value="1" checked />
My Jquery code looks the other form to decide which boxes the user is interested in and then creates a selector based on that and the classes assigned to the checkboxes checking the boxes requested by the user:
$(curSel).prop('checked',true);
I was using:
$(curSel).attr('checked','checked').prop('checked',true);
But simplified since that shouldn't be necessary. I also tried adding a .change() for good measure but that didn't solve the problem so I took it back out.
When I submit the form none of the checked checkboxes show up and $_POST['prod'] (PHP on the backend) isn't there. $_REQUEST['prod'] is also not there. The other fields on the form are submitting. And if I submit the form without letting jquery update anything then the checkboxes do submit and $_POST['prod'] is as expected.
I've used the console in chrome and firebug in firefox to inspect the checkboxes while interacting with the page and 'checked' is being added and removed and the checkboxes are displaying correctly even when they're not submitting.
I've checked the HTML on the page to make sure everything is valid and there aren't any missing close tags or nested tags and the only other JS on the page are for FB's like button and twitters follow button.
I'm at a loss as to what could be causing this and my searches aren't turning up anything similar anymore.
EDITING TO ADD MORE:
After more debugging it appears that the problem isn't with changing the checkboxes. It's happening when the <li> that the checkboxes are in is hidden with .hide() and then reshown with .show(). After doing that the checkboxes in the <li> are never submitting even though other form elements inside the <li> are. Here's a full <li>:
<li class="prod style_1 color_1 lens_7 status_1 bulk-list-item" id="prod_55">
<div class="bulk-prod-name">
<input type="checkbox" id="prod_55" name="prod[55]" class="product style_1 color_1 lens_7 status_1 " value="1" />
<label for="prod_55">
<span class="style-name">Player</span>
<span class="color-name">Matte Black</span> |
<span class="lens-name">Rose Hi-Def LTD 17/35</span>
<span class="part-number">PLMBHD03</span>
<div style="margin-top:10px;">
<span class="bulk-prod-status">Status: <b>In Stock</b></span>
</div>
</label>
</div>
<div class="bulk-prod-image">
<div style="position:absolute; top:0;"><img style="width:100%;" src="/art/products/11/1/frame/thumb/1.png"></div>
<div style="position:absolute; top:0;"><img style="width:100%;" src="/art/products/11/1/lens/thumb/7.png"></div>
<div style="clear:both;"></div>
</div>
<div class="bulk-prod-price">
MSRP: $ <input type="text" id="prod_msrp_55" name="prod_msrp[55]" class="msrp inputbox" value="179.00" prod_id="55">
<input type="hidden" id="prod_msrp_orig_55" class="orig_price" value="179.00" orig_id="prod_msrp_55">
Dealer Price: $ <input type="text" id="prod_dprice_55" name="prod_dprice[55]" class="dprice inputbox" value="90.00" prod_id="55">
<input type="hidden" id="prod_dprice_orig_55" class="orig_price" value="90.00" orig_id="prod_dprice_55">
</div>
<div class="bulk-prod-edit">
<a href="/admin/add_product.html?product[prod_id]=55&product[is_edit]=1">Edit</a> this product.
<div style="display:none" id="files_55">
<table width=100%>
<tr>
<td width=50% valign=top><small>Fullsize:<br>
<span style="color:#009900"> /art/products/11/1/frame/full/1.png</span><br>
<span style="color:#009900"> /art/products/11/1/lens/full/7.png</span><br>
</small>
</td>
<td width=50% valign=top><small>Thumbnais:<br>
<span style="color:#009900"> /art/products/11/1/frame/thumb/1.png</span><br>
<span style="color:#009900"> /art/products/11/1/lens/thumb/7.png</span><br>
</small>
</td>
</tr>
</table>
</div>
</div>
</li>
And here's the full jQuery that's hiding/showing/checking/unchecking things:
$(document).on('change', '.prod_selector', function(e) {
// console.log('Selection changed:');
e.preventDefault();
$('.prod').hide();
$('.product').prop('checked', false);
var lens = $('#lens_selector').val();
var color = $('#color_selector').val();
var style = $('#style_selector').val();
var pstatus = $('#status_selector').val();
var curSel = '';
if (lens>0) {
curSel += '.lens_' + lens;
}
if (color>0) {
curSel += '.color_' + color;
}
if (style>0) {
curSel += '.style_' + style;
}
if (pstatus>0) {
curSel += '.status_' + pstatus;
}
if ((lens==0) && (color==0) && (style==0) && (pstatus==0)) {
curSel = '.prod';
$('.product').prop('checked',true);
}
// console.log('curSel: ' + curSel);
$(curSel).show()
$(curSel).prop('checked',true);
$('#prod_count').text($('.prod:visible').length);
});
After messing with things I've determined that if I don't .hide() anything then it all work as expected (other than not hiding things that need to be hidden) but if any <li>'s are hidden then even once their shown again checkboxes inside of them don't get included in the form submission even though other input fields do.
