PDA

View Full Version : Help with forms!



theaquapolis
Mar 9th, 2007, 04:57 PM
I apologize beforehand - I'm an amateur to coding. I know some, but I'm sure not as much as everyone else on this forum, so bear with me. I actually posted this in HTML and was routed to this forum instead, so there's your proof, haha.

I need some help with a form I'm trying to create. What the form involves is a drop down menu and multiple large text areas. The first selection is made in the drop down menu, and that selection returns a different body of text in each text area. An example might be a drop down menu of presidents. Then there's 4 boxes, one "Early years," another "Young Adult," one "Presidential Years" and another "Later years." Pick Teddy Roosevelt and the text corresponding to his early years will pop up in the "Early Years" box and young adult years in the "Young Adult" box and so on and so forth.

Thanks so much! I appreciate the help!

vwphillips
Mar 9th, 2007, 05:59 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function Presidents(obj){
var textareas=document.getElementById('Display').getElementsByTagName('TEXTAREA')
var source=document.getElementById(obj.value).childNodes;
var cnt=0;
for (var zxc0=0;zxc0<source.length;zxc0++){
if (source[zxc0].nodeType==1){
textareas[cnt++].value=source[zxc0].innerHTML;
}
}


}
//-->
</script></head>



<body>
<select onchange="Presidents(this);">
<option value="Default" >Presidents</option>
<option value="TeddyRoosevelt" >Teddy Roosevelt</option>
<option value="RonaldReagen" >Ronald Reagen</option>

</select>

<br>
<div id="Display" >
Early years<br>
<textarea ></textarea><br>
Young Adult<br>
<textarea ></textarea><br>
Presidential Years<br>
<textarea ></textarea><br>
Later years.<br>
<textarea ></textarea><br>
</div>

<div id="Default" style="position:absolute;visibility:hidden;" >
<div ></div>
<div ></div>
<div ></div>
<div ></div>

</div>
<div id="TeddyRoosevelt" style="position:absolute;visibility:hidden;" >
<div >Teddy Roosevelt Early Years</div>
<div >Teddy Roosevelt Young Adult</div>
<div >Teddy Roosevelt Presidential Years</div>
<div >Teddy Roosevelt Later years.</div>

</div>
<div id="RonaldReagen" style="position:absolute;visibility:hidden;" >
<div >Ronald Reagen Early Years</div>
<div >Ronald Reagen Young Adult</div>
<div >Ronald Reagen Presidential Years</div>
<div >Ronald Reagen Later years.</div>

</div>
</body>

</html>

theaquapolis
Mar 9th, 2007, 08:01 PM
That is exactly what I was looking for! Thanks Vic!

theaquapolis
Mar 12th, 2007, 02:54 AM
I just posted this in the HTML section... but it was brought to my attention that it would be better in the Javascript forum and it would probably be best to attach it to the original idea to put it in context.

"I'm looking to put a function on a webpage with several textareas on it. What I would like is a button that prints (with a printer, not print in the javascript function term) out the text. And would there be a way to organize how it will be printed out, because some of the textareas are scrolling, so printing the entire page wouldn't work... I'd like it to just print out just the text - kind of like the "printable version" that is employed on numerous sites..."

So... now, to print out those areas of text in an unjumbled fashion?

vwphillips
Mar 12th, 2007, 03:16 AM
did you want to print out the whole page or just the text areas?

theaquapolis
Mar 14th, 2007, 12:30 AM
Just those text areas

vwphillips
Mar 14th, 2007, 01:35 AM
IE only for some reason but no time to fix at the moment.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Common Functions
// By Vic Phillips (12-March-2007) http://www.vicsjavascripts.org.uk


// Functional Code - No Need to Change


function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}

function zxcBdyWH(){
if (document.body.scrollHeight>document.body.offsetHeight){ return [document.body.scrollWidth,document.body.scrollHeight]; }
return [document.body.offsetWidth,document.body.offsetHeight];
}




//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--

function PrintTextAreas(){
var tas=document.getElementsByTagName('BODY')[0].getElementsByTagName('TEXTAREA')
var txt='';
for (var zxc0=0;zxc0<tas.length;zxc0++){
txt+='TextArea '+zxc0+'<BR>'+tas[zxc0].value.replace(/\n/g,'<BR>')+'<BR><BR>';
}
var taprint=document.getElementById('PrintDiv');
var ht=Math.max(zxcWWHS()[1],zxcBdyWH()[1]);
taprint.style.visibility='visible';
taprint.style.width=zxcWWHS()[1]+'px';
taprint.style.height=ht+'px';
var div=taprint.getElementsByTagName('DIV')[0];
div.style.borderLeft='solid #ffffff '+zxcWWHS()[0]+'px';
div.style.height=ht+'px';
var div=taprint.getElementsByTagName('DIV')[1];
div.style.width=zxcWWHS()[1]+'px';
div.style.height=ht+'px';
div.innerHTML=txt;
window.print();
taprint.style.visibility='hidden';
}

//-->
</script></head>

<body>
<textarea>
Tom
Dick
Harry
Joe
William
</textarea>
<textarea>
Tom
Dick
Harry
Joe
William
</textarea>

<input type="button" name="" value="Print" onclick="PrintTextAreas();">
<div id="PrintDiv" style="position:absolute;visibility:hidden;top:0px;left:0px;" >
<div style="position:absolute;width:1px;border-Left:solid red 100px;" ></div>
<div style="position:absolute;" ></div>
</div>

</body>

</html>