...

View Full Version : Toggling textarea with radio button...couple issues...



Errica
05-06-2008, 12:53 PM
Is it possible to modify this so that when you click yes, the textarea AND the "No" radio button appears? Then if you click No, the No AND the textarea are hidden once again? Here's what I have thus far...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<title>Untitled</title>
<script type="text/javascript">
//<![CDATA[
function toggleSubmit(radio)
{
var submit = document.getElementById('submit');
var textarea = document.getElementById('Address');
submit.value = (radio.checked) ? 'Send' : 'Send';
textarea.style.display = (submit.value == 'Send') ? 'block' : 'none';
}
//]]>
</script>
</head>
<body>
<form id="form1" action="#" method="post">
<div>
<ul>
<li>Would you like to be notified of special offers that we might have from time to time?<br />
<input id="Offers" name="Offers" type="radio" value="Yes" onclick="toggleSubmit(this);"/> <label for="Offers">Yes</label><br />
<textarea id="Address" name="Address" cols="38" rows="3" style="display:none;" onfocus="this.value=''; return false;">Enter address</textarea></li><br />
<input id="submit" name="submit" type="submit" value="Send" />
</ul>
</div>
</form>
</body>
</html>

abduraooft
05-06-2008, 01:33 PM
For the above explained requirement, IMO, a checkbox is the best suited. You could test the checked property to toggle the display of textarea.

Errica
05-06-2008, 01:42 PM
Agreed. How then could it disappear when you uncheck it?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<title>Untitled</title>
<script type="text/javascript">
//<![CDATA[
function toggleSubmit(chkbox)
{
var submit = document.getElementById('submit');
var textarea = document.getElementById('Address');
submit.value = (chkbox.checked) ? 'Send' : 'Send';
textarea.style.display = (submit.value == 'Send') ? 'block' : 'none';
}
//]]>
</script>
</head>
<body>
<form id="form1" action="#" method="post">
<div>
<ul>
<li>Would you like to be notified of special offers that we might have from time to time?<br />
<input id="Offers" name="Offers" type="checkbox" value="Yes" onclick="toggleSubmit(this);"/> <label for="Offers">Yes</label><br />
<textarea id="Address" name="Address" cols="38" rows="3" style="display:none;" onfocus="this.value=''; return false;">Enter address</textarea></li><br />
<input id="submit" name="submit" type="submit" value="Send" />
</ul>
</div>
</form>
</body>
</html>

abduraooft
05-06-2008, 01:46 PM
function toggleSubmit(objChk)
{
var textarea = document.getElementById('Address');
textarea.style.display= objChk.checked? 'block':'none';
}
Do you want to completely disappear the checkbox and confuse your users ? ;)


Or like

function toggleSubmit(objR)
{

var textarea = document.getElementById('Address');
textarea.style.display= objR.value=='Yes'? 'block':'none';
}

<ul>
<li>Would you like to be notified of special offers that we might have from time to time?<br />
Yes<input name="Offers" type="radio" value="Yes" onclick="toggleSubmit(this);"/>
No <input name="Offers" type="radio" value="No" onclick="toggleSubmit(this);"/>

<textarea id="Address" name="Address" cols="38" rows="3" style="display:none;" onfocus="this.value=''; return false;">Enter address</textarea></li><br />
<input id="submit" name="submit" type="submit" value="Send" />
</ul>

Errica
05-06-2008, 02:16 PM
Ugh...just got word that I need to also add an input for email address. Can this be in the toggle as well?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<title>Untitled</title>
<script type="text/javascript">
//<![CDATA[
function toggleSubmit(objR)
{

var textarea = document.getElementById('Address');
textarea.style.display= objR.value=='Yes'? 'block':'none';
}
//]]>
</script>
</head>
<body>
<form id="form1" action="#" method="post">
<div>
<ul>
<li>Would you like to be notified of special offers that we might have from time to time?<br />
Yes<input name="Offers" type="radio" value="Yes" onclick="toggleSubmit(this);"/>
No <input name="Offers" type="radio" value="No" onclick="toggleSubmit(this);"/> <br />
<input name="Email" type="text" onFocus="if(this.value=='Enter Email Address')value=''" onBlur="if(this.value=='')value='Enter Email Address';" value="Enter Email Address" maxlength="100">
<textarea id="Address" name="Address" cols="38" rows="3" style="display:none;" onFocus="if(this.value==this.defaultValue)value=''" onBlur="if(this.value=='')value=this.defaultValue;">Enter mailing address</textarea></li><br />
<input id="submit" name="submit" type="submit" value="Send" />
</ul>
</div>
</form>
</body>
</html>

abduraooft
05-06-2008, 02:23 PM
Put them in a container div and control its display, rather than controlling each element.

BTW, try to hide them via javascript in the onload of the document rather than putting it in the default style, otherwise people having no javascript support will face some accessibility issues.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum