I have a problem with working on multiple forms from an AJAX response that didn't working for me.
Here is the main AJAX:
$(document).ready(function() {
$('#routine').click(function(){
var ids = $.map($('#table').bootstrapTable('getSelections'), function (row) {
return row.StaffId
});
id=ids[0];
if(!ids[0])
msg("Please Select a Staff");
else{
$("#loginScreen").show();
msg('Please Wait...');
$.ajax({url: "staff.php?action=getroutine&SID="+id,
type:'GET',
success: function(s){
msgclose();
$("#contd").html(s);
},
error: function(e){
msg('Error Processing your Request!!');
}
});
}
});
});
And the staff.php file is as follows:
for($d=0;$d<6;$d++)
{
echo"<tr>
<form class='form-horizontal' role='form' id='d".($d+1)."' onsubmit='javascript: return false;'>
<td>".$days[$d]."</td><input type='hidden' id='day".($d+1)."' value='".$days[$d]."'>
<td>
<select class='form-control' id='".$days[$d]."class1' name='class1' onchange='getComb(this)'>
<option value='' selected>CLASS</option>
<option value='V'>Class V</option>
<option value='VI'>Class VI</option>
<option value='VII'>Class VII</option>
<option value='VIII'>Class VIII</option>
<option value='IX'>Class IX</option>
<option value='X'>Class X</option>
<option value='XI'>Class XI</option>
<option value='XII'>Class XII</option>
</select>
<select class='form-control' id='sec".$days[$d]."class1' name='secclass1'>
<option value='' selected>SEC</option>
</select>
<select class='form-control' id='sub".$days[$d]."class1' name='subclass1'>
<option value='' selected>SUBJECT</option>
</select>
</td>
<td>
<select class='form-control' id='".$days[$d]."class2' name='class2' onchange='getComb(this)'>
<option value='' selected>CLASS</option>
<option value='V'>Class V</option>
<option value='VI'>Class VI</option>
<option value='VII'>Class VII</option>
<option value='VIII'>Class VIII</option>
<option value='IX'>Class IX</option>
<option value='X'>Class X</option>
<option value='XI'>Class XI</option>
<option value='XII'>Class XII</option>
</select>
<select class='form-control' id='sec".$days[$d]."class2' name='secclass2'>
<option value='' selected>SEC</option>
</select>
<select class='form-control' id='sub".$days[$d]."class2' name='subclass2'>
<option value='' selected>SUBJECT</option>
</select>
</td>
<td>
<select class='form-control' id='".$days[$d]."class3' name='class3' onchange='getComb(this)'>
<option value='' selected>CLASS</option>
<option value='V'>Class V</option>
<option value='VI'>Class VI</option>
<option value='VII'>Class VII</option>
<option value='VIII'>Class VIII</option>
<option value='IX'>Class IX</option>
<option value='X'>Class X</option>
<option value='XI'>Class XI</option>
<option value='XII'>Class XII</option>
</select>
<select class='form-control' id='sec".$days[$d]."class3' name='secclass3'>
<option value='' selected>SEC</option>
</select>
<select class='form-control' id='sub".$days[$d]."class3' name='subclass3'>
<option value='' selected>SUBJECT</option>
</select>
</td>
<td>
<select class='form-control' id='".$days[$d]."class4' name='class4' onchange='getComb(this)'>
<option value='' selected>CLASS</option>
<option value='V'>Class V</option>
<option value='VI'>Class VI</option>
<option value='VII'>Class VII</option>
<option value='VIII'>Class VIII</option>
<option value='IX'>Class IX</option>
<option value='X'>Class X</option>
<option value='XI'>Class XI</option>
<option value='XII'>Class XII</option>
</select>
<select class='form-control' id='sec".$days[$d]."class4' name='secclass4'>
<option value='' selected>SEC</option>
</select>
<select class='form-control' id='sub".$days[$d]."class4' name='subclass4'>
<option value='' selected>SUBJECT</option>
</select>
</td>
<td>
<select class='form-control' id='".$days[$d]."class5' name='class5' onchange='getComb(this)'>
<option value='' selected>CLASS</option>
<option value='V'>Class V</option>
<option value='VI'>Class VI</option>
<option value='VII'>Class VII</option>
<option value='VIII'>Class VIII</option>
<option value='IX'>Class IX</option>
<option value='X'>Class X</option>
<option value='XI'>Class XI</option>
<option value='XII'>Class XII</option>
</select>
<select class='form-control' id='sec".$days[$d]."class5' name='secclass5'>
<option value='' selected>SEC</option>
</select>
<select class='form-control' id='sub".$days[$d]."class5' name='subclass5'>
<option value='' selected>SUBJECT</option>
</select>
</td>
<td>
<select class='form-control' id='".$days[$d]."class6' name='class6' onchange='getComb(this)'>
<option value='' selected>CLASS</option>
<option value='V'>Class V</option>
<option value='VI'>Class VI</option>
<option value='VII'>Class VII</option>
<option value='VIII'>Class VIII</option>
<option value='IX'>Class IX</option>
<option value='X'>Class X</option>
<option value='XI'>Class XI</option>
<option value='XII'>Class XII</option>
</select>
<select class='form-control' id='sec".$days[$d]."class6' name='secclass6'>
<option value='' selected>SEC</option>
</select>
<select class='form-control' id='sub".$days[$d]."class6' name='subclass6'>
<option value='' selected>SUBJECT</option>
</select>
</td>
<td>
<select class='form-control' id='".$days[$d]."class7' name='class7' onchange='getComb(this)'>
<option value='' selected>CLASS</option>
<option value='V'>Class V</option>
<option value='VI'>Class VI</option>
<option value='VII'>Class VII</option>
<option value='VIII'>Class VIII</option>
<option value='IX'>Class IX</option>
<option value='X'>Class X</option>
<option value='XI'>Class XI</option>
<option value='XII'>Class XII</option>
</select>
<select class='form-control' id='sec".$days[$d]."class7' name='secclass7'>
<option value='' selected>SEC</option>
</select>
<select class='form-control' id='sub".$days[$d]."class7' name='subclass7'>
<option value='' selected>SUBJECT</option>
</select>
</td>
<td>
<select class='form-control' id='".$days[$d]."class8' name='class8' onchange='getComb(this)'>
<option value='' selected>CLASS</option>
<option value='V'>Class V</option>
<option value='VI'>Class VI</option>
<option value='VII'>Class VII</option>
<option value='VIII'>Class VIII</option>
<option value='IX'>Class IX</option>
<option value='X'>Class X</option>
<option value='XI'>Class XI</option>
<option value='XII'>Class XII</option>
</select>
<select class='form-control' id='sec".$days[$d]."class8' name='secclass8'>
<option value='' selected>SEC</option>
</select>
<select class='form-control' id='sub".$days[$d]."class8' name='subclass8'>
<option value='' selected>SUBJECT</option>
</select>
</td>
<td>
<button type='submit' class='btn btn-success'>Save Change</button>
</td>
</form></tr>";
}
echo"</tbody>
</table>
</div>";
Now I have 6 form IDs d1
to d6
and in the main page I have the following functions for each form:
$(document).on('submit','#d1',function(){
var formData = $('#d1').serializeObject();
msg("FormData="+formData);
});
$(document).on('submit','#d2',function(){
var formData = $('#d2').serializeObject();
msg("FormData="+formData);
});
$(document).on('submit','#d3',function(){
var formData = $('#d3').serializeObject();
msg("FormData="+formData);
});
$(document).on('submit','#d4',function(){
var formData = $('#d4').serializeObject();
msg("FormData="+formData);
});
$(document).on('submit','#d5',function(){
var formData = $('#d5').serializeObject();
msg("FormData="+formData);
});
$(document).on('submit','#d6',function(){
var formData = $('#d6').serializeObject();
msg("FormData="+formData);
});
The SUBMIT button for each form is supposed to be showing a message with form data but they are not working. Help me please.