Question

jsscriptfile
cssfile

I am having problems sending the value from the select box name icolorDEVICE this is a third level block element that is displayed based on the choices above. The GB check box passes its value but for some reason the select will not. The select boxes from the first and second level will pass values.

function deviceshow(element){
    //document.getElementById("nothing").style.display = element =="nothing"?"block":"none";
    document.getElementById("nanodevice").style.display = element =="nanodevice"?"block":"none";
    document.getElementById("iPodclassicdevice").style.display = element =="iPodclassicdevice"?"block":"none";
    document.getElementById("iTouchdevice").style.display = element =="iTouchdevice"?"block":"none";
    document.getElementById("iPhonedevice").style.display = element =="iPhonedevice"?"block":"none";                    
    document.getElementById("iPaddevice").style.display = element =="iPaddevice"?"block":"none";

};

This code is working great. The form is live online at http://www.moneygrowsonappletrees.com I inserted a var_dump($_POST); in my php to see what values are getting sent in the form.
This is what comes back on the array: take note the to icolorDEVICE name: it was set to Black in the form.

 array(0) { } array(22) { ["device"]=> string(10) "nanodevice" ["nanoIpod"]=> string(5) "nano1" ["GB"]=> string(1) "4" ["icolorDEVICE"]=> string(0) "" ["USBcable"]=> string(3) "YES" ["iPodclassic"]=> string(0) "" ["itouch"]=> string(0) "" ["iphoneversion"]=> string(8) "iphone4S" ["carrierDEVICE"]=> string(0) "" ["WritenDoc"]=> string(3) "YES" ["iPad"]=> string(0) "" ["first_name"]=> string(7) "Anthony" ["lastname"]=> string(5) "Dolan" ["email"]=> string(17) "[e-mail]" ["phone"]=> string(12) "978-985-6598" ["Address1"]=> string(10) "89 Sorento" ["Address2"]=> string(4) "time" ["City"]=> string(9) "worcester" ["State"]=> string(2) "ME" ["Zip"]=> string(5) "01602" ["DeviceCondition"]=> string(5) "Hello" ["Submit"]=> string(6) "Submit" } 

The nano color was set to black. Nothing was passed. I did try making the name specific to the select box but the same result was supplied.

<legend>Please select your device?</legend>
<label for="devicetype" class="textInput">Device:</label>
<select onchange="deviceshow(this.value);" name="device">
  <option value="" selected="selected"></option>
  <option value="nanodevice">iPod nano</option>
  <option value="iPodclassicdevice">iPod classic</option>
  <option value="iTouchdevice">iPod touch</option>
  <option value="iPhonedevice">iPhone</option>
  <option value="iPaddevice">iPad</option>
</select>

This is the second level that lets you choose what version of Nano. Then you get all the options that came with that version. Space, headphone, color ect. The check boxes will pass all values. The select boxes will not pass value on this level. Funny thing is you can’t comment out your code on this level either. I feel like it has to do with the hierarchy of the css, class attributes. I was wondering if I would check the form before it is submit with a php isset but not sure how to do that and pass the value from the select box.

    <label for="nano" class="textInput">iPod nano:</label>
        <select onchange="nanoshow(this.value);" name="nanoIpod">
          <option value=""></option>
            <option value="nano1">iPod nano</option>
            <option value="nano2">iPod nano 2nd generation</option>
            <option value="nano3">iPod nano 3rd generation</option>
            <option value="nano4">iPod nano 4th generation</option>
            <option value="nano5">iPod nano 5th generation</option>
            <option value="nano6">iPod nano 6th generation</option>
        </select>

This is the third level which doesn’t allow or pass select box values in the form. Check boxes will send. Help please. Thank You for looking into this brain stopping issue.

  <!--select nano1-->       
    <div id="nano1" style="display:none;">
            <p> 

        <input name="GB" type="checkbox" id="GB1" value="1" />
            <label for="GB1" class="check">1GB</label>
        <input name="GB" type="checkbox" id="GB2" value="2" />
            <label for="GB2" class="check">2GB</label>
        <input name="GB" type="checkbox" id="GB4" value="4" />
            <label for="GB4" class="check">4GB</label>
        <p>
            <label for="DeviceColor" class="textInput">Color:</label>
        <select name="icolorDEVICE">
            <option value=""></option>
            <option value="Black">Black</option>
            <option value="White">White</option>
        </select>
        <p>
        <input name="Earphones" type="checkbox" id="Earphones" value="YES" />
            <label for="Earphones" class="check">Earphones</label>
        <input name="USBcable" type="checkbox" id="USBcable" value="YES" />
            <label for="USBcable" class="check">USB cable</label>

Answer 1

It looks like you have several form elements with the same name. You should try appending a unique id to each element name if you are going to have multiple products in one form.

for example:

<select name="nano5_icolorDEVICE">