Bringing auto suggestion in the triple dropdown logic.

Dev Shed Forums Sponsor:

March 15th, 2013, 12:35 AM

saravanataee

Registered User

Join Date: Mar 2013

Posts: 4

Time spent in forums: 1 h 6 m 42 sec
Reputation Power: 0

PHP5 - Bringing auto suggestion in the triple dropdown logic.

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

Code:

<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:

Code:


 <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 } ?>

March 15th, 2013, 07:01 AM

Northie

Square Peg in a Round Hole

Join Date: Oct 2007

Location: North Yorkshire, UK

Posts: 3,420

Time spent in forums: 3 Weeks 5 Days 10 h 49 m 56 sec
Reputation Power: 3896

This is actually a javscript problem, not a php problem (you did post this in the PHP forum), but I'll try to help anyway.

My first suggestion would be to change this

Code:

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

to this

Code:

$("#product_id").keyup(function(){

Code:

$("#product_id").blur(function(){

and test.

the jQuery method $(this).val() will still get the value of the field (the plain text that is in the input box) so you shouldn't have to change too much else

__________________
PHP OOPS! <?php DB::Execute(SQL::makeFrom($_GET))->fetchArray()->FormatWith(Template::getInstance('default'))->printHtml(); ?>

PDO vs mysql_* functions: Find a Migration Guide Here

[ Xeneco - T'interweb Development ] - [ Are you a Help Vampire? ] - [ Read The manual! ] - [ W3 methods - GET, POST, etc ] - [ Web Design Hell ]

March 15th, 2013, 07:20 AM

paulh1983

Contributing User

Join Date: Dec 2004

Posts: 2,234

Time spent in forums: 2 Weeks 1 Day 10 h 37 m 56 sec
Reputation Power: 201

there is jquery autosuggest, i would use that

March 18th, 2013, 07:07 AM

saravanataee

Registered User

Join Date: Mar 2013

Posts: 4

Time spent in forums: 1 h 6 m 42 sec
Reputation Power: 0

Dear Northie,
Thanks for the help.
Actually my problem is with the first drop down. that is where i select product name and its id will be passed to the second drop down.

In that case only i need help. As you said that jquery this.val allows to pass the value of input can you show me an example of doing that.

Thanks for helping out.

March 19th, 2013, 05:07 AM

Northie

Square Peg in a Round Hole

Join Date: Oct 2007

Location: North Yorkshire, UK

Posts: 3,420

Time spent in forums: 3 Weeks 5 Days 10 h 49 m 56 sec
Reputation Power: 3896

unless I'm really mis-understanding the problem/what you're asking then my code will work just fine for any form element - just adjust the IDs and events.

The principle is that you bind a function to an event to the first form input type to look for changes. This could be 'change' for selects or 'keyup' for text boxes.

Inside the bound function $(this).val() will return the current value of the input. You can then use this value to interrogate the server via ajax, set something else or do pretty much anything. Once you have some content you can then set the value of some other form element by using $("selector").val(some_variable) [still inside the bound function]

March 19th, 2013, 05:24 AM

saravanataee

Registered User

Join Date: Mar 2013

Posts: 4

Time spent in forums: 1 h 6 m 42 sec
Reputation Power: 0

Thanks Northee. Let me check it out. Thanks for helping again.

PHP5 - Bringing auto suggestion in the triple dropdown logic.

Developer Shed Advertisers and Affiliates