Go Back   CodingForums.com > :: Client side development > JavaScript programming > Ajax and Design

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 05-16-2012, 04:11 AM   PM User | #1
mbarandao
Regular Coder

 
Join Date: Nov 2010
Location: Washington DC
Posts: 311
Thanks: 19
Thanked 1 Time in 1 Post
mbarandao is an unknown quantity at this point
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!
mbarandao is offline   Reply With Quote
Old 05-16-2012, 05:11 PM   PM User | #2
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,382
Thanks: 18
Thanked 350 Times in 349 Posts
sunfighter is on a distinguished road
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.
sunfighter is online now   Reply With Quote
Old 05-16-2012, 06:44 PM   PM User | #3
mbarandao
Regular Coder

 
Join Date: Nov 2010
Location: Washington DC
Posts: 311
Thanks: 19
Thanked 1 Time in 1 Post
mbarandao is an unknown quantity at this point
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..
mbarandao is offline   Reply With Quote
Old 05-18-2012, 03:37 AM   PM User | #4
mbarandao
Regular Coder

 
Join Date: Nov 2010
Location: Washington DC
Posts: 311
Thanks: 19
Thanked 1 Time in 1 Post
mbarandao is an unknown quantity at this point
Any help on this!
mbarandao is offline   Reply With Quote
Old 06-05-2012, 06:51 AM   PM User | #5
mbarandao
Regular Coder

 
Join Date: Nov 2010
Location: Washington DC
Posts: 311
Thanks: 19
Thanked 1 Time in 1 Post
mbarandao is an unknown quantity at this point
Resolved!
mbarandao is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 04:34 PM.


Advertisement
Log in to turn off these ads.