CODEWITHSUNDEEP
javascriptjqueryajaxcheckbox
Rakhi
Rakhi

Reputation: 929

JQuery Multicheckbox value in ajax data

I have issue with getting value of checkbox in ajax data it shows undefined variable. I use below checkboxes, I get value in alert but it does not pass in ajax

<input type="checkbox" name="tick_if_apply[]" id="NEA"  value=""  class="tick_if_apply">
<input type="checkbox" name="tick_if_apply[]" id="CCJ"  class="tick_if_apply" value="6years">

Here is my code

<script>
$na= jQuery.noConflict();
$na(document).ready(function(){ 
$na('.continue_btn').click(function(){
 var title=$na("#title").val();
var firnstname=$na("#firnstname").val();
var lastname=$na("#lastname").val();
var dob=$na("#dob").val();
var gender=$na("#gender").val();
var addr1=$na("#addr1").val();
var addr2=$na("#addr2").val();
var addr3=$na("#addr3").val();
var city=$na("#city").val();
var country=$na("#country").val();
var pcode =$na("#pcode").val();
var region=$na("#region").val();
var adyears=$na("#adyears").val();
var admonths=$na("#admonths").val();
var livingstatus=$na("#livingstatus").val();
var qualification=$na("#qualification").val();
var empstatus=$na("#empstatus").val();
var visadate=$na("#visadate").val();
var exforce=$na("#exforce").val();
var crmrecord=$na("#crmrecord").val();
var hwsmloan=$na("#hwsmloan").val();
var appforloan=$na("#appforloan").val();

  $na('.tick_if_apply:checked').each(function(){
         var tick_if_apply=$na(this).val();
         alert(tick_if_apply);

    });


             $na.ajax({
                         type: "POST",
                         url: '<?php bloginfo('template_url')?>/app_process.php',
                 data: 'title='+title+'&firnstname='+firnstname+'&lastname='+lastname+'&dob='+dob+'&gender='+gender+'&addr1='+addr1+'&addr2='+addr2+
                '&addr3='+addr3+'&city='+city+'&country='+country+'&pcode='+pcode+'&region='+region+'&adyears='+adyears+'&admonths='+admonths+'&livingstatus='+livingstatus+
                '&qualification='+qualification+'&empstatus='+empstatus+'&visadate='+visadate+'&exforce='+exforce+'&crmrecord='+crmrecord+'&hwsmloan='+hwsmloan+'&appforloan='+appforloan+'&tick_if_apply='+tick_if_apply,

                         cache: false,
                         success: function(result){ alert(result);}

                                       });
                }); 
 });
</script>

Upvotes: 1

Views: 206

Answers (1)

adeneo
adeneo

Reputation: 318212

There has to be an easier way to get that data to the serverside, I'd suggest adding a common class (like .ajax_elements) to all the elements you're trying to get the value of, and then iterating over those elements and getting the ID and the value.

To get the value of all ticked checkboxes, iterate and store the values in an array, and send them with the data object :

jQuery(function($){ 
    var data  = {},
        ticks = [];

    $('.ajax_elements').each(function(_, elem) {
        data[this.id] = this.value;
    });

    $('.tick_if_apply').each(function(_, tick) {
        if (this.checked) ticks.push(this.value);
    });

    data['tick_if_apply'] = ticks;

    $.ajax({
        type  : 'POST',
        url   : '<?php bloginfo('template_url')?>/app_process.php',
        data  : data,
        cache : false
    }).done(function(result) {
        console.log(result);
    });
});

Upvotes: 1

Related Questions