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 10 of 10
  1. #1
    New Coder
    Join Date
    May 2005
    Location
    Utah
    Posts
    65
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Using a function for multiple items

    This is not my exact code, but the idea is the same.

    I have a drop down(product1) that calls a function and changes a text box(color1). The user can add as many dropdown menus as they like. Each increases by 1. Product2, Color2; Product3, Color3; Productx, Colorx; etc. What would I need to do to have the same function control items independently?

    My idea - I don't know how, but if the function could recognize that Product1 matches with color1, and it the product # is 13 then the function changes color #13, I think it woud work.

    Any ideas? Thanks!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Umm it would be helpful if you actually posted the code.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    May 2005
    Location
    Utah
    Posts
    65
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Well there is a lot going on with the code that doesn't pertain to my problem, so I'd rather not display they whole thing.
    Code:
    <select name="select_1<?php echo( $e ); ?>" onChange="switch_select();">
    <select name="select_2<?php echo( $e ); ?>"  >
    
    function switch_select() {	
      for (loop = window.document.form_1.select_2.options.length-1; loop > 0; loop--)
      {
        window.document.form_1.select_2.options[loop] = null;
      }
      for (loop = 0; loop < option_array[window.document.form_1.select_1.selectedIndex].length; loop++)
      {
        window.document.form_1.select_2.options[loop] = new Option(option_array[window.document.form_1.select_1.selectedIndex][loop]);
      }
      window.document.form_1.select_2.selectedIndex = 0;
    }
    Like I said, there is more to the code but select_1 and select_2 change depending on $e. So each set of inputs increase by adding 1 to the end. Select_11, select_21... But I'm not sure how to get the function to recognize that is the function is activated by "select_11", then change "select_21" and any value that ends in a specific number.

    If I'm not making sense, of you need more please let me know. Thanks!

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    var Cnt=0;
    
    function Add(){
     t=document.getElementById('target');
     c=document.getElementById('clone');
     s=c.getElementsByTagName('SELECT')[0].cloneNode(true);
     ip=c.getElementsByTagName('INPUT')[0].cloneNode(true);
     s.tb=ip;
     t.appendChild(s);
     t.appendChild(ip);
    // not realy necessary
     s.id='Select'+Cnt;
     ip.id='Input'+Cnt;
     Cnt++;
    }
    
    function UpDate(obj){
     if (obj.selectedIndex<1){ return; }
     obj.tb.value=obj.options[obj.selectedIndex].text;
    }
    //-->
    </script>
    </head>
    
    <body>
    <div id="target" style="width:150px;" ></div>
    <input type="button" value="Add" onclick="Add();" >
    
    <div id="clone" style="position:absolute;visibility:hidden;" >
    <select onchange="UpDate(this);">
    <option value="0" >Select</option>
    <option value="1" >Red</option>
    <option value="2" >Green</option>
    <option value="3" >Blue</option>
    </select>
    <input type="text" size="10" >
    </div>
    </body>
    
    </html>

  • #5
    New Coder
    Join Date
    May 2005
    Location
    Utah
    Posts
    65
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Wow, that code works perfectally but unfortunataly it's not what i'm looking for. Perhaps it would help to view my situation (sorry I didn't do this before, I thought there would be a simple method). Please look at http://www.localheroclothing.com/step2y.php. You can select a product and it will change the color and size options that relate to that product. Now click "add a row" and see that it won't let you change the size and color because the php added 1 to the value of the "select name". The product input was "select_11" and when a row is added the new row becomes "select_12", the color input changes to "select_22" and the size input changes to "select_X2". I have left out the arrays, but here is what happens (the $e increases by 1 each new row):

    Code:
    <select name="select_1<?php echo( $e ); ?>" id="productdd" onChange="switch_select(); switcher_select();">
            <option>-- Products --</option>
            <option value=12.99>T-Shirt</option>
            <option value=13.99>Longsleeve T-Shirt</option>
            <option value=19.99>Raglan Jersey Shirt</option>
            <option value=12.99>Woman's T-Shirt</option>
            <option value=14.99>Jr. Capsleeve</option>
            <option value=12.99>Jr. Tank Top</option>
            <option value=12.99>Jr. V-Neck</option>
            <option value=23.99>Hoodie</option>
            <option value=16.99>Sweatshirt</option>
            <option value=15.99>Trucker Hat</option>
            <option value=7.99>Mousepad</option>
         </select>
    <select name="select_2<?php echo( $e ); ?>" id="select_2" >
             <option>Please Select a Product</option>
           </select>
    <select name="select_X<?php echo( $e ); ?>" id="select_X" >
               <option>Please Select a Product</option>
             </select>
    
    
    
    function switch_select() {
      for (loop = window.document.form_1.select_21.options.length-1; loop > 0; loop--)
      {
        window.document.form_1.select_21.options[loop] = null;
      }
      for (loop = 0; loop < option_array[window.document.form_1.select_11.selectedIndex].length; loop++)
      {
        window.document.form_1.select_21.options[loop] = new Option(option_array[window.document.form_1.select_11.selectedIndex][loop]);
      }
      window.document.form_1.select_21.selectedIndex = 0;
    }
    
    function switcher_select(){	
    	var selObj = document.getElementById('productdd');
    	var selIndex = selObj.selectedIndex;
      for (loop = window.document.form_1.select_X1.options.length-1; loop > 0; loop--)
      {
        window.document.form_1.select_X1.options[loop] = null;
      }  
      for (loop = 0; loop < optionX_array[window.document.form_1.select_11.selectedIndex].length; loop++)
      {
        window.document.form_1.select_X1.options[loop] = new Option(optionX_array[window.document.form_1.select_11.selectedIndex][loop]);
      } 
      window.document.form_1.select_X1.selectedIndex = 0;
     ;
    }
    I would like to use php to add the rows of inputs because I think it is easier to change the product name tag. But I'd like to use JS to change the colors and sizes so the user doesn't have to wait for the page to load every time.

    I think that it would work if my functions knew which product input goes with which color & size. Is there a line that I could add that would say that the last digit value[i] of "select_1[i]" changes "select_2[i]" and "select_X[i]"?

    Or, can I tell the Javascript to check what row ( $e ) it should mofify?
    Last edited by Local Hero; 10-16-2005 at 06:00 PM.

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    product name tag easily be changed by js and other selects populated to suit so long as arrays are available.

    Also notice that ids are not changed therefore ids are illegal

    cant see what php is adding apart from loading the correct array which may be an issue if updated from a data base.

  • #7
    New Coder
    Join Date
    May 2005
    Location
    Utah
    Posts
    65
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Sorry for not being clearer. The array is in the javascript, but it is just lots of colors and sizes. All that the php does is add 1 to the value of the name. I'm using this as an order form and the php remembers the seperate products sizes and colors on other pages. I thought just letting the function know which inputs to apply itself to would be the easiest way, but if you had another idea I would appreciate it. Thanks for the help.

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    still dont get it but
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    var ProductsAry=new Array();
    ProductsAry[0]=['T-Shirts',['white','black','yellow','blue'],['Small','Medium','Large']];
    ProductsAry[1]=['Longsleeve T-Shirts',['pink','black','yellow','blue'],['VSmall','Medium','Large']];
    ProductsAry[2]=['Woman\'s T-Shirt',['red','black','yellow','blue'],['SSSSmall','Medium','Large']];
    ProductsAry[3]=['Raglan Jersey Shirt',['whiteish','black','yellow','blue'],['Small','Mmmmedium','Large']];
    ProductsAry[4]=['Jr. Tank Top',['wh111ite','black','yellow','blue'],['SVVVmall','Medium','Large']];
    ProductsAry[5]=['Jr. V-Neck',['222white','black','yellow','blue'],['S222mall','Medium','Large']];
    ProductsAry[6]=['Jr. Capsleeve',['333white','black','yellow','blue'],['S333mall','Medium','Large']];
    ProductsAry[7]=['Hoodie',['444white','black','yellow','blue'],['444Small','Medium','Large']];
    ProductsAry[8]=['Sweatshirt',['555white','black','yellow','blue'],['555Small','Medium','Large']];
    ProductsAry[9]=['Trucker Hat',['777white','black','yellow','blue'],['S666mall','Medium','Large']];
    ProductsAry[10]=['Mousepad',['888white','black','yellow','blue'],['888Small','Medium','Large']];
    
    var Cnt=0;
    
    function Add(){
     t=document.getElementById('target');
     sels=t.getElementsByTagName('SELECT');
     for (zxc0=0;zxc0<sels.length;zxc0++){
      if (sels[zxc0].selectedIndex<1){
       return;
      }
     }
     c=document.getElementById('clone');
     s1=c.getElementsByTagName('SELECT')[0].cloneNode(true);
     t.appendChild(s1);
     s1.options[0]=new Option('Select Product','',true,true);
     for (zxc0=0;zxc0<ProductsAry.length;zxc0++){
      s1.options[zxc0+1]=new Option(ProductsAry[zxc0][0],'',true,true);
     }
     s1.selectedIndex=0;
     s1.onchange=function(){ PopSelect1(this); }
     s2=c.getElementsByTagName('SELECT')[0].cloneNode(true);
     t.appendChild(s2);
     s2.options[0]=new Option('Select Product','',true,true);
     s2.selectedIndex=0;
     s2.onchange=function(){ PopSelect2(this); }
    
     s3=c.getElementsByTagName('SELECT')[0].cloneNode(true);
     t.appendChild(s3);
     s3.options[0]=new Option('Select Product','',true,true);
     s3.selectedIndex=0;
     s1.sels=[s2,s3];
     s2.master=s1;
     s3.master=s1;
     s1.name='Product'+Cnt;
     s2.name='Color'+Cnt;
     s3.name='Size'+Cnt;
    alert('select names are\n'+s1.name+', '+s2.name+', '+s3.name)
     Cnt++;
    }
    
    function PopSelect1(obj){
     if (obj.selectedIndex<1){ return; }
     ary=ProductsAry[obj.selectedIndex-1];
     obj.sels[0].options.length=0;
     obj.sels[0].options[0]=new Option('Select One','',true,true);
     for (zxc0=0;zxc0<ary[1].length;zxc0++){
      obj.sels[0].options[zxc0+1]=new Option(ary[1][zxc0],'',true,true);
     }
     obj.sels[0].selectedIndex=0;
     obj.sels[1].options.length=0;
     obj.sels[1].options[0]=new Option('Select One','',true,true);
     obj.sels[1].selectedIndex=0;
    }
    
    function PopSelect2(obj){
     if (obj.master.selectedIndex<1||obj.master.sels[0].selectedIndex<1){ return; }
     ary=ProductsAry[obj.master.selectedIndex-1];
     obj.master.sels[1].options.length=0;
     obj.master.sels[1].options[0]=new Option('Select One','',true,true);
     for (zxc1=0;zxc1<ary[2].length;zxc1++){
      obj.master.sels[1].options[zxc1+1]=new Option(ary[2][zxc1],'',true,true);
     }
     obj.master.sels[1].selectedIndex=0;
    }
    
    //-->
    </script>
    </head>
    
    <body>
    <div id="target" style="width:450px;" ></div>
    <input type="button" value="Add" onclick="Add();" >
    
    <div id="clone" style="position:absolute;visibility:hidden;" >
    <select style="width:150px;" ></select>
    </div>
    
    </body>
    
    </html>
    added an alert with the select names
    Last edited by vwphillips; 10-16-2005 at 07:32 PM.

  • #9
    New Coder
    Join Date
    May 2005
    Location
    Utah
    Posts
    65
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Great! I'm going to play with the code a bit. Thank you so much for your help and patience!

  • #10
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Local Hero
    I think that it would work if my functions knew which product input goes with which color & size. Is there a line that I could add that would say that the last digit value[i] of "select_1[i]" changes "select_2[i]" and "select_X[i]"?
    look at using an 'eval' statement... eg:
    PHP Code:
    var counter;
    var 
    myType1="T-shirt"; var myType2="Jeans";
    var 
    mySize1="Large"; var mySize2="Small";
    var 
    myColor1="Red"; var myColor2="Blue";
    for (
    counter=1counter 3counter++)
    {
    alert("Line-item "+counter+":\nProduct: "+eval('myType'+counter)+"\nSize:"+eval('mySize'+counter)+"\nColor:"+eval('myColor'+counter));

    ( I think this would work, although I haven't tested it... point is, check out tutorials on eval method! )


  •  

    Posting Permissions

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