[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 258
  • Last Modified:

DHTML To make a text field appear in a field

I am making a simple form. I want to add a check box that when checked makes a text box appear below it. When unchecked the field disappears.

I know its a simple process but I've seen so many ways to do it I thought I'd ask for a nice tight method. I want the structure to remain in the same form.. so hiding a div etc is likley the method I'm looking for.

TiA
0
new_to_php
Asked:
new_to_php
  • 4
  • 3
  • 2
  • +1
1 Solution
 
krunal_shahCommented:
try the code below,
<%@ Page language="c#" AutoEventWireup="false" %>
<HTML>
<HEAD>
<title>Javascript Show Hide</title>

<script language=javascript>
function showHide(checkbox,textboxId)
{
var textbox = document.getElementById(textboxId);
if(checkbox.checked)
{
textbox.style.display = '';
}
else
{
textbox.style.display = 'none';
}
}
</script>
<script language=C# runat=server>
override protected void OnInit(EventArgs e)
{
chbShowHide.Attributes.Add("onClick",string.Format ("javascript:showHide(this,'{0}');",txtShowHide.ClientID));
base.OnInit(e);
}
</script>
</HEAD>
<body >
<form id="frmShowHide" method="post" runat="server">
<asp:TextBox id="txtShowHide"
runat="server"></asp:TextBox>
<asp:CheckBox id="chbShowHide" Checked=True
runat="server"></asp:CheckBox>
</form>
</body>
</HTML>

Open in new window

0
 
new_to_phpAuthor Commented:
Sorry..

I should have mentioned I'm running PHP

I'm looking for a show hide div type DHTML code that fires when the check box is clicked
0
 
remorinaCommented:
Try this
There is no need to server side scripting
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
krunal_shahCommented:
k.. try this,

<INPUT TYPE="checkbox" NAME="switchBox"
onclick="showHideText(this,'myText')">

Next you'll need a div that contains the text you want to show/hide,
like this:

<div ID="myText">Put text here</div>

Then you'll need the javascript function to hide the text, like this:

function showHideText(boxName,divName) {
if(boxName.checked = true) {
document.getElementById(divName).style.display = 'block';
}
else {
document.getElementById(divName).style.display = 'none';
}
}

0
 
remorinaCommented:

<html>
<head>
<title>JS Example</title>
<script type="text/javascript">
    function ShowCtrl(box, el) {
        
        var elem = document.getElementById(el);
        if(box.checked) {
            elem.style.display = '';
        }
        else
        {
            elem.style.display = 'none';
        }
    }

</script>
</head>
<body >
<form id="form">
<input id="checkbox1" type="checkbox" onclick="ShowCtrl(this, 'input1')" />
<br />
<input type="text" id="input1" style="display:none;" />
</form>
</body>
</html>

Open in new window

0
 
new_to_phpAuthor Commented:
remorina,

It works but is there a way to encapsulate the label? Like in a div for instance?
0
 
remorinaCommented:
it doesn't matter where you put the elements on the page, you can also give the id you want to show/hide to a div instead of an input or label like below
<html>
<head>
<title>JS Example</title>

<script type="text/javascript">
    function ShowCtrl(box, el) {
        
        var elem = document.getElementById(el);
        if(box.checked) {
            elem.style.display = '';
        }
        else
        {
            elem.style.display = 'none';
        }
    }

</script>
</head>
<body>
<form id="form">
<input id="checkbox1" type="checkbox" onclick="ShowCtrl(this, 'input1')" />
<br />
<div id="input1" style="border:solid 1px red;display:none;padding:5px;">
<input type="text" />
</div>
</form>
</body>
</html>

Open in new window

0
 
new_to_phpAuthor Commented:
One other question.. is there a way to make it so the div etc doesn't load on refresh? It would be nice if it defaults to hidden
0
 
StealthyDevCommented:
Dear, this would be the simplest way to do that..

  <input type=checkbox checked onclick="txtBox.style.visibility = (this.checked)?'visible':'hidden'">show/hide
  <input type=text name=txtBox value="this is the box">

if you still want div to be used? try this:

  <input type=checkbox checked onclick="document.getElementById('myBoxContainer').style.visibility = (this.checked)?'visible':'hidden'">show/hide
  <span id="myBoxContainer">
  <input type=text name=txtBox value="this is the box">
  </span>

replace "span" can be replaced to "div" if you compromise line brake.

<input type=checkbox checked onclick="txtBox.style.visibility=(this.checked)?'visible':'hidden'">show/hide
  <input type=text name=txtBox value="this is the box">



<input type=checkbox checked onclick="document.getElementById('myBoxContainer').style.visibility = (this.checked)?'visible':'hidden'">show/hide
  <span id="myBoxContainer">
  <input type=text name=txtBox value="this is the box">
  </span>

Open in new window

0
 
new_to_phpAuthor Commented:
Appreciate the follow through senthurpandian

I have it figured out now.. thanks to all..
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 4
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now