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

Displaying/Removing textfield on choice dropdownmenu

P: 8
Hi,

Is it possible for me to, when I choose an option eg. 'Iveco', to let the text/input field disappear? So basically, if you choose a car in the first dropdownmenu, the text/input field has to disappear. Current Code:

Expand|Select|Wrap|Line Numbers
  1.  <form action="zoeken.php" method="post">
  2.   <table background="img/top.jpg" align="center" width="780" height="60" border="0" cellpadding="0" cellspacing="0"
  3.  
  4. bgcolor="#FFFFFF">
  5.     <tr>
  6.     <td align="left">[img]img/Terug.gif[/img]
  7.  
  8. height="40" border="0" align="absmiddle"></a>  [img]img/Nieuw.gif[/img]
  9.  
  10. border="0" align="absmiddle"></a>
  11.        <a href="/vernieuwen">[img]img/Refresh.gif[/img]
  12.  
  13. align="absmiddle"></a>  [img]img/printen.gif[/img]
  14.  
  15. height="40" border="0" align="absmiddle"></a>
  16.     </td>
  17.       <td align="right">[img]img/Kenteken.gif[/img]
  18.  
  19. border="0" align="absmiddle"></a> 
  20.         <a href="zoeken.php">[img]img/Zoeken.gif[/img]  
  21.  
  22. href="help.php"><img src="img/Help.gif" alt="Help" border="0" align="absmiddle">" target="_blank">http://<br />
  23. <br />
  24. href="help.php"...n="absmiddle">
  25.     </tr>
  26.   </table>
  27.   <table align="center" width="780" border="0" cellpadding="4" cellspacing="0" bgcolor="#FFFFFF">
  28.     <tr class="titeldatumbalk">
  29.       <td colspan="4">Zoekfilters
  30.     <tr>
  31.       <td width="25%" class="titelkolombalk"> 
  32.           <select name="a1">
  33.             <option value="" selected disabled>Klik voor opties...
  34.             <option value="" disabled> 
  35.             <option value="ordernr">Ordernummer
  36.             <option value="datum">Datum
  37.             <option value="bestemming">Klant
  38.             <option value="" disabled> 
  39.             <option value="1">Trekker en Oplegger
  40.             <option value="2">Bakwagen
  41.             <option value="3">Iveco
  42.             <option value="4">Bus Transport
  43.             <option value="5">Ford Mondeo
  44.             <option value="13">Aanhanger
  45.             <option value="16">Svetruck 13.6ton
  46.           </select>
  47.           <br>
  48.           <input name="a" type="text" id="a" size="20" maxlength="50">
  49.           <br>
  50.           <br>
  51.           <input type="Submit" name="Action" value="Zoek">
  52.         </p>
  53.       <td width="25%" align="center" valign="top" class="titelkolombalk">
  54.         <div align="center">
  55.           <select name="b1">
  56.             <option value="" selected disabled>Klik voor opties...
  57.             <option value="" disabled> 
  58.             <option value="ordernr">Ordernummer
  59.             <option value="datum">Datum
  60.             <option value="bestemming">Klant
  61.           </select>
  62.           <br>
  63.           <input name="b" type="text" id="b" size="20" maxlength="50">
  64.         </div>
  65.         <td width="25%" align="center" valign="top" class="titelkolombalk">
  66.         <div align="center">
  67.           <select name="c1">
  68.             <option value="" selected disabled>Klik voor auto's...
  69.             <option value="" disabled> 
  70.             <option value="1">Trekker en Oplegger
  71.             <option value="2">Bakwagen
  72.             <option value="3">Iveco
  73.             <option value="4">Bus Transport
  74.             <option value="5">Ford Mondeo
  75.             <option value="13">Aanhanger
  76.             <option value="svetruck136ton">Svetruck 13.6ton
  77.           </select>
  78.         </div>
  79.     </tr>
  80.   </table>
  81. </form>

Jun 15 '07 #1
Share this Question
Share on Google+
16 Replies


dmjpro
100+
P: 2,476
Hi,

Is it possible for me to, when I choose an option eg. 'Iveco', to let the text/input field disappear? So basically, if you choose a car in the first dropdownmenu, the text/input field has to disappear. Current Code:

<form action="zoeken.php" method="post">
<table background="img/top.jpg" align="center" width="780" height="60" border="0" cellpadding="0" cellspacing="0"

bgcolor="#FFFFFF">
<tr>
<td align="left"><a href="index2.php?afg=Nee"><img src="img/Terug.gif" alt="Terug naar het Overzicht" width="39"

height="40" border="0" align="absmiddle"></a>&nbsp;&nbsp;<a href="toevoegen.php"><img src="img/Nieuw.gif" alt="Rit Toevoegen"

border="0" align="absmiddle"></a>
&nbsp;<a href="/vernieuwen"><img src="img/Refresh.gif" onClick="self.location.reload();" alt="Vernieuwen" border="0"

align="absmiddle"></a>&nbsp;&nbsp;<a href="printen.php"><img src="img/printen.gif" alt="Overzicht Afdrukken" width="39"

height="40" border="0" align="absmiddle"></a>
</td>
<td align="right"><a href="kenteken.php"><img src="img/Kenteken.gif" alt="Auto, Chauffeur of Invoerder Toevoegen"

border="0" align="absmiddle"></a>&nbsp;
<a href="zoeken.php"><img src="img/Zoeken.gif" alt="Zoeken" border="0" align="absmiddle"></a>&nbsp;&nbsp;<a

href="help.php"><img src="img/Help.gif" alt="Help" border="0" align="absmiddle"></a></td>
</tr>
</table>
<table align="center" width="780" border="0" cellpadding="4" cellspacing="0" bgcolor="#FFFFFF">
<tr class="titeldatumbalk">
<td colspan="4"><strong>Zoekfilters</strong></tr>
<tr>
<td width="25%" class="titelkolombalk"> <p align="center">
<select name="a1">
<option value="" selected disabled>Klik voor opties...</option>
<option value="" disabled> </option>
<option value="ordernr">Ordernummer</option>
<option value="datum">Datum</option>
<option value="bestemming">Klant</option>
<option value="" disabled> </option>
<option value="1">Trekker en Oplegger</option>
<option value="2">Bakwagen</option>
<option value="3">Iveco</option>
<option value="4">Bus Transport</option>
<option value="5">Ford Mondeo</option>
<option value="13">Aanhanger</option>
<option value="16">Svetruck 13.6ton</option>
</select>
<br>
<input name="a" type="text" id="a" size="20" maxlength="50">
<br>
<br>
<input type="Submit" name="Action" value="Zoek">
</p></td>
<td width="25%" align="center" valign="top" class="titelkolombalk">
<div align="center">
<select name="b1">
<option value="" selected disabled>Klik voor opties...</option>
<option value="" disabled> </option>
<option value="ordernr">Ordernummer</option>
<option value="datum">Datum</option>
<option value="bestemming">Klant</option>
</select>
<br>
<input name="b" type="text" id="b" size="20" maxlength="50">
</div></td>
<td width="25%" align="center" valign="top" class="titelkolombalk">
<div align="center">
<select name="c1">
<option value="" selected disabled>Klik voor auto's...</option>
<option value="" disabled> </option>
<option value="1">Trekker en Oplegger</option>
<option value="2">Bakwagen</option>
<option value="3">Iveco</option>
<option value="4">Bus Transport</option>
<option value="5">Ford Mondeo</option>
<option value="13">Aanhanger</option>
<option value="svetruck136ton">Svetruck 13.6ton</option>
</select>
</div></td>
</tr>
</table>
</form>

Welcome to TSDN......

have a llok at four functions .... createElement,appendChild,removeChild
Try to search in GOOGLE...
if anything problem is there then come here again experts r here.....
best of luck .....

Kind regards,
Dmjpro.
Jun 15 '07 #2

P: 8
Didn't you think that I already searched there? Else I didn't post here.Thanks for your reply anyway. :)
Jun 15 '07 #3

10K+
P: 13,264
Yes it's possible. You give the element that you want to disappear an id. Then onChange of the select you call a function that uses document.getElementById("theId") and sets its style to "display:none"
Jun 15 '07 #4

P: 8
Are you sure that's OnChange, and not OnClick?
Jun 15 '07 #5

10K+
P: 13,264
Are you sure that's OnChange, and not OnClick?
Ah well, you can always try it out and see the difference.
Jun 15 '07 #6

gits
Expert Mod 5K+
P: 5,390
Didn't you think that I already searched there? Else I didn't post here.Thanks for your reply anyway. :)
of course you did ... but dmjpro gave you the hint to search for dom-methods to create, append or remove document-nodes ... and to search for them. with that you could have find a solution that should have worked ... but setting the style is the common way for this purpose ...

we are not able to know what you already have searched or tried until you only posted some html-code ... and in case you want a specific answer to the question you had, we only could have say: 'yes it is possible' ... you get a reply ... consider it as a try to help you ...

kind regards ...
Jun 15 '07 #7

P: 8
of course you did ... but dmjpro gave you the hint to search for dom-methods to create, append or remove document-nodes ... and to search for them. with that you could have find a solution that should have worked ... but setting the style is the common way for this purpose ...

we are not able to know what you already have searched or tried until you only posted some html-code ... and in case you want a specific answer to the question you had, we only could have say: 'yes it is possible' ... you get a reply ... consider it as a try to help you ...

kind regards ...
I know, else I did not say thank you. Sorry for sounding a bit rude there.
Jun 15 '07 #8

P: 8
Ok, got it working on 1 choice at the moment.

[HTML]<script type="text/JavaScript">
function showhide(f,v){
var t = f.elements['a'];
if(v=='ordernr'){t.style.visibility='visible'}
else{t.style.visibility='hidden'}
}
onload = function(){document.forms[0].elements['a'].style.visibility='hidden'}
</script>[/HTML]

[HTML]<tr>
<td width="25%" class="titelkolombalk"> <p align="center">
<select name="a1" id="mySelect" onchange="showhide(this.form,this.value)">
<option value="" selected disabled>Klik voor opties...</option>
<option value="" disabled> </option>
<option value="ordernr">Ordernummer</option>
<option value="datum">Datum</option>
<option value="bestemming">Klant</option>
<option value="" disabled> </option>
<option value="1">Trekker en Oplegger</option>
<option value="2">Bakwagen</option>
<option value="3">Iveco</option>
<option value="4">Bus Transport</option>
<option value="5">Ford Mondeo</option>
<option value="13">Aanhanger</option>
<option value="16">Svetruck 13.6ton</option>
</select>
<br>
<input name="a" type="text" id="a" size="20" maxlength="50" id="myText" />[/HTML]

As a newb in javascript, how is it possible to have the if statement affect multiple selects?
Jun 15 '07 #9

gits
Expert Mod 5K+
P: 5,390
hi ;) ... what do you mean with mulitple selects? do you only have one textbox that should be set to visible/hidden? or more that should respond to your selection?

you may use something like the following:

Expand|Select|Wrap|Line Numbers
  1. // we construct a hash-map for the options where your field 'a' has to
  2. // be visible
  3. var visible_list = {
  4.     ordernr: 1, datum: 1, 2: 1
  5. };
  6.  
  7. // next you only have to replace your if-condition  
  8. if (v in visible_list) { 
  9.     // your code follows here
  10.  
kind regards ...
Jun 15 '07 #10

P: 8
I don't know what that code is for, I was unable to test it because it didn't work (me again /sigh). But what I meant was that the textfield should appear on options ordernr, datum, bestemming, and not on 1, 2, 3, etc. At the moment I have only be able to make it work on 1 option. I don't know what your code is supposed to do though. Thanks for you effort anyway! :)
Jun 15 '07 #11

gits
Expert Mod 5K+
P: 5,390
this will do the job ...


Expand|Select|Wrap|Line Numbers
  1. <script type="text/JavaScript">
  2.  
  3. function showhide(f, v) {
  4.     var visible_list = {
  5.         ordernr: 1, datum: 1, bestemming: 1
  6.     };
  7.  
  8.     var t = f.elements['a'];
  9.  
  10.     if (v in visible_list) {
  11.         t.style.visibility='visible';
  12.     } else {
  13.         t.style.visibility='hidden';
  14.     }
  15. }
  16.  
  17. // your further code
kind regards ...

ps: explaination - visible_list is an object (used as an assoc array) and contains the values where your box should appear - using that we avoid to loop and may ask the list for contained elements in it ... an other way would be to ask the following way (would replace the if-condition):

Expand|Select|Wrap|Line Numbers
  1. if (typeof visible_list[v] != 'undefined') {
  2.     // your code here again 
  3. }
Jun 15 '07 #12

gits
Expert Mod 5K+
P: 5,390
;) and if you want to have it real cool ... replace the entire if-statement the following way:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/JavaScript">
  2.  
  3. function showhide(f, v) {
  4.     var visible_list = {
  5.         ordernr: 1, datum: 1, bestemming: 1
  6.     };
  7.  
  8.     var t = f.elements['a'];
  9.  
  10.     t.style.visibility = v in visible_list ? 'visible' : 'hidden';
  11. }
  12.  
  13. // your further code
kind regards ...
Jun 15 '07 #13

P: 8
Hm, still doesn't work, it does work on ordernr, but not on the rest. Very weird.
Jun 15 '07 #14

gits
Expert Mod 5K+
P: 5,390
Hm, still doesn't work, it does work on ordernr, but not on the rest. Very weird.
please post your current code ... with form-tags ect. ... i've got a working version here ... and the provided code works well ... show me how you use it ...
Jun 15 '07 #15

P: 8
It did work, I just had the wrong file in front of me ><
Slap me please. This shows how stupid I am, really :) I truly live up to my forumtitle.

Thanks alot, you helped me out bigtime. Thumbs up :)
Jun 15 '07 #16

gits
Expert Mod 5K+
P: 5,390
glad you got it working ;) come back with more questions ...

kind regards ...
Jun 15 '07 #17

Post your reply

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