My HTML is :
<div id="students">
<div class="field">
<label>
<input type="checkbox" name="pupil[a]" value="a" id="pupil"/>
Pupil A
</label>
</div>
<div class="field">
<label>
<input type="checkbox" name="pupil[b]" value="b" id="pupil"/>
Pupil B
</label>
</div> <div class="field">
<label>
<input type="checkbox" name="pupil[c]" value="c" id="pupil"/>
Pupil C
</label>
</div>
<div id="occupation">
<div class="field">
<label>
<input type="checkbox" name="occupation[Software]" value="Software" id="occupation"/>
Software
</label>
</div>
<div class="field">
<label>
<input type="checkbox" name="occupation[Marketing]" value="Marketing" id="occupation"/>
Marketing
</label>
</div>
<div class="field">
<label>
<input type="checkbox" name="occupation[Teacher]" value="Teacher" id="occupation"/>
Teacher
</label>
</div>
</div>
My jQuery:
$(document).ready(function(){
$(":checkbox").on('change', function() {
var myval = [];
var theval =[];
$(':checkbox:checked').each(function(i){
myval[i] = $(this).attr('name');
theval[i] = $(this).val();
$.ajax({
type: "POST",
url: 'draftdata.php',
data : {myval:theval},
success: function(data){
$("#result").html(data);
}
});
});
});
});
The var myval seems to be sent to php as myval and not the actual value, i.e. name of the attribute. When I check Software, Marketing and Teacher and on draftdata.php do a print_r($_POST),I get:
Array
(
[myval] => Array
(
[0] => Software
[1] => Marketing
[2] => Teacher
)
)
But I am expecting to get:
Array
(
[0] => 'occupation' = 'Software'
[1] => 'occupation' = 'Marketing'
[2] => 'occupation' = 'Teacher'
)
What am i doing wrong?