On loading the page I don't want any of the textareas on the bottom showing. when clicking generate I want it to either display the top textarea or the bottom depending on wether banner was clicked or dropdown.
now both are displyaing. can someone help me fix my js code.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<script language="JavaScript" type="text/javascript">
<!--
function hidediv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="hidden";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'hidden';
else // IE 4
document.all.hideshow.divs[i].visibility = 'hidden';
}
}
}
function showdiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){
if (document.getElementById)
divs[i].style.visibility="visible";
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.hideshow.divs[i].visibility = 'visible';
}
}
}
function doIt() {
if (!document.form1.agree.checked) { alert("Please Read the guidlines and check the box below .");
return false; }
else{
for (var i=0; i < document.form1.interface.length; i++)
{
if (document.form1.interface[i].checked)
{
var rad_val = document.form1.interface[i].value;
}
}
if(rad_val="dropdown"){
showdiv('dropdown');
}
if(rad_val="banner"){
showdiv('banner');
}
alert('done')
}
}
// -->
</script>
</head>
<body>
<form name=form1>
<p><input type=radio name=interface value=banner>Banner <br><br>
</p>
<p><input type=radio name=interface value=dropdown>Drop-down menu<Br> </p>
<input type=checkbox name=agree>
Checking indicates you agree with the conditions below<Br>
<input type="button" id="go" name="go" value="Generate" onClick="doIt();return false;"/><br/>
<div id=dropdown visibility:invisible;>
<textarea name="t" id="t" readonly="1" style="width:30em;height:15ex;"></textarea>
</div>
<div id=banner visibility:invisible;>
<textarea name="tr" id="tr" readonly="1" style="width:30em;height:15ex;"></textarea>
</div>
</form>
</body>
</html>
One of the problems appears to be related to the RegExp. A regular expression is to be written in 2 ways:
- using the slash notation
var re=/substring/flag
- using the RegExp() object
var re=new RegExp('substring','flag')
flagas are optional.
Now, your case, to handle dinamically a regular expression you must use the RegExp() object, because the match() method needs a regular expression as argument, not a string;
Code:
...
var re=new RegExp(pass)
for(i=0;i<divs.length;i++){
if(divs[i].id.match(re)){
...
thanks for your help...
How can I get them to show up in teh same place. (meaning if the second options is set then I want the textarea of the second to show up in the same place as the first)
to coothead: esthera tries to referece elements which have a certain substring in their id's value string, not the precise id's value, or that is what I have understood.
And: why using the deprecated NS4 syntax or document.all? Do you think there might be someone who still has a NS4 or IE4 browser these days? Now IE and Moz and Netscape and Opera and Safari and... all of them use, at least for that kind of code, the same syntax.
thanks coothead.. that's what i want -- i see yours works but when i copy the code to my page it somehow tried submitting to teh same page instead of just returning the dropdown --why would that be?
Location: chertsey, a small town 25 miles south west of london, england.
Posts: 1,545
Thanks: 0
Thanked 195 Times in 191 Posts
Hi there esthera,
Quote:
I see that yours works but when I copy the code to my page it somehow tried submitting
to the same page instead of just returning the dropdown --why would that be?
I would have to see your page to have a chance of answering that.
By the way, if you are not really concerned about NS4 or IE4 browsers you could do it like this...
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.none {
display:none;
}
.block {
display:block;
}
#t,#tr {
width:30em;
height:15ex;
}
-->
</style>
<script type="text/javascript">
<!--
var divs=document.getElementsByTagName('div');
var rad_val=null;
window.onload=function() {
document.forms[0][3].onclick=function() {
if(!document.form1.agree.checked) {
alert('Please Read the guidlines and check the box below.');
}
else {
for(var i=0;i<document.form1.interface.length;i++) {
if(document.form1.interface[i].checked) {
rad_val=document.form1.interface[i].value;
}
}
if(rad_val==null) {
return;
}
rad_val=(rad_val=='dropdown')?showdiv('dropdown'):showdiv('banner');
}
}
}
function showdiv(pass) {
for(i=0;i<divs.length;i++) {
if(divs[i].id==pass) {
divs[i].className='block';
}
if(divs[i].id!=pass) {
divs[i].className='none';
}
}
}
// -->
</script>
</head>
<body>
<form name="form1" action="#">
<p><input type="radio" name="interface" value="banner">Banner <br /><br /></p>
<p><input type="radio" name="interface" value="dropdown">Drop-down menu<br /></p>
<input type="checkbox" name="agree">
Checking indicates you agree with the conditions below<br />
<input type="button" id="go" value="Generate"/><br/>
<div id="dropdown" class="none">
<textarea id="t" readonly="readonly" rows="1" cols="1">this is the dropdown menu</textarea>
</div>
<div id="banner" class="none">
<textarea id="tr" readonly="readonly" rows="1" cols="1">this is the banner menu</textarea>
</div>
</form>
</body>
</html>
Before you post, read our: 
