CodeIgniter Forums
show hide on select - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: show hide on select (/showthread.php?tid=20724)

show hide on select - El Forum - 07-19-2009

[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

show hide on select - El Forum - 07-19-2009

[eluser]LifeSteala[/eluser]
Try:

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

Note: take the space out between on and change.

show hide on select - El Forum - 07-19-2009

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

show hide on select - El Forum - 07-19-2009

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

Code:
this.options[selectedIndex].value

not

Code:
this.value


show hide on select - El Forum - 07-19-2009

[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.

show hide on select - El Forum - 07-19-2009

[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'
  }
}


show hide on select - El Forum - 07-19-2009

[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

show hide on select - El Forum - 07-20-2009

[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

show hide on select - El Forum - 07-20-2009

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

show hide on select - El Forum - 07-20-2009

[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.