Two dropdown list and save in database with PHP

Question

In that project, I want to create two drop down lists(category, item). If I select one of the category named car, then item drop down list should have: Honda, Volvo, Nissan.

If I select one of the category named phone, then item drop down list should have: iPhone, Samsung, Nokia.

HTML:

    <select id="cat">
        <option val="car">car</option>
        <option val="phone">phone</option>
    </select>

    <select id="item">

    </select>

JavaScript:

cars=new Array("Mercedes","Volvo","BMW","porche");
phones=new Array('Samsung','Nokia','Iphone');

populateSelect();

$(function() {

      $('#cat').change(function(){
        populateSelect();
    });

});


function populateSelect(){
    cat=$('#cat').val();
    $('#item').html('');


    if(cat=='car'){
        cars.forEach(function(t) { 
            $('#item').append('<option value="cars[]">'+t+'</option>');
        });
    }

    if(cat=='phone'){
        phones.forEach(function(t) {
            $('#item').append('<option value="phones[]">'+t+'</option>');
        });
    }

} 

And then in PHP:

$cat=$_request['cat'];
$phones=$_request['phones'];

I want to save first dropdown(cat) and second dropdown(item) in database with PHP, but Error. Help me to save this two dropdown in database.

Answer 1

try this - your select did not had any name = and your values where totally wrong

<select name="cat[]" id="cat">
    <option val="car">car</option>
    <option val="phone">phone</option>
</select>

<select name="item[]" id="item">

</select>



cars=new Array("Mercedes","Volvo","BMW","porche");
phones=new Array('Samsung','Nokia','Iphone');

populateSelect();

$(function() {

  $('#cat').change(function(){
    populateSelect();
  });

});


function populateSelect(){
  cat=$('#cat').val();
  $('#item').html('');


  if(cat=='car'){
      cars.forEach(function(t) { 
          $('#item').append('<option value="cars'+t+'">'+t+'</option>');
    });
}

if(cat=='phone'){
    phones.forEach(function(t) {
        $('#item').append('<option value="'+t+'">'+t+'</option>');
    });
}

}

Answer 2

Try to define variables and try

var cars=new Array("Mercedes","Volvo","BMW","porche");
var phones=new Array('Samsung','Nokia','Iphone');

Answer 3

1.) To retrieve values from the selects with PHP they need to be inside a form that the user will submit to a page that will process the data. The selects also need a name attribute for this.

2.) <option val= is incorrect. It should be <option value=. Note that if you leave out the value attribute, the option itself will be the value.

3.) $_request is case sensitive and needs to be capitalized: $_REQUEST

Assuming you will process the data on a page called processor.php, you can try something like this:

HTML:

<form action="processor.php" method="POST">
    <select id="cat" name="cat">
        <option value="car">car</option>
        <option value="phone">phone</option>
    </select>

    <select id="item" name="item">

    </select>

    <input type="submit" name="submit" />

</form>

JAVASCRIPT:

cars=new Array("Mercedes","Volvo","BMW","porche");
phones=new Array('Samsung','Nokia','Iphone');

populateSelect();

$(function() {

      $('#cat').change(function(){
        populateSelect();
    });

});


function populateSelect(){
    cat=$('#cat').val();
    $('#item').html('');


    if(cat=='car'){
        cars.forEach(function(t) { 
            $('#item').append("<option value='"+t+"'>"+t+"</option>");
        });
    }

    if(cat=='phone'){
        phones.forEach(function(t) {
            $('#item').append("<option value='"+t+"'>"+t+"</option>");
        });
    }

} 

PHP: (In this example, the form is submitted to an example page processor.php)

if (isset($_POST['submit'])) {
    $cat = $_POST['cat'];
    $item = $_POST['item'];
    // You now have the user selections saved in the above variables and
    // can proceed with inserting them into the database...
    // ... use mysqli or pdo to connect to and query the db   
}

Answer 4

     <form action="http://localhost/rat.html.php" method="POST">
           <select name="car" id="car">
                <option value="car">Car</option>
                <option value="phone">Phone</option>
           </select>

           <select name="items" id="items">
           </select>

           <input type="submit" value="submit" name="submit"/>
      </form>

     <script type="text/javascript" >
        var cars=["Mercedes","Volvo","BMW","porche"]
        var phones=['Samsung','Nokia','Iphone']

        var ele = document.getElementById('car');

        ele.onchange = function(){addItem(this.value,"items")}

        function addItem(item,id){
            var ele = document.getElementById(id);
        ele.innerHTML = "";

        var elements = (item=="car")?cars : phones;         


        for(var i=0;i<elements.length;i++){
            ele.innerHTML += "<option value="+elements[i]+">"+elements[i]+" </option>"
                }   
        }
    </script>

    //rat.html.php

    <?php
    $name = $_POST['car'];
    $it = $_POST['items'];
    echo($name);
    echo($it);

    ?>