auto generate text box with database values when drop down list selected

Question

I have two interdependent drop drown, 2nd drop down value populates when 1st drop down value selected, When i select 2nd drop down it has to populate text boxes with the values stored in database.

My drop down list is working but i am not getting how to populate text boxes when 2nd drop down selected.

Here is my code

jquery

<script>

    function showItems(sel) {
        var cat_id = sel.options[sel.selectedIndex].value;  
        $("#output1").html( "" );

        if (cat_id.length > 0 ) {

         $.ajax({
                type: "POST",
                url: "fetch_items.php",
                data: "cat_id="+cat_id,
                cache: false,
                beforeSend: function () {
                    $('#output1').html('<img src="loader.gif" alt="" width="24" height="24">');
                },
                success: function(html) {    
                    $("#output1").html( html );
                }
            });
        }
    }
    </script>

Form(dropdown)

<div class="formSep">

<?php
$sql2 = "SELECT * FROM item_category";
$query2 = mysql_query($sql2);
?>

<select name="category" onChange="showItems(this);">
  <option value="">Item Category</option>
<?php while ($rs2 = mysql_fetch_array($query2)) { ?>
  <option value="<?php echo $rs2["item_id"]; ?>"><?php echo $rs2["name"]?></option>
<?php } ?>
</select>




 <div id="output1"></div>

fetch_items.php

<?php

error_reporting(0);
include("../connect.php");
include("../admin_auth.php"); 

$cat_id = ($_REQUEST["cat_id"] <> "") ? trim( addslashes($_REQUEST["cat_id"])) : "";
if ($cat_id <> "" ) { 
$sql = "SELECT * FROM items where category=".$cat_id."";
$count = mysql_num_rows( mysql_query($sql) );
if ($count > 0 ) {
$query = mysql_query($sql);
?>

<select name="items">
    <option value="">Items</option>
    <?php while ($rs = mysql_fetch_array($query)) { ?>
    <option value="<?php echo $rs["name"]; ?>"><?php echo $rs["name"]; ?></option>
    <?php } ?>
</select>

<?php 
    }
}
?>

in textboxes i should get values from items table, for that query

$m1 = "select * from order_line_items where order_id=".$order_id."";
                   $result = mysqli->query($m1);

                   $row = $result->fetch_array(MYSQLI_ASSOC);

Please suggest me how to generate text boxes.

Answer 1

Here's a poor attempt to help you, and I've made a huge number of assumptions.

This FIDDLE is operational with the general concepts you mentioned.

I've assumed that the first option list is populated for php code on the same page.

The second option list is generated after a selection from the first list, and then an AJAX call to a db (hypothetical).

Then after selecting from the second list, another ajax call is made that returns a json data. That data is parsed and distributed.

Perhaps this will give you a start.

A LOT of JS

var vartopass;

$('.option1').append("<option id='africa'>Africa</option><option id='india'>India</option><option id='namerica'>North America<option>");

$('.option1').on('change', function(){

    if( $(".option1 #africa").prop('selected') === true )
       {
       $('.option2').append("<option id='elephant'>Elephant</option><option id='rhinoceros'>Rhinoceros</option><option id='giraffe'>Giraffe</option>");
       $('.option2').css('visibility', 'visible');
       }

    if( $(".option1 #india").prop('selected') === true )
      {
       $('.option2').append("<option id='tiger'>Tiger</option><option id='waterbuffalo'>Water Buffalo</option><option id='snowleopard'>Snowleopard</option>");
       $('.option2').css('visibility', 'visible');
       }

    if( $(".option1 #namerica").prop('selected') === true )
      {
       $('.option2').append("<option id='deer'>Mule Deer</option><option id='elk'>Elk</option><option id='moose'>Moose</option>");
       $('.option2').css('visibility', 'visible');
       }        
});

$('.option2').on('change', function(){
    vartopass = $('.option2').children(":selected").attr("id");
    console.log( vartopass );
/*
This is a hypothetical data return from an ajax call that takes the data from your option list, passes it to a php file, the server returns JSON data, and it is parsed and loaded into divs.

$.ajax({
            type: "POST",
            url: "gogetthestuff.php",
            data: {animal: vartopass}
            .done(function(data){
                    $('.putmehere1').val(result.height);
                    $('.putmehere1').val(result.weight);
                                 });
        });
*/



//Hypothetical callback from JSON array returned by AJAX:
var animals = [
    {
    "elephant": {
        "height": "126",
        "weight": "6000"
    },
    "rhinocerus": {
        "height": "88",
        "weight": "4000"
    },
    "giraffe": {
        "height": "400",
        "weight": "2000"
    },
    "tiger": {
        "height": "44",
        "weight": "1000"
    },
    "waterbuffalo": {
        "height": "128",
        "weight": "5000"
    },
    "snowleopard": {
        "height": "38",
        "weight": "600"
    },
    "deer": {
        "height": "98",
        "weight": "180"
    },
    "elk": {
        "height": "188",
        "weight": "2000"
    },
    "moose": {
        "height": "288",
        "weight": "5000"
    }
}
];

$('.putmehere1').html( "<br />Animal height: " + 
                        eval( 'animals[0].' + vartopass + '.height' ) + 
                        " inches" );
$('.putmehere2').html( "<br />Animal weight: " + 
                        eval( 'animals[0].' + vartopass + '.weight' ) + 
                        ' pounds' );

});