...

View Full Version : Form field to show on option click



SaddlerJJ
06-26-2012, 06:13 PM
Hi, I am currently creating a form to experiment with and I want a text input to pop up when the user chooses other on the title option.

This is my code and its not working!

Code:
<script type="text/javascript">

function showHide (id)
{
var style = document.getElementById(id).style
if (style.visibility == "hidden")
style.visibility = "visible";
else
style.visibility = "hidden";
}
</script>



</head>
<body>

<form action="confirm.php" method="post">
Title: <select name="title">
<option value="">Select...</option>
<option Value="MR">MR</option>
<option Value="MRS">MRS</option>
<option Value="Miss">Miss</option>
<option Value="MS">MS</option>
<option Value="DR">DR</option>
<option Value="Prof">Prof</option>
<option value="Other" onClick="showHide('othert');">Other</option>
</select>
<div id="othert" style="visibility:hidden;">

If Other please state: <input type="text" name="othertitle">
</div>

Need help ASAP!

Philip M
06-26-2012, 08:12 PM
Here you are:-



<script type="text/javascript">

function showHide () {
document.getElementById("othert").style.display="none";
var val = document.forms[0].title.value;
if (val == "Other") {
document.getElementById("othert").style.display="block";
}
}
</script>

</head>
<body>

<form action="confirm.php" method="post">
Title: <select name="title" onchange = "showHide()">
<option value="">Select...</option>
<option Value="MR">MR</option>
<option Value="MRS">MRS</option>
<option Value="Miss">Miss</option>
<option Value="MS">MS</option>
<option Value="DR">DR</option>
<option Value="Prof">Prof</option>
<option value="Other">Other</option>
</select>

<div id="othert" style="display:none">

If Other please state: <input type="text" name="othertitle">
</div>


</form>

You can use style visibility rather than style display if you prefer - style visibility simply hides the div, while style display adds or removes it from the page.


BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.


“Expert: a man who makes three correct guesses consecutively.” - Dr. Laurence J. Peter (American "hierarchiologist", Educator and Writer, 1919-1990)

Logic Ali
06-26-2012, 08:43 PM
<form action="confirm.php" method="post">
Title: <select id='titleSelect' name="title" >
<option value="">Select...</option>
<option Value="MR">MR</option>
<option Value="MRS">MRS</option>
<option Value="Miss">Miss</option>
<option Value="MS">MS</option>
<option Value="DR">DR</option>
<option Value="Prof">Prof</option>
<option value="Other">Other...</option>
</select>
<p>
<div id="othert" style="visibility:hidden;">
Please state title: <input type="text" name="othertitle">
</div>

<script type="text/javascript">

document.getElementById( 'titleSelect' ).onchange = function()
{
document.getElementById( "othert" ).style.visibility = ( this.value == "Other" ? "visible" : "hidden" );
}

</script>

</form>

SaddlerJJ
06-28-2012, 02:49 PM
Thank you so much! :thumbsup:

Sorry about the format , from now on I shall keep to stated rules of code format on here !

Thanks again!

SaddlerJJ
06-28-2012, 03:21 PM
Hi again ,
If I now needed to do the same for a checkbox on the page , would I simply write a new function and change parts within it , like the value and div?

Philip M
06-28-2012, 05:41 PM
Hi again ,
If I now needed to do the same for a checkbox on the page , would I simply write a new function and change parts within it , like the value and div?

What is "the same"? Please be clearer in your description. Are you trying to do something based on the value of a checkbox? What if the user selects several checkboxes? Are you sure you do not mean radio buttons?

SaddlerJJ
06-29-2012, 06:03 PM
Basically if I had just one checkbox , When this is ticked I want another form input to be revealed , If that makes sense?

Philip M
06-29-2012, 06:57 PM
<input type = "checkbox" id = "box1" onclick = "showDiv(this, 'mydiv1')">

<div id = "mydiv1" style="display:none">Some stuff in herewhich is revealed when the checkbox is checked</div>

<script type = "text/javascript">
function showDiv(which, div2show) {
which.checked? document.getElementById(div2show).style.display="inline":document.getElementById(div2show).style.display="none";
}
</script>

This will work for multriple checkboxes and <divs>.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum