Help finishing "populate boxes" script

Local Hero

05-29-2005, 07:39 PM

I have been working on a long script (for me it's long), and I have one last thing. I have php that creates 3 input fields. Quantity, Color, and Size. The user can add another row of the same options as many times as they need. Each time they do, it also creates a box in another form telling them what they wanted, i.e. (4) - Red - Large. Check it out at http://www.localheroclothing.com/testfiles/Products/phpadd.php
Right now my problem code is similar to this:
var items = '(' + (document.forms.formjunk.amount1.value) + ')' + ' - ' + (document.forms.formjunk.size1.value) + ' - ' + (document.forms.formjunk.color1.value);
var items1 = '(' + (document.forms.formjunk.amount2.value) + ')' + ' - ' + (document.forms.formjunk.size2.value) + ' - ' + (document.forms.formjunk.color2.value);
var items2 = '(' + (document.forms.formjunk.amount3.value) + ')' + ' - ' + (document.forms.formjunk.size3.value) + ' - ' + (document.forms.formjunk.color3.value);

document.forms.orderform_16180.something.value = items;
document.forms.orderform_16180.items1.value = items1;
document.forms.orderform_16180.items2.value = items2;
It's really messy. It also won't work unless all three inputs are available, and won't allow for infinate inputs.

Isn't there an easy way to display the value of each row in infinatly possible textboxes? Here is the entire code:
<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
</HEAD><BODY>
<script type="text/javascript">
function addme() {
var qtytotal = 0, whites = 0, large = 0;
var fields = document.forms["formjunk"].elements;
for (var i=0;i<fields.length;i++) {
if (fields[i].name.indexOf("amount") == 0) {
qtytotal += new Number(fields[i].value);
// This assumes that the select element comes right after the text box
if (fields[i+1].selectedIndex == 0) {
whites += new Number(fields[i].value);
}
if (fields[i+2].selectedIndex == 2) {
large += new Number(fields[i].value);

}
}
}
document.forms.orderform_16180.total.value = qtytotal;
document.forms.orderform_16180.lightshirts.value = whites;
document.forms.orderform_16180.bigshirts.value = large;

var items = '(' + (document.forms.formjunk.amount1.value) + ')' + ' - ' + (document.forms.formjunk.size1.value) + ' - ' + (document.forms.formjunk.color1.value);
var items1 = '(' + (document.forms.formjunk.amount2.value) + ')' + ' - ' + (document.forms.formjunk.size2.value) + ' - ' + (document.forms.formjunk.color2.value);
var items2 = '(' + (document.forms.formjunk.amount3.value) + ')' + ' - ' + (document.forms.formjunk.size3.value) + ' - ' + (document.forms.formjunk.color3.value);

document.forms.orderform_16180.something.value = items;
document.forms.orderform_16180.items1.value = items1;
document.forms.orderform_16180.items2.value = items2;

}
</SCRIPT>
<form name="formjunk" method="post" action="<?php $_SERVER['PHP_SELF']; ?>">

<?php
$rowsx=1;
if(isset($_POST["rowsx"])){
$rowsx=$_POST["rowsx"];
}
for($e=1;$e<=$rowsx;$e++){
?>

Quantity
<INPUT name="amount<?php echo $e ?>" type="text" id="amount<?php echo $e ?>" onBlur="addme();">
Color<SELECT name="color<?php echo $e ?>" onChange="addme();">
<OPTION value="white">white</OPTION>
<OPTION value="black">black</OPTION>
<OPTION value="red">red</OPTION>
</SELECT>
Size<SELECT name="size<?php echo $e ?>" onChange="addme();">
<OPTION value="small">small</OPTION>
<OPTION value="med">med</OPTION>
<OPTION value="large">large</OPTION>
</SELECT>

<BR>
<?php
}
?>
<BR>
<input type="hidden" name="rows" value="<?php echo $rows+1; ?>" />
<input type="hidden" name="rowsx" value="<?php echo $rowsx+1; ?>" />
<input name="submit" type="submit" value="Add another row" />
</FORM>
<FORM name="orderform_16180">
<INPUT name="something" type="text" id="something"><br>
<?php
$rows=0;
if(isset($_POST["rows"])){
$rows=$_POST["rows"];
}
for($e=1;$e<=$rows;$e++){
?>
<INPUT name="items<?php echo $e ?>" type="text" id="items<?php echo $e ?>"><br>
<?php
}
?>
Total - <INPUT name="total" type="text" id="total">
White - <INPUT name="lightshirts" type="text" id="lightshirts">
Large - <INPUT name="bigshirts" type="text" id="bigshirts">
</FORM>
</BODY>
</HTML>
Thanks :thumbsup:

vwphillips

05-29-2005, 10:27 PM

<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
</HEAD><BODY>
<SCRIPT type="text/javascript">
function addme() {
ips=document.getElementById('INPUTS').getElementsByTagName('INPUT')

items = '('+document.forms.formjunk.amount1.value+')'+' - '+document.forms.formjunk.size1.value+' - '+(document.forms.formjunk.color1.value);
items1 = '(' + (document.forms.formjunk.amount2.value) + ')' + ' - ' + (document.forms.formjunk.size2.value) + ' - ' + (document.forms.formjunk.color2.value);
//var items2 = '(' + (document.forms.formjunk.amount3.value) + ')' + ' - ' + (document.forms.formjunk.size3.value) + ' - ' + (document.forms.formjunk.color3.value);

ips[ips.length-2].value=items;
ips[ips.length-1].value = items1;
wnu=0;
lnu=0;
tnu=0;
for (i=0;i<ips.length;i++){
ips[i].id='ID'+i;
ips[i].name='NAME'+i;
if (ips[i].value.split('(')[1].split(')')[0]){
tnu+=parseInt(ips[i].value.split('(')[1].split(')')[0]);
if (ips[i].value.match('white')){
wnu+=parseInt(ips[i].value.split('(')[1].split(')')[0]);
}
if (ips[i].value.match('large')){
lnu+=parseInt(ips[i].value.split('(')[1].split(')')[0]);
}
}
}

document.forms.orderform_16180.total.value = tnu;
document.forms.orderform_16180.lightshirts.value = wnu;
document.forms.orderform_16180.bigshirts.value = lnu;
}

function AddRow(){
n=document.getElementById('Clone').cloneNode(true)
document.getElementById('INPUTS').appendChild(n);
}
</SCRIPT>

<form name="formjunk" method="post" action="">

Quantity
<INPUT name="amount1" type="text" id="amount1" onBlur="addme();">
Color<SELECT name="color1" onChange="addme();">
<OPTION value="white">white</OPTION>
<OPTION value="black">black</OPTION>

<OPTION value="red">red</OPTION>
</SELECT>
Size<SELECT name="size1" onChange="addme();">
<OPTION value="small">small</OPTION>
<OPTION value="med">med</OPTION>
<OPTION value="large">large</OPTION>
</SELECT>

<BR>

Quantity
<INPUT name="amount2" type="text" id="amount2" onBlur="addme();">
Color<SELECT name="color2" onChange="addme();">
<OPTION value="white">white</OPTION>
<OPTION value="black">black</OPTION>
<OPTION value="red">red</OPTION>
</SELECT>

Size<SELECT name="size2" onChange="addme();">
<OPTION value="small">small</OPTION>
<OPTION value="med">med</OPTION>
<OPTION value="large">large</OPTION>
</SELECT>

<BR>
<BR>

<input type="hidden" name="rows" value="2" />
<input type="hidden" name="rowsx" value="3" />
<input name="fred" type="button" value="Add another row" onclick="AddRow();" />
</FORM>
<FORM name="orderform_16180">

<div id="INPUTS" >
<INPUT type="text" >
<INPUT type="text" >
</div>

Total - <INPUT name="total" type="text" id="total">
White - <INPUT name="lightshirts" type="text" id="lightshirts">

Large - <INPUT name="bigshirts" type="text" id="bigshirts">

</FORM>
<div style="position:absolute;visibility:hidden;" >
<div id="Clone" >
<INPUT type="text" >
<INPUT type="text" >
</div>
</div>
</BODY>
</HTML>

sub total inputs are allocated ids and names
ID0 to ID[maxnumer]
NAME0 to NAME[maxnumer]

Local Hero

05-29-2005, 11:10 PM

Wow, thanks. I have a question for you. Do you type everything by hand, or is there a program to help you?

vwphillips

05-29-2005, 11:32 PM

its all done with mirrors

and I use HTMLPad as a text editor