Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    252
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Toggling textarea with radio button...couple issues...

    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...

    Code:
    <!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>
    Last edited by Errica; 05-06-2008 at 12:58 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    For the above explained requirement, IMO, a checkbox is the best suited. You could test the checked property to toggle the display of textarea.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Posts
    252
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Agreed. How then could it disappear when you uncheck it?

    Code:
    <!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>

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Code:
    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 ?

    Edit:
    Or like
    Code:
    function toggleSubmit(objR)
        {
          
          var textarea = document.getElementById('Address');
    	  textarea.style.display= objR.value=='Yes'? 'block':'none';
        }
    Code:
    <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>
    Last edited by abduraooft; 05-06-2008 at 01:52 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Errica (05-06-2008)

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Posts
    252
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Ugh...just got word that I need to also add an input for email address. Can this be in the toggle as well?

    Code:
    <!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>

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    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.
    Last edited by abduraooft; 05-06-2008 at 02:26 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    tomws (05-06-2008)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •