• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
show hide on select

#1
[eluser]egoslip[/eluser]
Hey guys i have very little knowlege of javascript so please bare with me on this

What i want to accomplish is have a drop down field and when they select it it would show the relevant div and hide the other div if they changed there selection before.

This is what I have so far it shows the div but if i change the value on the select it still shows the old div as well.
Code:
[removed]
            function showhide(divid){
                thediv = document.getElementById(divid);
                if(thediv.style.display== 'none' ){
                    thediv.style.display='block'
                }else{
                    thediv.style.display='none'
                }
            }
        [removed]
        
        <br>
        
        Select
        <br>
        <select name='paymethod'>
            <option value='Choose'>Choose</option>
            <option value='Paypal' >Paypal</option>
            <option value='Check'>Check</option>
        </select>
        
        <br>
        
        <div id='Paypal' style="display:none;">
      paypal: email &lt;input type="text" name="paypal_email" value="[email protected]"/&gt;
        </div>
        
        <div id='Check' style="display:none;">
       address: &lt;input name="address" type="text" /&gt;

        </div>

also how can i show the selected optins div when the page loads so they dont have to reselect the optin to change the values.

any help would be great as java scripting is something im lacking

#2
[eluser]LifeSteala[/eluser]
Try:

Code:
<select name="paymethod" on change="showhide(this.options[selectedIndex].value)">

Note: take the space out between on and change.

#3
[eluser]egoslip[/eluser]
no ya i had onChange="showhide(this.value)" in there guess the forum removed it

#4
[eluser]LifeSteala[/eluser]
It it should be:

Code:
this.options[selectedIndex].value

not

Code:
this.value

#5
[eluser]egoslip[/eluser]
Ya the same thing it would show the div but if I change the options it would show both divs as active instead of hiding one of them.

#6
[eluser]LifeSteala[/eluser]
ah yes - try this?

Code:
function showhide(divid){
  thediv = document.getElementById(divid);

  // Force both div's to none then open divid
  document.getElementById('Check').style.display='none';
  document.getElementById('Paypal').style.display='none';

  if(thediv.style.display== 'none' ){
    thediv.style.display='block'
  }else{
    thediv.style.display='none'
  }
}

#7
[eluser]egoslip[/eluser]
Awesome didnt think for setting them to both hidden thanks.

also how can I have it show the selected option div when the page loads ??

so lets say i have paypal selected and stored and when i refresh it is auto selected I dont want to reselect it to show he div.

How can accomplish that

#8
[eluser]LifeSteala[/eluser]
Sure, to do that, add the following code at the end of your file, before the body end.

Code:
&lt; script language="javascript" type="text/javascript"&gt;
showhide(document.getElementById('paymethod').options[selectedIndex].value);
< /script>

Note: remove the spaces

#9
[eluser]egoslip[/eluser]
for some reason that is not working I removed all the spaces.

#10
[eluser]Stoney[/eluser]
You should try jQuery. First you have to load the jQuery library.
I'm doing it like this:


Code:
<s_cript type="text/javascript" src="joursite.com/jquery.js"></s_cript>


Code:
<select id='paymethod'>
            <option value='0'>Choose</option>
            <option value='1' >Paypal</option>
            <option value='2'>Check</option>
        </select>
        
        <br>
        
        <div id='Paypal'>
      paypal: email &lt;input type="text" name="paypal_email" value="[email protected]"/&gt;
        </div>
        
        <div id='Check'>
       address: &lt;input name="address" type="text" /&gt;
        </div>
        
<s_cript>$(document).ready(function() {
    $("#paymethod").change(function(){
        id = $(this).val();
        if ( id == 1 )    {
                $("#Paypal").show();
                $("#Check").hide();
        }
            else if    ( id == 2 ) {
                $("#Paypal").hide();
                $("#Check").show()
            }
                else {
                    $("#Paypal").hide();
                    $("#Check").hide();
                }
    });
    
    //inicial settings
    $("#Paypal").hide();
    $("#Check").hide();
    
});
</s_cript>

Just remove the '_' from the script tags.


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2021 MyBB Group.