Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Location
    Washington DC
    Posts
    338
    Thanks
    22
    Thanked 1 Time in 1 Post

    Adding optional list box on a fly

    I have a form with a select box which is dynamically populated from db. Based on the selection, additional data populates other linked boxes (an input and a textarea). The general idea: the list box has a list of products; once a product is selected, three other input boxes are populated --
    box 1 = "product desc"
    Box 2 = "inventory"
    box 3 = "unit price"

    The preceding completes the selection of product A. Now suppose I want to give the user the option of selecting another product B, any ideas on how I can achieve this? Part of the challenge --at least for me, is that this will need to stored to db, so I need to create names for the values of any additional products that are selected.

    Any thoughts!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 548 Times in 547 Posts
    If this is coded correctly your questions would have been taken care of.
    A.) the product select box should allow you to pick a different product and therefore repopulate the other boxes.
    B.) your option tags should have a unique value already so DB name is already done.
    c.) storing to DB should be done with a 'buy button'.

    Why not give us your code so we can see what's wrong with it. OR BETTER link us to your site.

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Location
    Washington DC
    Posts
    338
    Thanks
    22
    Thanked 1 Time in 1 Post
    sunfighter, thanks for your reply!

    I'm able to populate from db and link to the additional fields based on the dropdown list selection. To achieve that, I have the following code:

    PHP Code:
    <?php
    echo"
        <script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
        <script language='JavaScript'> "
    ;?>
    var num_of_cats = 17; // This is the number of categories, including the first, blank, category.
    var open_in_newwindow=1; //Set 1 to open links in new window, 0 for no.
    <?php
    include '../datalogin.php';// make sure this is available to make connection to db
    $result mysql_query("SELECT * FROM products");
    echo 
    "var option_array = new Array(num_of_cats);";
    $count=1;
    echo
    "option_array[0] = new Array(\"Please Select a Merchandise\");";
    while(
    $row mysql_fetch_array($result))
      {
    echo
    "option_array[".$count."] = new Array(\"--select One--\",\"\",\"\");";
    $count++;
    }
    $result2 mysql_query("SELECT * FROM products");
    echo
    "var text_array = new Array(num_of_cats);";
    $count=1;
    echo  
    "text_array[0] = new Array(\"Please Select a Merchandise\");";
    while(
    $row_1 mysql_fetch_array($result2))
      {
    echo 
    "text_array[".$count."] = new Array(\"".$row_1['product_desc']."\");";
    $count++;
    }
    $result3 mysql_query("SELECT * FROM products");
    echo 
    "var text_array2 = new Array(num_of_cats);";
    $count=1;
    echo 
    "text_array2[0] = new Array(\"Please Select a Merchandise\");";
    while(
    $row_2 mysql_fetch_array($result3))
      {
    echo 
    "text_array2[".$count."] = new Array(\"".$row_2['unit_cost']."\");";
    $count++;
    }
    ?>
    <?php
    echo"
    var options = 0;
    function switch_select()
    {
      for (loop = window.document.PaymentForm.select_2.options.length-1; loop > 0; loop--)
      {
        window.document.PaymentForm.select_2.options[loop] = null;
      }
      for (loop = 0; loop < option_array[window.document.PaymentForm.select_1.selectedIndex].length; loop++)
      {
        window.document.PaymentForm.select_2.options[loop] = new Option(option_array[window.document.PaymentForm.select_1.selectedIndex][loop]);
      }
        window.document.PaymentForm.select_2.selectedIndex = 0;
    }
    function switch_text()
    {
      window.document.PaymentForm.mytextarea.value = text_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex];
     window.document.PaymentForm.cost.value = text_array2[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex];
      //window.document.PaymentForm.gift_card.value = text_array3[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex];
      //window.document.PaymentForm.qty.value = text_array4[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex];
      }
    function box()
    {
      if (window.document.PaymentForm.select_2.selectedIndex == 0)
      {
        alert(\"Sorry, you have to select an item\");
      } else {
        if (open_in_newwindow==1)
        window.open(url_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex],\"_blank\");
        else
        window.location=url_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex]
      }
    }
    function set_orig()
    {
      window.document.PaymentForm.select_1.selectedIndex = 0;
      window.document.PaymentForm.select_2.selectedIndex = 0;
    }
    window.onload=set_orig
    </script> "
    ;
              
    // get product items from db again

    $get_products "select id as id_num, items as display_name2 from products order by id_num"
    $get_products_res mysql_query($get_products) or die (mysql_error()); 
    if (
    mysql_num_rows($get_products_res) < 1
      { 
           
    // no records 
           
    $display_block .="<p><em>Sorry, no records to select</em></p>"
        } 
      else 
       { 
        echo
    " <form name='PaymentForm' onSubmit='return false;'>
        <tr><td><select name='select_1' style='width:200px; color:#003399; text-align:center; font-size:1em' onChange=\"switch_select(); switch_text();\"> 
          <option>-- Select an Item --</option>"

     while (
    $recs2 mysql_fetch_array($get_products_res)) 
          { 
              
    $id_num $recs2['id_num']; 
              
    $display_name2 stripslashes($recs2['display_name2']); 
     
    //$display_block .= "<option value=\"$id_num\">$display_name2</option>"; 
     
    echo "<option>$display_name2</option>"
                         } 
          }
      echo 
    "</select> </td>"
     echo 
    "     
         <select name='select_2' onChange=\"switch_text();\" style='display:none' disabled='true'>
        <option>You need to select a category</option>
        <option></option>
        <option></option>
      </select>"
    ;
                echo
    "<td><textarea name='mytextarea' rows='2' cols='40' class='expand10-1000' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></textarea><td>
                <td valign='top' width='17%'><input  type='text' name='qty'  class=\"qty\" size='3' maxlength='3' value='' class='combo3' rel='code_id' title='' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></td>
                <td valign='top'  width='17%'><input  type='text' name='cost'  class=\"cost\" size='6' maxlength='6' value='0.00' class='combo3' rel='code_id' title='' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></td>
                </tr>
                </form>"
    ;
                
    ?>
    I know the above code is a bit messy, but it is my first attempt. But at the moment it is working --I'll tidy it up later.

    Now using jquery, I have added a button for the user to add another selection. Essentially, once the button is clicked, I want to load the above option.

    for the Jquery, I' m using:
    PHP Code:
    $(document).ready(function() {
        $(
    'input').click(function(){
            $(
    this).select();
        });
        $(
    '#addrow').click(function(){
            $(
    '.item-row:last').after('<tr class="item-row"><td class="item name"><div class="delete-wpr">[COLOR="Red"] //--LOAD SELECTION CODE HERE!--//[/COLOR]</td></tr>');
            if ($(
    '.delete').length 0) { $('.delete').show(); }//Not sure about the if clause
            
    bind();
        }); 
    Therein lies my challenge thus far...

    Any further thoughts!
    Last edited by mbarandao; 05-16-2012 at 06:46 PM.

  • #4
    Regular Coder
    Join Date
    Nov 2010
    Location
    Washington DC
    Posts
    338
    Thanks
    22
    Thanked 1 Time in 1 Post
    Any help on this!

  • #5
    Regular Coder
    Join Date
    Nov 2010
    Location
    Washington DC
    Posts
    338
    Thanks
    22
    Thanked 1 Time in 1 Post
    Resolved!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •