Reputation: 21
I am trying to post the value of checkbox to controller using ajax. But the data which I send, is always empty in controller.
my_view.php
<div class="regions">
<label class="check-inline">
<input type="checkbox" id="sangli" name="region[]" value="Sangli" class="category"
onclick="javascript:updateregion()"
> Sangli</label><br>
<label class="check-inline">
<input type="checkbox" id="satara" name="region[]" value="Satara" class="category"
onclick="javascript:updateregion()"
>Satara</label><br>
<label class="check-inline">
<input type="checkbox" id="kolhapur" name="region[]" value="Kolhapur" class="category"
onclick="javascript:updateregion()"
>Kolhapur</label><br>
<label class="check-inline">
<input type="checkbox" id="solapur" name="region[]" value="Solapur" class="category"
onclick="javascript:updateregion()"
>Solapur</label><br>
<input type="hidden" name="filterbyregion" id="filterbyregion">
<script type="text/javascript">
function updateregion() {
$("#sangli").change(function() {
if($(this).prop("checked")) {
var textbox = $(this).val();
document.getElementById("filterbyregion").value = textbox;
//document.filters.submit();
alert(textbox);
jQuery.ajax({
url: '<?php echo site_url();?>resource_controller/view_div',
type: 'POST',
cache: false,
data: {"filterbyregion": textbox},
dataType: 'text',
success: function() {
alert(textbox);
$('#filter_div').load('<?php echo site_url();?>resource_controller/view_div');
},
error: function(error) {
console.log(error);
alert(error);
}
});
}
});
$("#satara").change(function() {
if($(this).prop("checked")) {
var textbox = $(this).val();
document.getElementById("filterbyregion").value = textbox;
//document.filters.submit();
alert(textbox);
jQuery.ajax({
url: "<?php echo site_url();?>resource_controller/view_div",
type: "POST",
cache: false,
data: {"filterbyregion": $("#sangli").val()},
dataType: "text",
success: function() {
alert(textbox);
$('#filter_div').load('<?php echo site_url();?>resource_controller/view_div');
},
error: function(error) {
console.log(error);
alert(error);
}
});
}
});
$("#kolhapur").change(function() {
if($(this).prop("checked")) {
var textbox = $(this).val();
document.getElementById("filterbyregion").value = textbox;
//document.filters.submit();
alert(textbox);
jQuery.ajax({
url: '<?php echo site_url();?>resource_controller/view_div',
type: 'POST',
cache: false,
data: {"filterbyregion": textbox},
dataType: 'text',
success: function() {
alert(textbox);
$('#filter_div').load('<?php echo site_url();?>resource_controller/view_div');
},
error: function(error) {
console.log(error);
alert(error);
}
});
}
});
$("#solapur").change(function() {
if($(this).prop("checked")) {
var textbox = $(this).val();
document.getElementById("filterbyregion").value = textbox;
//document.filters.submit();
alert(textbox);
jQuery.ajax({
url: '<?php echo site_url();?>resource_controller/view_div',
type: 'POST',
cache: false,
data: {"filterbyregion": textbox},
dataType: 'text',
success: function() {
alert(textbox);
$('#filter_div').load('<?php echo site_url();?>resource_controller/view_div');
},
error: function(error) {
console.log(error);
alert(error);
}
});
}
});
</script>
</div>
My_controller.php
public function view_div() {
$rgn = str_replace(",", "','", $this->input->post('filterbyregion'));
$rank = str_replace(",", "','", $this->input->post('ranking'));
$exp = str_replace(",", "','", $this->input->post('selexperiance'));
$qual = str_replace(",", "','", $this->input->post('qualification'));
$sk = str_replace(",","','", $this->input->post('multiskills'));
if($rgn != ""){
$this->q['h'] = $this->resource_model->search_users($sk,$rgn,$qual,$exp,$rank);
$this->q['state'] = $this->place_model->get_state();
$this->q['district'] = $this->place_model->get_district();
$this->q['taluka'] = $this->place_model->get_taluka();
$this->q['courses'] = $this->course_model->get_all_course_names();
if(isset($this->q['h']) && $this->q['h']->num_rows() > 0)
{
$this->load->view('/web/filtered_resources', $this->q);
}
}
return array();
}
My div is getting loaded but it is without expected result data.
Below is another script which I tried earlier. This may clarify my purpose:
<script type="text/javascript">
$.noConflict(document).ready(function() {
var textbox = "";
var rgns = [];
if(document.getElementById('sangli').checked) {
if (textbox == "") {
textbox += "Sangli";
} else {
textbox += ", Sangli";
}
rgns.push('sangli');
}
if(document.getElementById('satara').checked) {
if (textbox == "") {
textbox += "Satara";
} else {
textbox += ", Satara";
}
rgns.push('satara');
}
if(document.getElementById('kolhapur').checked) {
if (textbox == "") {
textbox += "Kolhapur";
} else {
textbox += ", Kolhapur";
}
rgns.push('satara');
}
if(document.getElementById('solapur').checked) {
if (textbox == "") {
textbox += "Solapur";
} else {
textbox += ", Solapur";
}
rgns.push('satara');
}
document.getElementById('filterbyregion').value = textbox;
// document.filters.submit();
jQuery.ajax({
url: '<?php echo site_url();?>resource_controller/view_div',
type: "POST",
data: {"txt": textbox},
success: function() {
$('#filter_div').load('<?php echo site_url();?>resource_controller/view_div');
},
error: function(error) {
console.log(error);
}
});
});
</script>
Upvotes: 1
Views: 792
Reputation: 6650
Try this code
<div class="regions">
<label class="check-inline">
<input type="checkbox" id="sangli" name="region[]" value="Sangli" class="category"
> Sangli</label><br>
<label class="check-inline">
<input type="checkbox" id="satara" name="region[]" value="Satara" class="category"
>Satara</label><br>
<label class="check-inline">
<input type="checkbox" id="kolhapur" name="region[]" value="Kolhapur" class="category"
>Kolhapur</label><br>
<label class="check-inline">
<input type="checkbox" id="solapur" name="region[]" value="Solapur" class="category"
>Solapur</label><br>
<input type="hidden" name="filterbyregion" id="filterbyregion">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(".category").change(function() {
var textbox = $(this).val();
//document.getElementById("filterbyregion").value = textbox;
$('#filterbyregion').val(textbox);
/*Fetching multi value from checkbox*/
var data1 = [];
$(":checked").each(function() {
data1.push($(this).val());
});
console.log(data1);
//document.filters.submit();
//alert(data1);
$.ajax({
url: 'resource_controller/view_div',
type: 'POST',
cache: false,
data: {"filterbyregion": data1},
dataType: 'text',
success: function(data) {
alert(data);
/*$('#filter_div').load('<?php echo site_url();?>resource_controller/view_div');*/
},
error: function(error) {
console.log(error);
alert(error);
}
});
});
</script>
On controller:
public function view_div() {
/*Array of checked checkbox value*/
$rgn = $this->input->post('filterbyregion');
print_r($rgn);
}
Upvotes: 1
Reputation: 26
I can't fully figure out what you're trying to do. It looks like with this stuff: $("#sangli").change(function() { });
you are trying to assign the event listener, but you put it inside a function called updateregion() which gets called when you click the checkbox.
I think you need to move the .change() functions outside of your updateregion function. I really can't tell what you're trying to do there though.
My web console was telling me that the updateregion() function wasn't defined, so maybe you want to put that js in the beginning of your file, put it all inside this:
$(document).ready(function(){
//assign event listeners here
});
this will ensure that nothing happens until the document is fully loaded. Otherwise part of your javascript might execute before the full page is loaded.
Use firefox and under tools->Web developer->web console you will get more info. Also, check your php error logs, usually in /var/log/apache2/error.log. In linux you can use the "tail -f error.log" command to see the last 20 lines or so.
I also wouldn't be surprised if something was being lost here: $this->input->post('filterbyregion')
Why not just $_POST['filterbyregion']?
If you didn't try to do many different actions in one line, but rather just one action, it would be alot easier for your to dissect where the error is actually occuring.
Upvotes: 1