• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
form_dropdown()

#1
[eluser]BigJobbies[/eluser]
Hey Peoples,

Im having some problems with a script im writing and was wondering if someone could help me out, Im new to this whole CodeIgniter thing, so please be kind Smile

I have created a form with a dropdown box, but i want to be able to show / hide <div>'s based on what selection they choose on the dropdown ... I figure it has something to do with the onChange attribute, but cant quite figure it out.

This is what i have to create the dropdown box

Code:
&lt;? $dropdown_js = 'onchange=SomeFunction();"';?&gt;
&lt;?=form_dropdown('link_type',$link_types,$this->validation->link_type,$dropdown_js)?&gt;

This works fine, what i would like it to do though, is get the value of the selected item in the dropdown box, and have that as the div "id" so that if i choose something with the value of "name" it shows <div id="name"></div> and hides the rest.

If someone has made something like this, or know how i would get started, that would be most appreciated, i have been racking my brains to figure this one out, but im far from a wiz at javascript.

Thanks All.

Smile

#2
[eluser]SeanJA[/eluser]
Since you admit to not being a wiz at this javascript stuff you might want to take a look at jQuery, I am sure that they have a function for what you are looking for. I am no javascript wiz either... but I have no problems figuring out what to do with jQuery. Wink

For example:

Code:
$("#header>h4").click(function(){
  $(this).fadeOut("fast")
});

Fades out the h4 in the header

#3
[eluser]BigJobbies[/eluser]
Hey,

Thanks for the reply, i know a little bit of the jQuery ... Im not sure that the function you have stated above works on dropdown boxes though, since all i have to go on is value="blah" instead of an ancor like h4 or another tag like that.

Cheers,

#4
[eluser]SeanJA[/eluser]
Well, no it will not work on drop down lists, it was an example of the simplicity of the code. Alas, considering it a bit more, I think you will end up having to use ajax to do what you want to do... Sad

Code:
Person selects box -> post to server -> return value -> display new drop down box

#5
[eluser]SeanJA[/eluser]
Actually, I have found this right here which might be helpful to you:

http://jeradbitner.com/node/16


This comment especially:

http://jeradbitner.com/node/16#comment-34

#6
[eluser]BigJobbies[/eluser]
Thanks for the link .. I have had a look at the code

Code:
function changeSelect() {
var num_selected = $('#myselect').val();
// do stuff
}


HTML STUFF...
&lt;select id="myselect" onchange="changeSelect()"&gt;
<option>xxx</option>
...
</select>

The only problem i would see, is giving the select an id ... using the form helper, is there a way to give it an id, not just a name ?

Sorry, im a bit of a newbie with this CI thing

Cheers,

#7
[eluser]Dave Stewart[/eluser]
You shouldn't really be hard-coding the select id into the function. It's far more flexible to pass a reference to the dropdown in the function call.

jQuery is also a good way to go, but you need to know a little JS to get to grips with it.

Bung this in your HTML page and see how you get on.

Code:
&lt;script type="text/javascript"&gt;

    function updateDivs(select){
    
        // grab the div to be shown
            var selectedItem    = select.options[select.selectedIndex];
            var nextDiv            = document.getElementById(selectedItem.value);
            
        // has this function been run before? (this block will only run once per page load)
        // if not, the global variable "lastDiv" will be undefined, so instead, we're going to
        // choose last div to be the first option in the select
            if(window.lastDiv == undefined){
                var firstItem        = select.options[0];
                window.lastDiv        = document.getElementById(firstItem.value);
                }
            
        // hide the last div
            if(window.lastDiv != undefined){
                window.lastDiv.style.display = 'none';
                }
                
        // show the next div
            if(nextDiv != undefined){
                nextDiv.style.display = 'block';
                }
                
        // update a global variable to remember the last div that was shown
        // so it can be hidden when the next one is selected.

        // generally in OO frameworks, globals are not the best solution, but for a
        // quick and dirty solution, it will do here
            window.lastDiv = nextDiv;
        
        }

&lt;/script&gt;

<div id="divs">
    <div id="first">Number 1</div>
    <div id="second" style="display:none">Number 2</div>
    <div id="third" style="display:none">Number 3</div>
</div>

&lt;form id="form1" name="form1" method="post" action=""&gt;
    &lt;select name="select" id="select" onchange="updateDivs(this)"&gt;
        <option value="first">first</option>
        <option value="second">second</option>
        <option value="third">third</option>
    </select>
&lt;/form&gt;

Cheers,
Dave

#8
[eluser]Dave Stewart[/eluser]
Actually, if you wanted to store the global variable somewhere else, you could just store it on the original select element by replacing the word "window" in the script above with "select".

That way the <select> element both calls the function and stores and retrieves the last div hidden from itself, thus, you could have several dropdowns, each with their own sets of divs to show and hide.

#9
[eluser]SeanJA[/eluser]
Isn't this all going to make for a really messy page though? And all of those hidden divs that will be completely inaccessable for someone who can't use javascript (Sorry... I just hate relying too much on something that not everyone is using).

#10
[eluser]Dave Stewart[/eluser]
[quote author="SeanJA" date="1214338167"]Isn't this all going to make for a really messy page though?[/quote]

I guess it depends how much content you have, and the context of the usage.
If it's something like a form, where you want to show alternative options, then the div route is a good one, as it's instant.
If it's a small amount of information, or you have to read a fair bit so you can afford the initial load, then it's also a good option.
If perhaps you need security, or are worried about download, then you coudl do it with AJAX, but there'll likely be a short delay.

[quote author="SeanJA" date="1214338167"]And all of those hidden divs that will be completely inaccessable for someone who can't use javascript (Sorry... I just hate relying too much on something that not everyone is using).[/quote]

Well, there's no point starting with either an onchange handler or JQuery (your suggestion) if you're going to worry about that!

If you are worried about that, then you just invoke the hidden divs functionality using a document.ready or body.onload handler, and if they've JS turned off, the divs will remain visible.

For 99% of apps these days, JS is a prerequisite.


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


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