将条件下拉列表写入MySQL

Question

Hopefully this isn't too confusing..

I have a conditional form that has the user select a category, based on that category they'll need to choose from that category's sub categories. This works fine.

However, my issue is when writing to MySQL the Value that's inserted in my Sub Category column is always the last Select group's first Value (in this case it's "sandwich"). Example..

My Main Categories: Starters | Supper | Sandwiches

• Starters' Sub Categories: Coastal or Southern
• Supper's Sub Categories: Smokehouse or Specialties
• Sanwiches' Sub Categories: Sandwich or Po-Boy

No matter which Category/Sub Category you select, it always writes the "Sandwich" subcategory in MySQL. Make sense?

So here's my code & JSFiddle if you want to play with the dropdowns. http://jsfiddle.net/kkobayashi/5f5tw4t0/

PHP to MySQL

<?php
    if( isset( $_POST['create'] ) ):

    $cat = $_POST['cat']; 
    $catsubs = $_POST['subcategory']; 
    $name = $_POST['name'];
    $description = $_POST['description'];
    $price = $_POST['price'];

    mysql_query("INSERT INTO leDB (cat,subcategory) 
        VALUES('$cat','$catsubs')") 

    or die(mysql_error());

    echo "Success."; /** success message **/

    endif;
?>

HTML

<form action="" method="POST">
<!-- MAIN CATS -->
<select id="mainCat" class="source" name="cat">
    <option value="starters">Starters</option>
    <option value="supper">Supper</option>
    <option value="sandwiches">Sandwiches</option>
</select>


<!-- SUB CATS -->
<div id="cat_starters" class="subcategory" style="display:inline;">
    <select class="" id="starters" name="subcategory">
        <option value="coastal">Coastal</option>
        <option value="southern">Southern</option>
    </select>
</div>
<div id="cat_supper" class="subcategory hidden">
    <select class="" id="supper" name="subcategory">
        <option value="smokehouse">Smokehouse</option>
        <option value="specialties">Specialties</option>
    </select>
</div>
<div id="cat_sandwiches" class="subcategory hidden">
    <select class="" id="sandwiches" name="subcategory">
        <option value="sandwich">Sandwich</option>
        <option value="poboy">Po-Boys</option>
    </select>
</div>
</form>

JS

// Conditional Drop Down
    $(document).ready(function(){
        $('#mainCat').on('change', function() {         
            // Setting this variable to add inline
            var inline = document.querySelector('#cat_' + $(this).val() );

            // Show/Hide
            $('div.subcategory').hide();
            $('#cat_' + $(this).val() ).show();
            inline.style.display = "inline";
        });
    });

A little CSS

div.hidden { 
   display: none; 
}

Don't know how well of a job I did describing the issue, if you're confused feel free to yell at me. Thanks y'all.

Answer 1

Hiding the select does not actually remove it from the DOM, as you would see if you would check the source. It only hides it from the user.

This means that every select with the same name attribute will override the last one, hence why you only get the last one. an easy fix could be to add the name attribute to the correct select.

$(document).ready(function(){
    $('#mainCat').on('change', function() {         
        // Setting this variable to add inline
        var inline = document.querySelector('#cat_' + $(this).val() );

        // Show/Hide
        $('div.subcategory').hide().attr('name', '');
        $('#cat_' + $(this).val() ).show().attr('name', 'subcategory');
        inline.style.display = "inline";
    });
});

Answer 2

you need to add unique names to your selects. For example for starters, add name="starters" . Add names as the option values of the category.

And after that, use: $catsubs = $_POST[$cat];

Answer 3

Change the subcategory names to maybe subcategory1, ...2 and ....3 or just make them unique in the form

You need the names to be unique. The reason you end up with the same sandwich no matter what you select is because you are using the same name. When the $_POST data is sent, it sends an array with the key equal to the name in the form. So to know exactly what a user clicked, selected or typed, each name must be unique