...

View Full Version : Using a function for multiple items



Local Hero
10-16-2005, 06:59 AM
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!

_Aerospace_Eng_
10-16-2005, 07:02 AM
Umm it would be helpful if you actually posted the code.

Local Hero
10-16-2005, 07:28 AM
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.


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

vwphillips
10-16-2005, 02:14 PM
<!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>

Local Hero
10-16-2005, 05:49 PM
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):


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

vwphillips
10-16-2005, 06:30 PM
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.

Local Hero
10-16-2005, 06:41 PM
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.

vwphillips
10-16-2005, 07:29 PM
still dont get it but


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

Local Hero
10-16-2005, 07:56 PM
Great! I'm going to play with the code a bit. Thank you so much for your help and patience!

Pyth007
10-19-2005, 01:43 AM
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:


var counter;
var myType1="T-shirt"; var myType2="Jeans";
var mySize1="Large"; var mySize2="Small";
var myColor1="Red"; var myColor2="Blue";
for (counter=1; counter < 3; counter++)
{
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! )



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum