Display text when Select is chosen

282 views Asked by At

I have a form with select, radio and checkbox options. PHP builds an array of the options and designators assigned to them. How do I display the designator for each option when the option is selected?

Selects and options code:

<select onchange="bundle.changeSelection(this)" id="option-1" name="bundle_option_1" class="option-1">
    <option value="1">Option1</option>
</select>
<ul class="options-list">
    <li><input type="radio" onclick="bundle.changeSelection(this)" class="radio" id="bundle-option-2-select-2" name="bundle_option_2" value="2"/></li>
</ul>
<ul class="options-list">
    <li><input type="checkbox" onclick="bundle.changeSelection(this)" class="checkbox" id="bundle-option-3-select-3" name="bundle_option_3" value="3"></li>
</ul>

Array generated:

Array ( [0] => Designator1 [1] => Designator2 [2] => Designator3 [3] => Designator4 [4] => Designator5 )

Div for display:

<div class="configuration" id="designator"></div>

Thank you.

1

There are 1 answers

0
TotalWipeOut On

I don't know magento, but this seems just to need a JavaScript (well PrototypeJS) solution, so try this:

<script>
document.observe('dom:loaded', function() {
    $$('[name^=bundle_option]').invoke('observe','click',function(e) {
         var el=e.element(),
             output=$('designator');
         if(el.nodeName=='SELECT') {
            output.innerHTML=el.options[el.selectedIndex].text;
         }
         else if(el.nodeName=='INPUT' && (el.type=='checkbox' || el.type=='radio')) {

            //- just puts in the value, prob not what you want 
            //output.innerHTML = el.value;

            //- or if theres a label something like 
            //- (COMPLETE GUESS as dont have the HTML)
            //- find the label for the input
            var label = el.up().select('label')[0];

            //- grab its text content and put in the output div
            if(label) output.innerHTML = label.textContent || label.innerText;
         }
    });
});
</script>

place this code on the page somewhere, I cannot test this so let me know if its the right solution for you and if it works!