show hide textbox if checkbox checked

  • (2 Pages)
  • +
  • 1
  • 2

19 Replies - 12198 Views - Last Post: 24 October 2011 - 05:11 PM

#1 iheartbreakz  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 137
  • Joined: 27-April 11

show hide textbox if checkbox checked

Posted 22 October 2011 - 09:51 PM

how do i make it like if the checkbox is checked.. it gets replaced by a textbox
like in tinypic.com

i have tried using this:

	<script>
function ShowHide(chk,txt)
    {           
        if(document.getElementById(chk).checked)   
            document.getElementById(txt).style.display=''; 
        else
            document.getElementById(txt).style.display='none';   
    }
	</script>


Is This A Good Question/Topic? 0
  • +

Replies To: show hide textbox if checkbox checked

#2 satis  Icon User is offline

  • D.I.C Head

Reputation: 82
  • View blog
  • Posts: 231
  • Joined: 26-May 11

Re: show hide textbox if checkbox checked

Posted 22 October 2011 - 09:59 PM

What's wrong with what you tried? Seems like it would work, assuming the values passed were correct. Passing references to the actual HTML elements rather than their IDs would be more elegant (imo), but what you have should work.
Was This Post Helpful? 0
  • +
  • -

#3 iheartbreakz  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 137
  • Joined: 27-April 11

Re: show hide textbox if checkbox checked

Posted 23 October 2011 - 05:32 AM

its getting a new textbox.. i want the checkbox to be replaced by the textbox once the checkbox is checked
Was This Post Helpful? 0
  • +
  • -

#4 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: show hide textbox if checkbox checked

Posted 23 October 2011 - 07:53 AM

I'm having trouble understanding why you would want to do it this way, but...
<!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
function $_(IDS) { return document.getElementById(IDS); }
function toggle(Info) {
  var CState = $_(Info);
  if (CState.style.display != "none") { CState.style.display = "none"; }
                                 else { CState.style.display = "block"; }
}
function HideElem(IDS1, IDS2) {
  toggle(IDS1);
  toggle(IDS2);
}
</script>
</head>
<body>
<span id="CBox0">
<input type="checkbox" name="CBox0" value="A" onchange="HideElem('CBox0','TBox0')">CBox A
</span>
<input type="text" id="TBox0" name="TBox0" value="Text Box" style="display:none">
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#5 iheartbreakz  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 137
  • Joined: 27-April 11

Re: show hide textbox if checkbox checked

Posted 23 October 2011 - 08:25 AM

I'm trying to do that for my email field for my uploading site so ut looks better.. But thanks I will try it out once I get home
Was This Post Helpful? 0
  • +
  • -

#6 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: show hide textbox if checkbox checked

Posted 23 October 2011 - 11:00 AM

View Postiheartbreakz, on 23 October 2011 - 09:25 AM, said:

I'm trying to do that for my email field for my uploading site so ut looks better.. But thanks I will try it out once I get home


Keep in mind that once user makes the selection,
there is no reverse until a 'reload' of the page occurs, ie, they can not change their mind.
Was This Post Helpful? 1
  • +
  • -

#7 iheartbreakz  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 137
  • Joined: 27-April 11

Re: show hide textbox if checkbox checked

Posted 23 October 2011 - 02:38 PM

exactly what i wanted.. thanks alot imma edit it into my codes and keep you updated :)
Was This Post Helpful? 0
  • +
  • -

#8 iheartbreakz  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 137
  • Joined: 27-April 11

Re: show hide textbox if checkbox checked

Posted 23 October 2011 - 03:08 PM

one question everytime i check the checkbox.. it opens the textbox in a different like

<body>
Share:<span id="share">
<input type="checkbox" name="share" value="A" onchange="HideElem('share','myemail')">
</span><input type="text" id="myemail" name="myemail" size="40" style="display:none">
</body>

i have edited the code abit to fit my needs.. i want "share:" to be there as it is just the checkbox replacing with the textbox

thanks for all your help
Was This Post Helpful? 0
  • +
  • -

#9 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: show hide textbox if checkbox checked

Posted 23 October 2011 - 04:00 PM

I don't understand the 1st sentence in your last post.

What is not working right?
Was This Post Helpful? 0
  • +
  • -

#10 iheartbreakz  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 137
  • Joined: 27-April 11

Re: show hide textbox if checkbox checked

Posted 23 October 2011 - 04:34 PM

Posted Image

after i check the checkbox, the textbox starts on a new line

this is the code i used

<body>
Share:<span id="share">
<input type="checkbox" name="share" value="A" onchange="HideElem('share','myemail')">
</span><input type="text" id="myemail" name="myemail" size="40" style="display:none">
</body>

Was This Post Helpful? 0
  • +
  • -

#11 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: show hide textbox if checkbox checked

Posted 23 October 2011 - 05:15 PM

Change to this...
<!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
function $_(IDS) { return document.getElementById(IDS); }
function toggle(Info) {
  var CState = $_(Info);
  if (CState.style.display != "none") { CState.style.display = "none"; }
                                 else { CState.style.display = "inline"; }
}
function HideElem(IDS1, IDS2) {
  toggle(IDS1);
  toggle(IDS2);
}
</script>
</head>
<body>
Share: <span id="share">
<input type="checkbox" name="share" value="A" onchange="HideElem('share','myemail')">
</span><input type="text" id="myemail" name="myemail" size="40" style="display:none">
</body>

</html>

One line change
Was This Post Helpful? 0
  • +
  • -

#12 iheartbreakz  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 137
  • Joined: 27-April 11

Re: show hide textbox if checkbox checked

Posted 23 October 2011 - 05:43 PM

problem solved and also this would be additional.. nothing that important but would be great if solved will help me align my textboxes on my site...

when the checkbox is checked the textbox appears and moves "share:" to the left a bit making my other textbox not align properly.. is there anyway i can hold "share:" firm so it doesnt move and if textbox needs more space it takes space from the right side not the left side
Was This Post Helpful? 0
  • +
  • -

#13 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: show hide textbox if checkbox checked

Posted 23 October 2011 - 09:13 PM

I don't see the problem with code I posted,
but you haven't shown your code or a live site to look at...???

Possible solution:
Put another <span> or <div> or <p> tag around the WHOLE display code
and set the width to maximum desired using a bit more CSS settings.
Was This Post Helpful? 0
  • +
  • -

#14 iheartbreakz  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 137
  • Joined: 27-April 11

Re: show hide textbox if checkbox checked

Posted 23 October 2011 - 09:51 PM

View PostJMRKER, on 23 October 2011 - 09:13 PM, said:

I don't see the problem with code I posted,
but you haven't shown your code or a live site to look at...???

Possible solution:
Put another <span> or <div> or <p> tag around the WHOLE display code
and set the width to maximum desired using a bit more CSS settings.


http://technsoupport.info/upload
Notice how share: moves to a left a bit when the textbox appears
Was This Post Helpful? 0
  • +
  • -

#15 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: show hide textbox if checkbox checked

Posted 24 October 2011 - 06:50 AM

View Postiheartbreakz, on 23 October 2011 - 10:51 PM, said:

View PostJMRKER, on 23 October 2011 - 09:13 PM, said:

I don't see the problem with code I posted,
but you haven't shown your code or a live site to look at...???

Possible solution:
Put another <span> or <div> or <p> tag around the WHOLE display code
and set the width to maximum desired using a bit more CSS settings.


http://technsoupport.info/upload
Notice how share: moves to a left a bit when the textbox appears


Link is broke. :whistling:
Was This Post Helpful? 0
  • +
  • -
  • (2 Pages)
  • +
  • 1
  • 2