I've created a form that is being populated from a database.
The results appear on screen and by default I disable all the form fields except the initial dropdown list on each row.
Changing the value of the dropdown list should enable or disable the form fields on that specific row. This works for the first row only, but not the subsequent rows.
I think this is because I'm only referencing the first row, but I'm to sure how to change this..
This what I've got so far.. bare in mind this is only 2 rows, the live data could present lots of rows.
<html>
<head>
<title>test</title>
<script src="jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#option').change(function(){
if($(this).val()=="2"){
$("#name").removeAttr("disabled");
$("#id").removeAttr("disabled");
$("#home").removeAttr("disabled");
$("#active").removeAttr("disabled");
}
if($(this).val()!="2"){
$("#name").attr("disabled", "disabled");
$("#id").attr("disabled", "disabled");
$("#home").attr("disabled", "disabled");
$("#active").attr("disabled", "disabled");
}
});
});
</script>
</head>
<body>
<form id='usr' method='post' action='test.php'>
<table border='1' width='60%'>
<tr>
<th>Val1</th>
<th>Val2</th>
<th>Val3</th>
<th>Val4</th>
<th>Val5</th>
<th>Val6</th>
</tr>
<tr align='center'>
<td>
<select name='option' id='option' />
<option></option>
<option value='1'>Option1</option>
<option value='2'>Option2</option>
</select>
</td>
<td>USR1</td>
<td><input type='text' name='name[]' id='name' value='' disabled='disabled'/></td>
<td><input type='text' name='id[]' id='id' value='' disabled='disabled'/></td>
<td>
<select name='home[]' id='home' disabled='disabled'/>
<option value='North'>North</option>
<option value='South'>South</option>
<option value='Other'>Other</option>
</select>
</td>
<td>
<select name='active[]' id='active' disabled='disabled'/>
<option value=''></option>
<option value='1'>Yes</option>
<option value='2'>No</option>
<option value='3'>Dead</option>
<option value='4'>Other</option>
</select>
</td>
</tr>
<tr align='center'>
<td>
<select name='option' id='option' />
<option></option>
<option value='1'>Option1</option>
<option value='2'>Option2</option>
</select>
</td>
<td>USR2</td>
<td><input type='text' name='name[]' id='name' value='' disabled='disabled'/></td>
<td><input type='text' name='id[]' id='id' value='' disabled='disabled'/></td>
<td>
<select name='home[]' id='home' disabled='disabled'/>
<option value='North'>North</option>
<option value='South'>South</option>
<option value='Other'>Other</option>
</select>
</td>
<td>
<select name='active[]' id='active' disabled='disabled'/>
<option value=''></option>
<option value='1' >Yes</option>
<option value='2' >No</option>
<option value='3' >Dead</option>
<option value='4'>Other</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Can some one help me to get this to work for all rows. When selecting the dropdown at the beginning of a row it should affect that row only.
Sorted.
using the change with a class and getting the row id, then prefixing that to the id lookup used to add or remove the disabled.
Each id='name', id='id' are being updaed from the DB so they now appear as name1, id1, name2, id2.
Thanks to George for the mention of Class.
Example below..
<html>
<head>
<title>test</title>
<script src="jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.option').change(function(){
var id = $(this).closest('td').parent()[0].sectionRowIndex;
if($(this).val()=="2"){
$("#name"+id).removeAttr("disabled");
$("#id"+id).removeAttr("disabled");
$("#home"+id).removeAttr("disabled");
$("#active"+id).removeAttr("disabled");
}
if($(this).val()!="2"){
$("#name"+id).attr("disabled", "disabled");
$("#id"+id).attr("disabled", "disabled");
$("#home"+id).attr("disabled", "disabled");
$("#active"+id).attr("disabled", "disabled");
}
});
});
</script>
</head>
<body>
<form id='usr' method='post' action='test.php' ><table border='1' width='60%'><tr><th>Val1</th><th>Val2</th><th>Val3</th><th>Val4</th><th>Val5</th><th>Val6</th></tr>
<tr align='center'>
<td><select name='option' class='option' /><option></option><option value='1'>Option1</option><option value='2'>Option2</option></select></td>
<td>USR1</td>
<td><input type='text' name='name[]' id='name1' value='' disabled='disabled'/></td>
<td><input type='text' name='id[]' id='id1' value='' disabled='disabled'/></td>
<td><select name='home[]' id='home1' disabled='disabled'/><option value='North'>North</option><option value='South'>South</option><option value='Other'>Other</option></select></td>
<td><select name='active[]' id='active1' disabled='disabled'/><option value=''></option><option value='1' >Yes</option><option value='2' >No</option><option value='3' >Dead</option><option value='4'>Other</option></select></td>
</tr>
<tr align='center'>
<td><select name='option' class='option' /><option></option><option value='1'>Option1</option><option value='2'>Option2</option></select></td>
<td>USR2</td>
<td><input type='text' name='name[]' id='name2' value='' disabled='disabled'/></td>
<td><input type='text' name='id[]' id='id2' value='' disabled='disabled'/></td>
<td><select name='home[]' id='home2' disabled='disabled'/><option value='North'>North</option><option value='South'>South</option><option value='Other'>Other</option></select></td>
<td><select name='active[]' id='active2' disabled='disabled'/><option value=''></option><option value='1' >Yes</option><option value='2' >No</option><option value='3' >Dead</option><option value='4'>Other</option></select></td>
</tr>
</form></body>
</html>