Bringing auto suggestion in the triple dropdown logic.

[saravanataee]

Dear all,

                    I am having a problem. I have a php form where i have triple drop down's connected. i.e

I select the value from the 1st dropdown and based on that value 2nd dropdown's value will be loaded and similarly the 3rd one.

 

It works fine as of now.

 

But now suddenly i want to turn the 1st dropdown into a textbox with auto suggestion. I know how to bring auto suggestion in php. But the problem is that, inside the select i have used option value as the id to next select. i.e

 

 

<select name="product_id" id="product_id">

<option value="0"> -- Select Product -- </option>

<?php foreach($get_all_product as $value) { ?>

<option value="<?php echo $value['product_id']; ?>"><?php echo $value['product_name']; ?></option>

<?php }?>

</select>

 

So, i m not able to pass this id if i make the select into a textbox werent i m not allowed to have option value. So can anyone help me over come this issue. I knew ajax or jquery will help me in this. But dono how to proceed with.

 

Any help is must appreciated.

 

My original form code is:

 

 

<style type="text/css">

td {

    width:800px;

}

</style>



<script type="text/javascript" charset="utf-8">

           $(function(){

              $("select#product_id").change(function(){

                var get_package_url = '<?php echo HOME_URL; ?>select.php';

                $.getJSON(get_package_url,{product_id: $(this).val(), ajax: 'true'}, function(j){

                  var options = '';

                  options += '<option value="0"> -- Select -- </option>';

                  for (var i = 0; i < j.length; i++) {

                    options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';

                  }

                  $("select#package_id").html(options);

                })

              })

              

              $("select#package_id").change(function(){

                var get_package_url = '<?php echo HOME_URL; ?>select.php';

                $.getJSON(get_package_url,{package_id: $(this).val(), ajax: 'true'}, function(j){

                  for (var i = 0; i < j.length; i++) {

                    var value = j[i].optionDisplay;

                  }

                  $("#package_qty").val(value);

                })

              })

              

            })

            

</script>

<script>

    $(function() {

        $( "#datepicker" ).datepicker({ altFormat: "dd-mm-yyyy" });

    });

</script>

            

<form action="<?php echo base_url(); ?>purchase_order/add" method="post">

<table border="1">

<tr>

<td> <b>Product </b>



<select name="product_id" id="product_id">

<option value="0"> -- Select Product -- </option>

<?php foreach($get_all_product as $value) { ?>

<option value="<?php echo $value['product_id']; ?>"><?php echo $value['product_name']; ?></option>

<?php }?>

</select>

</td>

<td> <b>Order Qty </b>

<input type="text" name="quantity" value="" style="width:75px;" /></td>

<td> <b>Package</b>

<select name="package_id" id="package_id">

</select>

</td>

<td> <b> Qty / Packing</b>

<input type="text" name="package_qty" id="package_qty" value="" readonly="readonly" style="width:75px;" /></td>



<td colspan="2">  

<input type="submit" name="submit" value="Add to Cart" /> </td>

</tr>



</table>

</form><br/><br/>



<?php if($this->cart->contents()) { ?>

<h2>Ordered Cart</h2> <br/>

<table border="1">

<tr>

<td> <b> Product Name </b> </td>

<td> <b> Price</b> </td>

<td> <b> Package Qty</b> </td>

<td> <b>No of Qty </b></td>



<td align="right"> <b>Amount </b></td>

<td align="right"> <b>Action </b></td>

</tr>

<?php $grand_total = 0; foreach ($this->cart->contents() as $items) { ?>

<tr>

<td> <?php echo $items['name']; ?></td>

<td> <?php echo $items['price'];//money_format('%!i',$items['price']); ?></td>

<td> <?php echo $items['package_qty']; ?></td>

<td> <?php echo $items['qty']; ?></td>



<td align="right"> <?php echo $items['amount'];//money_format('%!i', $items['amount']);

$grand_total = $items['amount']+$grand_total;



$discount= $grand_total * 40/100;



$gross_amount = $grand_total-$discount;

?></td>

<td align="right"> Remove </td>

</tr>

<?php } ?>

<tr>

<td colspan="5" align="right"><b>Grand Total</b></td>

<td align="right"><b><?php echo $grand_total;//money_format('%!i', $grand_total); ?></b></td>



</table>

<form method="post" action="<?php echo base_url()."purchase_order/create"; ?>">



Addtional Details :

<textarea rows="5" cols="100" name="info"></textarea>

Date :

<input type="text" name="date" value="<?php echo date('d-m-Y'); ?>" /><br/><br/><br/><br/>

<h2> Approximate value of Order</h2><br/>

<b>Gross Amount:<b><?php echo $grand_total;?><br/>

<b>Less Discount @ 40%:<b><?php echo $discount;?><br/>

<b>Net Amount:<b><?php echo $gross_amount;?><br/>



<input type="submit" name="submit" value="Create PO" />

</form>



<?php } ?>

Thanks in advance..!!