#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    4
    Rep Power
    0

    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 } ?>
  2. #2
  3. Mad Scientist
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Oct 2007
    Location
    North Yorkshire, UK
    Posts
    3,660
    Rep Power
    4123
    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(){
    or

    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
    I said I didn't like ORM!!! <?php $this->model->update($this->request->resources[0])->set($this->request->getData())->getData('count'); ?>

    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 ]
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,870
    Rep Power
    369
    there is jquery autosuggest, i would use that
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    4
    Rep 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.
  8. #5
  9. Mad Scientist
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Oct 2007
    Location
    North Yorkshire, UK
    Posts
    3,660
    Rep Power
    4123
    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]
    I said I didn't like ORM!!! <?php $this->model->update($this->request->resources[0])->set($this->request->getData())->getData('count'); ?>

    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 ]
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    4
    Rep Power
    0
    Thanks Northee. Let me check it out. Thanks for helping again.

IMN logo majestic logo threadwatch logo seochat tools logo