PDA

View Full Version : Appearance of DIVISIONS on the fly

venkat
11-06-2003, 02:12 AM
Hi All,

I was working with XML, XSL and Javascript.Actually I wanted to generate divisions ( using div tag) on the fly?

I have this requirement.

1.When a page is loaded, there will be a drop down box
with options 1,2,3.If the user selects 1, there should
be one text field generated with two check boxes in front
of the text box.Incase the user selects 2, two similar
text fields with two check boxes for each has to be
generated.

2.In the second step, if the user checks the first check
box, a set of divisions say div 2 has to appear.Similarly
if he checks the second check box, again the same set of
divisions have to appear below the first set of div
2.Please note that duplicate divisions will appear if the
user checks both the check boxes.

Please let me know how to do this.I was able to generate when the user select it for "1" (one). Here is the sample code

<html><head>
<title>div test</title>
<script language="JavaScript">
function setAllVisible() {
document.getElementById("section1").style.visibility="hidden";
document.getElementById("section2").style.visibility="hidden";
document.getElementById("section3").style.visibility="hidden";
document.getElementById("section4").style.visibility="hidden";
document.getElementById("section5").style.visibility="hidden";
document.getElementById("section6").style.visibility="hidden";
}
</script></head>
<body onLoad='setAllVisible();'>
<br></br>
<ul>
<li><select onChange='document.getElementById("section1").style.visibility="visible";
document.getElementById("section2").style.visibility="hidden";
document.getElementById("section3").style.visibility="hidden";
document.getElementById("section4").style.visibility="hidden";'>
<option>1</option>
<option>2</option>
<option>3</option>
</select></li>
</ul><br>
<div id="section1">
<input type="text" size="25" value="Enter your name here!">
<input type="checkbox" name="1" value="Milk" onClick='document.getElementById("section5").style.visibility="visible";
document.getElementById("section2").style.visibility="hidden";
document.getElementById("section3").style.visibility="hidden";
document.getElementById("section4").style.visibility="hidden";
document.getElementById("section1").style.visibility="visible";'>&nbsp;&nbsp;&nbsp;
<input type="checkbox" name="2" value="Butter" onClick='document.getElementById("section5").style.visibility="visible";
document.getElementById("section2").style.visibility="hidden";
document.getElementById("section3").style.visibility="hidden";
document.getElementById("section4").style.visibility="hidden";
document.getElementById("section1").style.visibility="visible";'> </div>
<div id="section3">Section 3 text.</div>
<div id="section4">Section 4 text.</div>
<div id="section5"><input type="radio" name="1" value="Milk" onClick='document.getElementById("section5").style.visibility="visible";
document.getElementById("section2").style.visibility="hidden";
document.getElementById("section3").style.visibility="hidden";
document.getElementById("section4").style.visibility="hidden";
document.getElementById("section1").style.visibility="visible";
document.getElementById("section6").style.visibility="visible";'>.</div>
<div id="section2">Section 2 text.</div>
<div id="section6">Section 6 text.</div>
</body>
</html>

Please let me know if anyone has hint on this.

Thanks and Regards,
Venkatesh Gangal
ucm
11-18-2003, 10:20 AM
part of the problem is that you have the select's onchange event change the same div's to visible and hidden, change the onchange event to:

onChange="decideWhatToDo(this.value);"


then add and modify this function:

function decideWhatToDo(selectedValue){
switch(selectedValue){
case 1:

break;
case 2:

break;
case 3:

break;
}
}

don't remove the code in the function, just add what you want to happen in between the case and it's break; lines

let us know how it goes...
Vincent Puglia
11-19-2003, 01:07 PM
Hi venkat,

I am confused as to what you are attempting. You say you want to generate elements on the fly, and yet you simply change a div's visibility. You say you want 2 checkboxes followed by a textbox, and yet your div has the exact opposite. Futhermore you are using numerals for element names (a big no-no) and as a result, I have no idea as to whether selecting '2' in the selection list should simply copy 'section1' twice or create two new divs. Is each element going to have distinct values & names? Are you really talking about 3 options, and if so what happens when the user selects '3'? Are all checkboxes 'milk & butter'?

When the user selects an option, you should not be changing a pre-defined div's visibility -- because to do so implies you will need to predefine a div for each contingency -- even if it is never used. Instead, you should be generating the html that creates the div's contents.

for example (untested):

<select ....onchange="doit(this.options[this.selectedIndex].value)">
<option>Select</option>
<option value='0'>1</option>
<option value='1'>2</option>
<option value='2'>3</option>
</select>
<div id='theDiv'></div>

function doit(val)
{
var txt = ""
var chkTxt = "<input type='checkbox' name='' value=''>"
var boxTxt = "<input type='text' name='' value=''>"
switch (val)
{
case 0:
txt += chkTxt + chkTxt + boxTxt;
break;
case 1:
txt += chkTxt + chkTxt + boxTxt + '<br>' + chkTxt + chkTxt + boxTxt;
break;
}
document.getElementById('theDiv').innerHTML = txt;
}

You can then add the names & values.

Vinny