Forum Moderators: open
i have to create a php form, where there is multiple selection on the select option, when we select other, how to get a visible text box where user can key in the other description?
sample of code need to alter.
<form id="form1" name="form1" method="post" action="<?=$_SERVER['PHP_SELF'];?>"><p>
<select name="select">
<option value="please select one">Please select one</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="other">other</option>
</select>
<input type="text" name="textfield">
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
javascript function as follows:
function changeSelect()
{
var mdiv=document.getElementById('other');
var cdiv=document.getElementById('select');
if(cdiv.options[cdiv.selectedIndex].value=='other')
{
mdiv.style.visibility='visible';
}
else
{
mdiv.style.visibility='hidden';
}
}
HTML as follows:
.......
<select id="select" name="select" onChange="changeSelect()">
<option value"please">Please Select One</option>
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="other">Other</option>
</select>
<INPUT id="other" type="text" name="other">
...........
Why put the INPUT tag in a DIV when you can just hide the INPUT tag itself. Could just be my ignorance so please excuse me if it is.
Can hide the Input tag on load by adding the visibility: hidden; to the style of the INPUT id.
i already tried out the code u guys give me
the code is as follow where i implement in simple php echo.
----------------------------------------------------
Just try it as sample:
<?php
@$vehicle = $_POST["test"];
if ($vehicle == 3)
{
$vehicle = $_POST["other"];
}
?>
<style>
.hide{display: none;}
</style>
<script language="javascript">
function showhide(val)
{
var ge1=document.getElementById('d1');
var ge2=document.getElementById('d2');
if(val==3)
{
ge1.style.display="block";
ge2.style.display="none";
}
else
{
ge1.style.display="none";
ge2.style.display="block";
}
}
</script>
<form action="<?=$_SERVER['PHP_SELF'];?>" name="f1" id="form1" method="post">
<select name="test" onchange="showhide(this.value)">
<option value=1>Bike</option>
<option value=2>Car</option>
<option value=3>Other</option>
</select>
<div id="d1" class="hide">
<input type="text" name="other">
</div>
<div id="d2">
</div>
<input type="submit" name="Submit" value="Submit">
<?php echo $vehicle;?>
</form>
1) the problem now is, when a person hit "refresh" button in browser after they select other, the textbox is gone.
2) another problem is, when a user select other, and user key in the value in the textbox provided, after they hit submit button, the textbox is gone, and the selecttion value change to "Bike", suppose the selection value is on "other" and the text box is visible with the value that user key in.
How to solve it,
Sorry man, i'm totally idiot in javascript, i'm looking for solution since 2 weeks ago.
Please help man.
Thanks,
[edited by: encyclo at 2:23 am (utc) on May 22, 2007]
[edit reason] See Posting Guide [webmasterworld.com] [/edit]
colandy & others, why not use display none/inline on the input? That way takes up no space?
my code example..
----------------------------
Just try it as sample:
<?php
$var = $_POST['text'];
@$vehicle = $_POST["test"];
if ($vehicle == 3)
{
$vehicle = $_POST["other"];
}
?>
<style>.hide{display: none;}
</style>
<script language="javascript">
function showhide(val)
{
var ge1=document.getElementById('d1');
var ge2=document.getElementById('d2');
if(val==3)
{
ge1.style.display="block";
ge2.style.display="none";
}
else
{
ge1.style.display="none";
ge2.style.display="block";
}
}
</script>
<form action="<?=$_SERVER['PHP_SELF'];?>" name="f1" id="form1" method="post">
<select name="test" onchange="showhide(this.value)">
<option value=1 <?php if (!(strcmp("1", $_POST["test"]))) {echo "selected=\"selected\"";}?> >Bike</option>
<option value=2 <?php if (!(strcmp("2", $_POST["test"]))) {echo "selected=\"selected\"";}?> >Car</option>
<option value=3 <?php if (!(strcmp("3", $_POST["test"]))) {echo "selected=\"selected\"";}?> >Other</option>
</select>
<div id="d1" class="hide">
<input type="text" name="other">
</div>
<div id="d2">
</div>
<input type="submit" name="Submit" value="Submit">
<?php echo $vehicle;?>
</form>
Thanks,
[edited by: encyclo at 2:28 am (utc) on May 22, 2007]
I think you can test the value of the select list to show/hide the <div> tag like:
<?php
if($_POST['test']==3)
{
echo("<div id=d1>");
}
else
{
echo("<div id=d1 class=hide>");
}
?>
Hope this works for you.
Ok, using my original script:
function changeSelect()
{
var mdiv=document.getElementById('other');
var cdiv=document.getElementById('select');
if(cdiv.options[cdiv.selectedIndex].value=='other')
{
mdiv.style.visibility='visible';
}
else
{
mdiv.style.visibility='hidden';
}
}
Put the following within the Script tags, but not within the function.
window.onload=changeSelect;
Also amend the above as previously suggested so as:
mdiv.style.visibility='visible'
mdiv.style.visibility='hidden'
becomes
mdiv.style.display='block'
mdiv.style.display='none'
No variable needs to passed to the function as we are testing the Posted variable i.e. the option selected from the list.
I was looking at your original code where the function has
function ShowHide(val)
{
......
}
