Jquery Always Sends Checkbox With Ajax, Checked Or Unchecked

Yii 1.1 General Discussion
1

Hello,

I’ve got a search box that I use to update which instances of a particular model are displayed in a clistview, and this part works great. Now I am trying to add some checkboxes to filter which model fields to compare the search string to, and I have run into a problem that I can’t seem to get working or find an answer for.

Here is the form:





<?php echo CHtml::beginForm(CHtml::normalizeUrl(array('product/index')), 'post', array('id'=>'filter-form'))

				. CHtml::textField('string', (isset($_POST['string'])) ? $_POST['string'] : '', array('id'=>'string'))

				. CHtml::submitButton('Search', array('name'=>''));

				

				// check boxes for choosing which model fields to search

				echo "<br><div class='filter_search'>";

				echo CHtml::checkBox('srch_brand', (isset($_POST['srch_brand'])) ? $_POST['srch_brand'] : true, array('id'=>'srch_brand', 'class'=>'srch_filter')) . CHtml::label('brand', 'srch_brand');

				echo CHtml::checkBox('srch_name', (isset($_POST['srch_name'])) ? $_POST['srch_name'] : true, array('id'=>'srch_name', 'class'=>'srch_filter')) . CHtml::label('name', 'srch_name');

				echo CHtml::checkBox('srch_desc', (isset($_POST['srch_desc'])) ? $_POST['srch_desc'] : true, array('id'=>'srch_desc', 'class'=>'srch_filter')) . CHtml::label('description', 'srch_desc');

				echo "</div>";

				

				echo CHtml::endForm(); 

		?>

And the JQuery code that I use when one of the checkboxes is changed:


Yii::app()->clientScript->registerScript('product-search-filter',

         "

 	$('#filter-form input:checkbox').change(function(){

		ajaxRequest = $('#filter-form input#string').serialize(); // get search string

		

		ajaxRequest += '&' + $('#filter-form input:checked').serialize(); // add checked checkboxes

		

		console.log(ajaxRequest);

		

		$.fn.yiiListView.update(

				// this is the id of the CListView

	  		'ajaxProductView',

	  		// data to send to controller action, for updating clistview

	  		{data: ajaxRequest}

		);

           

	});

"

);

The console.log(ajaxRequest) line logs exactly what I would expect for checkbox data(tried before and after the listview update), but when I look at the actual ajax request, all checkboxes are always serialized and sent with the request.

Can anyone see where I’m going wrong with this?

2

That’s default behavior of the checkbox helper.

It creates additional hidden field in case of unchecked state.

That’s because browser itself will not send any information about unchecked checkboxes, ilke there were no checkboxes at all.

3

Thanks for your reply ORey. I appreciate it as I was unaware of the "uncheckValue" attribute, but I run into a problem where the checkbox value is not overwriting the hidden field value, and also never goes away.

I don’t usually work with checkboxes and ajax admittedly, and I don’t see why this line that is supposed to be collecting all checked checkboxes, looks fine in my console.log, but sends all checkboxes(checked and unchecked) once sent through the actual ajax request:




ajaxRequest += '&' + $('#filter-form input:checked').serialize();

I’ve no idea why I can’t just send the checked checkboxes, so maybe I could ask: how exactly would you collect only checked checkboxes from a form to send in an ajax request? If that’s not possible, could you please suggest an alternative method of determining which checkboxes are checked.

4

You can set ‘uncheckValue’ to null so the hidden will not be rendered.

http://www.yiiframework.com/doc/api/1.1/CHtml#checkBox-detail