display other text field when user selects other option in selection field

**hsriat** · Jul 14 '08, 10:22 AM

There's not a one-line solution to your need. I would say you actually need to have a look at few tutorials first. Then you can come back again if you find any difficulty.

Here are the links which may help you.
HTML Dom Style Object
CSS

Check out the display property in both the links.
And there's nothing to do with AJAX in your case, unless you have to fetch the list of the drop downs from the server after clicking on the first select element.

**dkyadav80** · Jul 14 '08, 10:54 AM

hide and disable problem

Hi,
this is my javascript code:
//////////////////
[CODE=javascript]function display(obj,id1 )
{
txt = obj.options[obj.selectedInd ex].value;
document.getEle mentById(id1).s tyle.display = 'none';
if ( txt.match(id1) )
{
document.getEle mentById(id1).s tyle.display = 'block';
}

}
[/CODE]/////////////////////
And This is my original code of html:
//////////////////////////////////////////////////////////
{$script}
[HTML]<script>setTime out("document.g etElementById(' status_message' ).innerHTML='&n bsp;'",2000)</script>

<div align="center">
<fieldset class="formbord er"><legend style=" color:#777;">Ad d Education Details</legend>
<div class="status_m essage" id="status_mess age"> {$sm arty.session.st atus_message}</div>

<table border="0">
<form id="add_educati on_details" name="add_educa tion_details" method="post" action="index.p hp?page=Educati on&action=Creat e">
<tr>
<td colspan="2" align="left"><d iv class="heading" >Education Details</div><br>
</td>
</tr>
<tr>
<td align="right">
<label for="cons_indi_ edu_deg">Degree/Diploma
<span class="req">*</span></label>
</td>
<td align="left">
<select name="cons_indi _edu_deg" id="cons_indi_e du_deg" style="width:18 0px" class="text medium" onChange="retur n displayt(this,' other')">
<option value="select"> select</option>
<option value="Not Pursuing Graduation" >Not Pursuing Graduation</option>
<option value="B.A" >B.A</option>
<option value="B.Arch" >B.Arch</option>
<option value="BCA" >BCA</option>
<option value="B.B.A" >B.B.A</option>
<option value="B.Com">B .Com</option>
<option value="B.Ed" >B.Ed</option>
<option value="BDS" >BDS</option>
<option value="BHM" >BHM</option>
<option value="B.Pharma " >B.Pharma</option>
<option value="B.Sc" >B.Sc</option>
<option value="B.Tech" >B.Tech/B.E.</option>
<option value="LLB" >LLB</option>
<option value="MBBS" >MBBS</option>
<option value="Diploma" >Diploma</option>
<option value="BVSC" >BVSC</option>
<option value="CA" >CA</option>
<option value="CS" >CS</option>
<option value="ICWA" >ICWA</option>
<option value="Integrat ed PG" >Integrated PG</option>
<option value="LLM" >LLM</option>
<option value="M.A" >M.A</option>
<option value="M.Arch" >M.Arch</option>
<option value="M.Com" >M.Com</option>
<option value="M.Ed" >M.Ed</option>
<option value="M.Pharma " >M.Pharma</option>
<option value="M.Sc" >M.Sc</option>
<option value="M.Tech" >M.Tech</option>
<option value="MBA/PGDM" >MBA/PGDM</option>
<option value="MCA" >MCA</option>
<option value="MS" >MS</option>
<option value="PG Diploma" >PG Diploma</option>
<option value="MVSC" >MVSC</option>
<option value="MCM" >MCM</option>
<option value="other" >other</option>
</select><span>
<label>
<input name="cons_indi _edu_odeg" id="other" type="text" style="display: none;width:180p x" maxlength="25" class="text medium" />
</label></span>
</td>
</tr>
<br /><br />
<tr>
<td align="right">
<label for="cons_indi_ edu_inst">Name of Institute
<span class="req">*</span></label>
</td>
<td align="left">
<select name="cons_indi _edu_inst" id="cons_indi_e du_inst" style="width:18 0px" class="text medium" onChange="retur n display(this,'o ther')">
<option value="select" >select</option>
<option value="inst1" >intst1</option>
<option value="inst2" >inst2</option>
<option value="inst3" >inst3</option>
<option value="inst4" >inst4</option>
<option value="inst5" >inst5</option>
<option value="other" >other</option>
</select><span>
<label>
<input name="cons_indi _edu_oinst" id="other" type="text" style="display: none;width:180p x" maxlength="50" class="text medium"/>
</label></span>
</td>
</tr>
<tr>
<td align="right">
<label for="cons_indi_ edu_exprtise">S pecialisation
<span class="req">*</span></label>
</td>
<td align="left">
<input name="cons_indi _edu_exprtise" id="cons_indi_e du_exprtise" type="text" class="text medium" maxlength="100" style="width:17 0px" validation="urt _m" />
</td>
</tr>
<tr>
<td align="right">
<label for="month">Yea r of Graduation
<span class="req">*</span></label>
</td>
<td align="left">
<select name="month" id="month" style="width:75 px;">
<option value="Month">M onth</option>
<option value="Jan">Jan </option>
<option value="Feb">Feb </option>
<option value="Mar">Mar </option>
<option value="Apr">Apr </option>
<option value="May">May </option>
<option value="Jun">Jun </option>
<option value="Jul">Jul </option>
<option value="Aug">Aug </option>
<option value="Sep">Sep </option>
<option value="Oct">Oct </option>
<option value="Nov">Nov </option>
<option value="Dec">Dec </option>
</select>
<select name="year" id="year" style="width:10 0px">
<option value="Year">Ye ar</option>
{html_options values=$years output=$years}
</select>
</td>
</tr>

<tr>
<td colspan="2">&nb sp; </td>
</tr>
<tr align="center">
<td>  </td>
<td align="center">
<div class="buttons" >
<button type="button" id="saveAndAdd " name="saveAndAd d" class="positive " onClick="if(val idateForm(this. form)) submitForm(this .form, 'index.php?page =Education&acti on=CreateMore') ">
<img src="images/icons/tick.png" alt="icon" /> Save & Add More </button>

<button type="button" id="saveAndClos e" name="saveAndCl ose" class="positive " onClick="if(val idateForm(this. form)) this.form.submi t();">
<img src="images/icons/tick.png" alt="icon" /> Save & Close </button>

<a href="javascrip t: void(0);" onclick="javasc ript: return parent.hs.close ();" class="negative ">
<img src="images/icons/cross.png" alt="icon" /> Close</a>
</div>
</td>
</tr>
</form>
</table>
</fieldset>
</div>
[/HTML]///////////////////////////////////////

if have any solution pls help me.

Thanks and regards
dkyadav80

**dkyadav80** · Jul 14 '08, 11:02 AM

I'm stuck about AJAX and css and html, pls help me........

Hi,

pls help me;

i wanna when forst time script run then all other text field should not be display and when select other then other text field display. i have written code this code when i
select first select other from first selection field this is displaying all other field but this is wrong. when i select one then one other field display and when slect ohter text field then display other text field. and when select other value rest of 'other' then other text field should be hide. below is my code:

Hi,
this is my javascript code:
//////////////////
[CODE=javascript]function display(obj,id1 )
{
txt = obj.options[obj.selectedInd ex].value;
document.getEle mentById(id1).s tyle.display = 'none';
if ( txt.match(id1) )
{
document.getEle mentById(id1).s tyle.display = 'block';
}

}
[/CODE]/////////////////////
And This is my original code of html:
//////////////////////////////////////////////////////////
{$script}
[HTML]<script>setTime out("document.g etElementById(' status_message' ).innerHTML='&n bsp;'",2000)</script>

<div align="center">
<fieldset class="formbord er"><legend style=" color:#777;">Ad d Education Details</legend>
<div class="status_m essage" id="status_mess age"> {$sm arty.session.st atus_message}</div>

<table border="0">
<form id="add_educati on_details" name="add_educa tion_details" method="post" action="index.p hp?page=Educati on&action=Creat e">
<tr>
<td colspan="2" align="left"><d iv class="heading" >Education Details</div><br>
</td>
</tr>
<tr>
<td align="right">
<label for="cons_indi_ edu_deg">Degree/Diploma
<span class="req">*</span></label>
</td>
<td align="left">
<select name="cons_indi _edu_deg" id="cons_indi_e du_deg" style="width:18 0px" class="text medium" onChange="retur n displayt(this,' other')">
<option value="select"> select</option>
<option value="Not Pursuing Graduation" >Not Pursuing Graduation</option>
<option value="B.A" >B.A</option>
<option value="B.Arch" >B.Arch</option>
<option value="BCA" >BCA</option>
<option value="B.B.A" >B.B.A</option>
<option value="B.Com">B .Com</option>
<option value="B.Ed" >B.Ed</option>
<option value="BDS" >BDS</option>
<option value="BHM" >BHM</option>
<option value="B.Pharma " >B.Pharma</option>
<option value="B.Sc" >B.Sc</option>
<option value="B.Tech" >B.Tech/B.E.</option>
<option value="LLB" >LLB</option>
<option value="MBBS" >MBBS</option>
<option value="Diploma" >Diploma</option>
<option value="BVSC" >BVSC</option>
<option value="CA" >CA</option>
<option value="CS" >CS</option>
<option value="ICWA" >ICWA</option>
<option value="Integrat ed PG" >Integrated PG</option>
<option value="LLM" >LLM</option>
<option value="M.A" >M.A</option>
<option value="M.Arch" >M.Arch</option>
<option value="M.Com" >M.Com</option>
<option value="M.Ed" >M.Ed</option>
<option value="M.Pharma " >M.Pharma</option>
<option value="M.Sc" >M.Sc</option>
<option value="M.Tech" >M.Tech</option>
<option value="MBA/PGDM" >MBA/PGDM</option>
<option value="MCA" >MCA</option>
<option value="MS" >MS</option>
<option value="PG Diploma" >PG Diploma</option>
<option value="MVSC" >MVSC</option>
<option value="MCM" >MCM</option>
<option value="other" >other</option>
</select><span>
<label>
<input name="cons_indi _edu_odeg" id="other" type="text" style="display: none;width:180p x" maxlength="25" class="text medium" />
</label></span>
</td>
</tr>
<br /><br />
<tr>
<td align="right">
<label for="cons_indi_ edu_inst">Name of Institute
<span class="req">*</span></label>
</td>
<td align="left">
<select name="cons_indi _edu_inst" id="cons_indi_e du_inst" style="width:18 0px" class="text medium" onChange="retur n display(this,'o ther')">
<option value="select" >select</option>
<option value="inst1" >intst1</option>
<option value="inst2" >inst2</option>
<option value="inst3" >inst3</option>
<option value="inst4" >inst4</option>
<option value="inst5" >inst5</option>
<option value="other" >other</option>
</select><span>
<label>
<input name="cons_indi _edu_oinst" id="other" type="text" style="display: none;width:180p x" maxlength="50" class="text medium"/>
</label></span>
</td>
</tr>
<tr>
<td align="right">
<label for="cons_indi_ edu_exprtise">S pecialisation
<span class="req">*</span></label>
</td>
<td align="left">
<input name="cons_indi _edu_exprtise" id="cons_indi_e du_exprtise" type="text" class="text medium" maxlength="100" style="width:17 0px" validation="urt _m" />
</td>
</tr>
<tr>
<td align="right">
<label for="month">Yea r of Graduation
<span class="req">*</span></label>
</td>
<td align="left">
<select name="month" id="month" style="width:75 px;">
<option value="Month">M onth</option>
<option value="Jan">Jan </option>
<option value="Feb">Feb </option>
<option value="Mar">Mar </option>
<option value="Apr">Apr </option>
<option value="May">May </option>
<option value="Jun">Jun </option>
<option value="Jul">Jul </option>
<option value="Aug">Aug </option>
<option value="Sep">Sep </option>
<option value="Oct">Oct </option>
<option value="Nov">Nov </option>
<option value="Dec">Dec </option>
</select>
<select name="year" id="year" style="width:10 0px">
<option value="Year">Ye ar</option>
{html_options values=$years output=$years}
</select>
</td>
</tr>

<tr>
<td colspan="2">&nb sp; </td>
</tr>
<tr align="center">
<td>  </td>
<td align="center">
<div class="buttons" >
<button type="button" id="saveAndAdd " name="saveAndAd d" class="positive " onClick="if(val idateForm(this. form)) submitForm(this .form, 'index.php?page =Education&acti on=CreateMore') ">
<img src="images/icons/tick.png" alt="icon" /> Save & Add More </button>

<button type="button" id="saveAndClos e" name="saveAndCl ose" class="positive " onClick="if(val idateForm(this. form)) this.form.submi t();">
<img src="images/icons/tick.png" alt="icon" /> Save & Close </button>

<a href="javascrip t: void(0);" onclick="javasc ript: return parent.hs.close ();" class="negative ">
<img src="images/icons/cross.png" alt="icon" /> Close</a>
</div>
</td>
</tr>
</form>
</table>
</fieldset>
</div>
[/HTML]///////////////////////////////////////

if have any solution pls help me.

Thanks and regards
dkyadav80

**acoder** · Jul 14 '08, 11:19 AM

I've merged your threads. Please do not double/triple post your questions. Keep all posts relating to the same question to one thread.

Also, use code tags when posting code. See How to Ask a Question.

**dkyadav80** · Jul 15 '08, 08:36 AM

hide and display text field based on selection field(only for value="oth er")

hi sir,
I'm begener.Please help me.

[code] code goes here [code]

[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Show/Hide</title>
<script type="text/javascript">
/*
function display(obj,id1 )
{
txt = obj.options[obj.selectedInd ex].value;
document.getEle mentById(id1).s tyle.display = 'none';
if ( txt.match(id1) )
{
document.getEle mentById(id1).s tyle.display = 'block';
}

}*/

function showhide(id)
{
if (document.getEl ementById)
{
obj = document.getEle mentById(id);
if (obj.style.disp lay == "none")
{
obj.style.displ ay = "block";
}
else
{
obj.style.displ ay = "none";
}
}
}

</script>
</head>

<body>
<table border="0" bordercolor="">
<tr>
<td>
<select name="type" id="select2" onChange="retur n showhide('d');" >
<option>P:</option>
<option value1="others1 ">others1</option>
<option value2="others2 ">others2</option>
<option value3="other"> other</option>
</select></td><span>
<td>
<input type="text" id="d" style="display: none; width:150px" name="color" size="12" maxlength="7" /></td>
</span>
</tr>
<tr>
<td>
<select name="type" id="select2" onchange="retur n showhide('p');" >
<option>P:</option>
<option value1="others1 ">others1</option>
<option value2="others2 ">others2</option>
<option value3="other"> other</option>
</select></td>
<td><input type="text" id="p" style="display: none; width:150px" name="color" size="12" maxlength="7" /></td>
</tr>
<tr>
<td>
<select name="type" id="select3" onchange="retur n showhide('k');" >
<option>P:</option>
<option value1="others1 ">others1</option>
<option value2="others2 ">others2</option>
<option value3="other"> other</option>
</select></td>
<td>
<input type="text" id="k" style="display: none; width:150px" name="color" size="12" maxlength="7" /></td>
</tr>
</table>

</body>
</html>[/HTML]

////////
problem here:

I wanna select the other value from selection field then display other text box field otherwise hide this text box. please help my problem . i'm thrusty about this problem.

**acoder** · Jul 15 '08, 09:56 AM

I've merged your thread yet again. Please do NOT double post. This will be the last time before you receive an official warning.

The code tags should be wrapped around your code with a closing tag. Replace "...code goes here..." with the actual code.

Moderator.

**acoder** · Jul 15 '08, 10:01 AM

Originally posted by dkyadav80

I wanna select the other value from selection field then display other text box field otherwise hide this text box. please help my problem .

You need to change the showhide function to check the value selected. If it equals "Other", then show, otherwise hide.
[code=javascript]function showhide(val,id )
{
if (document.getEl ementById)
{
obj = document.getEle mentById(id);
if (val == "Other")
{
obj.style.displ ay = "block";
}
else
{
obj.style.displ ay = "none";
}
}
}[/code]You'll need to pass the value to the function.
Also, change the option value1,2,3 to just value for each option.

**dkyadav80** · Jul 19 '08, 05:45 AM

display other text field when user select other value from selection filed.

Hi sir,
I have two field in the html page.
first Degree(selectio n field) and second is Institute(selec tion field).
I wanna when user select value "other" from degree or Institute selection field
then other text field should be display otherwise hide.
Please solve my problem.

Thank you.

**dmjpro** · Jul 19 '08, 06:17 AM

Originally posted by dkyadav80

Hi sir,
I have two field in the html page.
first Degree(selectio n field) and second is Institute(selec tion field).
I wanna when user select value "other" from degree or Institute selection field
then other text field should be display otherwise hide.
Please solve my problem.

Thank you.

Did you try something?

**acoder** · Jul 19 '08, 10:22 AM

Try something? Yes, and posted multiple threads on the same question/problem despite requests not to. I've now merged the threads (yet again I might add). If you (dkyadav80) continue to flout the guidelines, then you could face a ban. By becoming a member and posting here, you agree to follow the guidelines. Read the guidelines properly and follow them if you want avoid a temporary ban.

Moderator.

display other text field when user selects other option in selection field

display other text field when user selects other option in selection field

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment