By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,384 Members | 1,829 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,384 IT Pros & Developers. It's quick & easy.

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

P: 21
[HTML]<html>
///

here what shoud be java script for:
->when script run then not display all input text field only display selection field.
->when user select other value for institute only this field display not display degree text field
->when user select other value in the selection field for degree then text field display and wise versa
////
<bodly>
<table>
<tr>
<td>select Institute:</td>
<td>
<select name='inst' id='inst'>
<option value='select'>select</option>
<option value='a'>a</option>
<option value='b'>b</option>
<option value='other'>other</option>
</select>
<input type='text' name='odeg' id='odeg'>
</td>
</tr>
<tr>
<td>select Degree:</td>
<td>
<select name='deg' id='deg'>
<option value='select'>select</option>
<option value='x'>x</option>
<option value='y'>y</option>
<option value='other'>other</option>
</select>
<input type='text' name='odeg' id='odeg'>
</td>
</tr>
</table>
</body>
</html>[/HTML]

////////////////
pls care fully seee my problem and solve. i will be higly oblige to all of u forum users.

Thanks and Regards
dkyadav80
Jul 14 '08 #1
Share this Question
Share on Google+
10 Replies


hsriat
Expert 100+
P: 1,654
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.
Jul 14 '08 #2

P: 21
Hi,
this is my javascript code:
//////////////////
Expand|Select|Wrap|Line Numbers
  1. function display(obj,id1)
  2. {
  3.     txt = obj.options[obj.selectedIndex].value;
  4.     document.getElementById(id1).style.display = 'none';
  5.     if ( txt.match(id1) ) 
  6.     {
  7.         document.getElementById(id1).style.display = 'block';
  8.     }
  9.  
  10. }
  11.  
/////////////////////
And This is my original code of html:
//////////////////////////////////////////////////////////
{$script}
[HTML]<script>setTimeout("document.getElementById('statu s_message').innerHTML='&nbsp;'",2000)</script>

<div align="center">
<fieldset class="formborder"><legend style=" color:#777;">Add Education Details</legend>
<div class="status_message" id="status_message">&nbsp;{$smarty.session.status_ message}</div>
<!--<div align="center">
<div class="status_message">{$smarty.session.status_mes sage}</div>
<fieldset style="width:70%; border:1px solid #85C21C;"><legend style=" color:#777;">Add Education Details</legend>
<br/>-->
<table border="0">
<form id="add_education_details" name="add_education_details" method="post" action="index.php?page=Education&action=Create">
<tr>
<td colspan="2" align="left"><div 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_edu_deg" style="width:180px" class="text medium" onChange="return 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="Integrated 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:180px" 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_edu_inst" style="width:180px" class="text medium" onChange="return display(this,'other')">
<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:180px" maxlength="50" class="text medium"/>
</label></span>
</td>
</tr>
<tr>
<td align="right">
<label for="cons_indi_edu_exprtise">Specialisation
<span class="req">*</span></label>
</td>
<td align="left">
<input name="cons_indi_edu_exprtise" id="cons_indi_edu_exprtise" type="text" class="text medium" maxlength="100" style="width:170px" validation="urt_m" />
</td>
</tr>
<tr>
<td align="right">
<label for="month">Year of Graduation
<span class="req">*</span></label>
</td>
<td align="left">
<select name="month" id="month" style="width:75px;">
<option value="Month">Month</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:100px">
<option value="Year">Year</option>
{html_options values=$years output=$years}
</select>
</td>
</tr>

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

<button type="button" id="saveAndClose" name="saveAndClose" class="positive" onClick="if(validateForm(this.form)) this.form.submit();">
<img src="images/icons/tick.png" alt="icon" /> Save & Close </button>

<a href="javascript: void(0);" onclick="javascript: 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
Jul 14 '08 #3

P: 21
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:
//////////////////
Expand|Select|Wrap|Line Numbers
  1. function display(obj,id1)
  2. {
  3.     txt = obj.options[obj.selectedIndex].value;
  4.     document.getElementById(id1).style.display = 'none';
  5.     if ( txt.match(id1) ) 
  6.     {
  7.         document.getElementById(id1).style.display = 'block';
  8.     }
  9.  
  10. }
  11.  
/////////////////////
And This is my original code of html:
//////////////////////////////////////////////////////////
{$script}
[HTML]<script>setTimeout("document.getElementById('statu s_message').innerHTML='&nbsp;'",2000)</script>

<div align="center">
<fieldset class="formborder"><legend style=" color:#777;">Add Education Details</legend>
<div class="status_message" id="status_message">&nbsp;{$smarty.session.status_ message}</div>
<!--<div align="center">
<div class="status_message">{$smarty.session.status_mes sage}</div>
<fieldset style="width:70%; border:1px solid #85C21C;"><legend style=" color:#777;">Add Education Details</legend>
<br/>-->
<table border="0">
<form id="add_education_details" name="add_education_details" method="post" action="index.php?page=Education&action=Create">
<tr>
<td colspan="2" align="left"><div 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_edu_deg" style="width:180px" class="text medium" onChange="return 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="Integrated 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:180px" 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_edu_inst" style="width:180px" class="text medium" onChange="return display(this,'other')">
<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:180px" maxlength="50" class="text medium"/>
</label></span>
</td>
</tr>
<tr>
<td align="right">
<label for="cons_indi_edu_exprtise">Specialisation
<span class="req">*</span></label>
</td>
<td align="left">
<input name="cons_indi_edu_exprtise" id="cons_indi_edu_exprtise" type="text" class="text medium" maxlength="100" style="width:170px" validation="urt_m" />
</td>
</tr>
<tr>
<td align="right">
<label for="month">Year of Graduation
<span class="req">*</span></label>
</td>
<td align="left">
<select name="month" id="month" style="width:75px;">
<option value="Month">Month</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:100px">
<option value="Year">Year</option>
{html_options values=$years output=$years}
</select>
</td>
</tr>

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

<button type="button" id="saveAndClose" name="saveAndClose" class="positive" onClick="if(validateForm(this.form)) this.form.submit();">
<img src="images/icons/tick.png" alt="icon" /> Save & Close </button>

<a href="javascript: void(0);" onclick="javascript: 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
Jul 14 '08 #4

acoder
Expert Mod 15k+
P: 16,027
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.
Jul 14 '08 #5

P: 21
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.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
if ( txt.match(id1) )
{
document.getElementById(id1).style.display = 'block';
}

}*/

function showhide(id)
{
if (document.getElementById)
{
obj = document.getElementById(id);
if (obj.style.display == "none")
{
obj.style.display = "block";
}
else
{
obj.style.display = "none";
}
}
}

</script>
</head>

<body>
<table border="0" bordercolor="">
<tr>
<td>
<select name="type" id="select2" onChange="return 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="return 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="return 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.
Jul 15 '08 #6

acoder
Expert Mod 15k+
P: 16,027
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.
Jul 15 '08 #7

acoder
Expert Mod 15k+
P: 16,027
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.
Expand|Select|Wrap|Line Numbers
  1. function showhide(val,id)
  2. {
  3.   if (document.getElementById)
  4.   {
  5.     obj = document.getElementById(id);
  6.     if (val == "Other")
  7.     {
  8.       obj.style.display = "block";
  9.     }
  10.     else
  11.     {
  12.       obj.style.display = "none";
  13.     }
  14.   }
  15. }
You'll need to pass the value to the function.
Also, change the option value1,2,3 to just value for each option.
Jul 15 '08 #8

P: 21
Hi sir,
I have two field in the html page.
first Degree(selection field) and second is Institute(selection 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.
Jul 19 '08 #9

dmjpro
100+
P: 2,476
Hi sir,
I have two field in the html page.
first Degree(selection field) and second is Institute(selection 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?
Jul 19 '08 #10

acoder
Expert Mod 15k+
P: 16,027
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.
Jul 19 '08 #11

Post your reply

Sign in to post your reply or Sign up for a free account.