I have a page that uses a JQuery slider to display the same form several times using a while loop. So that I can get each form to validate independently I assigned a variable $i to it's ID and then added 1 to $i at the end of the form ready to be used as the ID for the next form.
This works well until I try to disable 4 of the 5 select menus in the form. I am trying to use the value of the select with the ID grade to either disable or enable the selects with ID's of positioning_reason, exposure_reason, patient_reason, equipment_reason.
To achieve this on other pages I have used:
<script type="text/javascript">
$(document).ready(function() {
$('#positioning_reason').attr('disabled','disabled').css('color','#F0F0F0');
$('#exposure_reason').attr('disabled','disabled').css('color','#F0F0F0');
$('#patient_reason').attr('disabled','disabled').css('color','#F0F0F0');
$('#equipment_reason').attr('disabled','disabled').css('color','#F0F0F0');
$('.reason').css('color','#F0F0F0');
$('#grade').change(function () {
var selected = $(this).find(':selected').val();
if(selected == 1) {
$('#positioning_reason').attr('disabled','disabled').css('color','#F0F0F0');
$('#exposure_reason').attr('disabled','disabled').css('color','#F0F0F0');
$('#patient_reason').attr('disabled','disabled').css('color','#F0F0F0');
$('#equipment_reason').attr('disabled','disabled').css('color','#F0F0F0');
$('.reason').css('color','#F0F0F0');
} else {
$('#positioning_reason').attr('disabled',false).css('color','#000');
$('#exposure_reason').attr('disabled',false).css('color','#000');
$('#patient_reason').attr('disabled',false).css('color','#000');
$('#equipment_reason').attr('disabled',false).css('color','#000');
$('.reason').css('color','#000');
}
});
});
</script>
However, on this page it doesn't work at all except for the first form.
If I add var i = 2; to the above function and add <? echo $i; ?> to the end of all of the relevant ID's in both the form and the above function, the function will work on the second page of the form but on none of the others.
I have realised that what I need to do it somehow get the value of $i into var i and I have used var i = <? echo $i; ?>; but it doesn't store the value of $i. I have even tried putting:
echo '<script>';
echo '<i = '.$i.';'; ?>
echo '</script>';
Within the while loop that is used to create the tables right under the $i++; that is used to create the $i for the unique ID's but it doesn't have the new value when used in the JavaScript function.
A cut down version of the form
$i = 1;
while($row = $result->fetch_assoc()) {
<form name="audit_form<? echo $i; ?>" id="audit_form<? echo $i; ?>" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" onsubmit="return saveScrollPositions(this);">
<input type="hidden" name="form" value="<? echo $i; ?>">
<table id="audit_table<? echo $i; ?>">
<? $form = $_POST['form']; ?>
<tr>
<td><? echo $i.' of '.$num_images; ?></td>
<td><input type="submit" name="image_delete" value="" onClick="return delete_confirm()" /></td>
<td>
<img id="image<? echo $i; ?>" src="<? echo $row['imageLocation']; ?>"</td>
</tr>
<tr>
<td>1. Select a Grade</td>
</tr>
<tr>
<td colspan="2">
<select name="grade" id="grade" >
<option value="1"
<? if(($form == $i)&&($_POST['grade']=='1')){
echo 'selected';
}else if($row['imageGrade']=='1'){
echo 'selected';}
?>>1 - Perfect</option>
<option value="2"
<? if(($form == $i)&&($_POST['grade']=='2')){
echo 'selected';
}else if($row['imageGrade']=='2'){
echo 'selected';}
?>>2 - Diagnostic</option>
<option value="3"
<? if(($form == $i)&&($_POST['grade']=='3')){
echo 'selected';
}else if($row['imageGrade']=='3'){
echo 'selected';}
?>>3 - Unusable</option>
</select>
</td>
</tr>
<tr>
<td>2. Reasons if not Grade 1</td>
</tr>
<tr>
<td colspan="2"><b>If Positioning</b>
</td>
</tr>
<tr>
<td colspan="2">
<select name="positioning_reason" id="positioning_reason">
<option value="">Please Select</option>
<?
$sql_positioning = "SELECT * FROM gradeReason WHERE reason_userID = $user_id AND category = 'positioning' AND current = 1";
$result2 = mysqli_query($mysqli,$sql_positioning) or die(mysqli_error($mysqli));
while($row_positioning = mysqli_fetch_array($result2)){?>
<option value="<? echo $row_positioning['reason_name']; ?>"
<? if(($form == $i)&&($_POST['positioning_reason']==$row_positioning['reason_name'])){
echo 'selected';
}else if($row['positioning_reasonID']==$row_positioning['reason_name']){
echo 'selected';}
echo'>'.ucfirst(preg_replace_callback("/[a-zA-Z]+/",'ucfirst_some',$row_positioning['reason_name'])); ?></option>
<?
}
?>
</select>
</td>
</tr>
<tr>
<td colspan="2"><b>If Exposure</b></td>
</tr>
<tr>
<td colspan="2" class="reason">
//second select menu here
</td>
</tr>
<tr>
<td colspan="2"><b>If Patient</b></td>
</tr>
<tr>
<td colspan="2" class="reason">
//third select menu here
</td>
</tr>
<tr>
<td colspan="2"><b>If Equipment</b></td>
</tr>
<tr>
<td colspan="2" class="reason">
//fourth select menu
</td>
</tr>
<tr>
<td>
<input type="submit" id="audit_submit" name="audit_submit" class="audit_submit audit_submit_btn" onClick="return validateForm(this.form)" value="" /></td>
</tr>
</table>
</form>
<?
$i++;
}
?>
Please note that I am not having any problems with the form or the table and if there are elements missing it is because I haven't post the whole form because it is huge. I have posted the cut down version so that you can see how the variable $i is used.
I am simply looking for a way to stop the user from being able to select anything from the positioning, exposure, patient or equipment select menus if the grade select menu has a value of 1.
First thing yo need to fix is the id attributes in your inputs, remember you can't have multiple elements with same id in a HTML page and right now you're only appending $i to the form and the table.
Since I see you want to perform the same actions on all your selects, I would suggest you remove the ids altogether and just set a common class to all, i.e. reason_select.
So you'd have your <select> tags look like this:
<select name="positioning_reason" class="reason_select">
Then the jQuery code becomes so much simpler
UPADTE If you want to perform the check on page load you can do this:
$(document).ready(function() {
function disableSelects(){
//Find the parent table
var $parentTable = $(this).closest('table');
//Get the selected value
var selected = $(this).find(':selected').val();
if(selected == "1") {
//Find selects inside parent table and disable them
$parentTable.find('.reason_select, .reason').css('color','#F0F0F0');
$parentTable.find('.reason_select').prop('disabled',true);
}else{
//Find selects inside parent table and remove disabled state
$parentTable.find('.reason_select, .reason').css('color','#000');
$parentTable.find('.reason_select').prop('disabled',false);
}
}
//Check on page load and after change on the inputs
$('select[name="grade"]').each(disableSelects).change(disableSelects);
});