Quick Question from a Newbie!

jamesjackson

if i have the following

<html>

</html>

to start with all of the text fields are readonly(or hidden) ... and what I would like the user to do allow the user to choose the number of rows to edit(or make visible)..

for example when the user selects "3box" from the drop down menu, the first 3 rows of text boxes become editable(or viewable) ... if the user chooses 4box, then the first 4 rows of text fields become editable(or viewable)..

your help is greatly appreciated.

NogDog

This would need to be done client-side, so would not really be a PHP issue; you'd probably use JavaScript to do it. (A PHP-only solution would require that you submit the form after making the selection from the select widget, then redisplaying the page with the desired input elements enabled.)

bradgrafelman

Seems like some simple JS could do this for you, assuming you could make a few modifications to the structure of your HTML. Here's the JS:

<script type="text/javascript">
function enable(num) {
    for(var i=1; i <= num; i++)
        if(document.getElementById('box' + i))
				    document.getElementById('box' + i).readOnly = false;
		for(i; document.getElementById('box' + i); i++)
		    document.getElementById('box' + i).readOnly = true;
}
</script>

and here's the modified HTML I was working with:

<select name="Choose number of levels" onchange="enable(this.value)">
<option value="none" selected="selected">&nbsp;</option>
<option value="1">1box</option>
<option value="2">2box</option>
<option value="3">3box</option>
<option value="4">4box</option>
<option value="5">5box</option>
</select>

<input type="text" name="1" id="box1" readonly ="true" size="6" >
<input type="text" name="2" id="box2" readonly = "true" size="6" >
<input type="text" name="3" id="box3" readonly = "true" size="6" >
<input type="text" name="4" id="box4" readonly = "true" size="6" >
<input type="text" name="5" id="box5" readonly = "true" size="6" >

bogu

Another approach:

<select onchange="DrawBoxes(this);">
	<option value="0">select nr boxes</option>
	<option value="1">1 box</option>
	<option value="2">2 box</option>
	<option value="3">3 box</option>
	<option value="4">4 box</option>
	<option value="5">5 box</option>
	<option value="6">6 box</option>
</select>
<div id="boxes"></div>

<script>
function DrawBoxes(cmb) {
	var box_area = document.getElementById('boxes');
	/* empty the area where the box will apear */
	box_area.innerHTML = "";

/* get the selected value */
var nr_boxes = parseInt(cmb.options[cmb.selectedIndex].value);
for (i=0; i<nr_boxes;i++) {
	box = CreateBox();
	box_area.appendChild(box);
}
}
function CreateBox() {
	var box = document.createElement("input");
	box.setAttribute('type','text');	
	box.setAttribute('name','box[]');
	return box;	
}
</script>