Form Elements and multidemensional Arrays

@briandFeb 25.2005

Hello all,
First post. And I got a good question.

I have to build this form. It needs to add up numbers on the fly (onChange).
However, we also are using ASP to submit the form and have developed an interested work standard in how to send information across

Since many elements belong to each other
ie. QTY, price, and description
I setup the form with a normal text field and 2 hidden fields to contain the information. They all share the same name so that ASP (and Javascript) can refer to those 3 fields as an array.

Now,
The problem is that I’m trying to process the javascript using a for loop. Kinda like this

~~[QUOTE]~~

var numberForms = document.form1.length;
for(i=0; i< numberForms; i++){
total= total + (document.form1.elements[i,0].value * document.form1.elements[i,1].value )
}

[/QUOTE]

(the above doesn’t work but it’s an example trying to show a multidemensional array)

If I used a field like this

~~[quote]~~

document.form1.fieldName[0].value * document.form1.fieldName[1].value

[/quote]

then it’s fine.. but since I want to do it in a for loop, I can’t.

Is there a way to access this array using elements[] or a loop in someway?

to post a comment

JavaScript

11 Comments(s) _↴

@UltimaterFeb 25.2005 — #.

@briandauthorFeb 25.2005 — #That was a typo..

I fixed the post.

@UltimaterFeb 25.2005 — #[i]Originally posted by briand [/i]

var numberForms = document.form1.length;

for(i=0; i< numberForms; i++){

total= total + (document.form1.elements[i,0].value * document.form1.elements[i,1].value )

}
[/QUOTE]

Ummmm.. what the heck is document.form1.elements[[color=red]i,0[/color]].value ?

maybe you meant document.form1.elements[[color=green]i][0[/color]].value

Now can you show us some code—what your trying to

refer to?

Show us your form with all it's elements and

I'll tell ya the best way to refer to it.

@briandauthorFeb 25.2005 — #U mean like this?
<input name="sweets_seasonal_fruit_sliced" onChange="javascript:totaler();" type="text" size="2">

<input name="sweets_seasonal_fruit_sliced" type="hidden" value="4.50">

<input name="sweets_seasonal_fruit_sliced" type="hidden" value="Assorted Seasonal Sliced Fresh Fruit">

<input name="sweets_cheesecake" onChange="javascript:totaler();" type="text" size="2">

<input name="sweets_cheesecake" type="hidden" value="3.50">

<input name="sweets_cheesecake" type="hidden" value="New York Style Cheesecake">

<input name="sweets_seasonal_fruit_cup" onChange="javascript:totaler();" type="text" size="2">

<input name="sweets_seasonal_fruit_cup" type="hidden" value="2.75">

<input name="sweets_seasonal_fruit_cup" type="hidden" value="Fresh Seasonal Fruit Cup">

<input name="sweets_fried_apple_pies" onChange="javascript:totaler();" type="text" size="2">

<input name="sweets_fried_apple_pies" type="hidden" value="2.25">

<input name="sweets_fried_apple_pies" type="hidden" value="Fried Apple Pies">

<input name="sweets_assorted_dessert_squares" onChange="javascript:totaler();" type="text" size="2">

<input name="sweets_assorted_dessert_squares" type="hidden" value="3.50">

<input name="sweets_assorted_dessert_squares" type="hidden" value="Assorted Dessert Squares">

<input name="sweets_assorted_cookie_tray" onChange="javascript:totaler();" type="text" size="2">

<input name="sweets_assorted_cookie_tray" type="hidden" value="2.50">

<input name="sweets_assorted_cookie_tray" type="hidden" value="Assorted Cookie Tray">
[/QUOTE]

It goes on similar to that. But that is the idea.

The processing looks like this (you can see I've tried a few things)
function totaler(){

var numberForms = document.form1.length;

var formIndex;

sub_total=0;

for(i=0; i< numberForms; i++){
   document.write ("<span style="color: #FFFFFF;">");
   document.write("<span style="color: #FFFFFF;">" + document.form1.elements[i][1].value + "<BR>")
 
   document.write("<span style="color: #FFFFFF;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>em1:</b> " + document.form1.elements[i][0].value + "</span><BR>");
   document.write("<span style="color: #FFFFFF;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>em2:</b> " + document.form1.elements[i][1].value + "</span><BR>");
   document.write("<span style="color: #FFFFFF;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>em3:</b> " + document.form1.elements[i][2].value + "</span><BR>");
   if(!isNaN(parseFloat(document.form1.elements[i].value))){
   //document.write ("FIELD: " + document.form1.elements[i].name + "<BR>");
   //document.write("<span style="color: #FFFFFF;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>em1:</b> " + document.form1.elements[i,0].value + "</span><BR>");
   //document.write("<span style="color: #FFFFFF;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>em2:</b> " + document.form1.elements[i,1].value + "</span><BR>");
   //document.write("<span style="color: #FFFFFF;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>em3:</b> " + document.form1.elements[i,2].value + "</span><BR>");
 
   //document.write ("INCOMING: " + parseFloat(document.form1.elements[i].value) * parseFloat(document.form1.elements[i+1].value) + "<BR>");
   sub_total = sub_total + (parseFloat(document.form1.elements[i].value) * parseFloat(document.form1.elements[i+1].value));
   }
   document.form1.info_total.value = sub_total; 
   i=i+2;
   document.write ("</span>");

}

}

[/QUOTE]

@UltimaterFeb 25.2005 — #Ok first error in your code is—onChange="java script:totaler();"

The space in there is crucial, and it's wrong. replace it with:

onChange="javascript:totaler();"

On my next post I'll tell you how to touchup your function.

Btw: I assume that you have a form by the name of form1.

(I'm quite sure you even defined the form action.)

@UltimaterFeb 25.2005 — #Next, your function only "sees" the first

document.write before it abandons you function.

You must use a varible to gather all your information

before using document.write.

<i>
 </i>function totaler(){
 var numberForms = document.form1.length;
 var formIndex;
 sub_total=0;
 var writeINFO=""
 for(i=0;i&lt;numberForms;i++){
 writeINFO+=document.form1.elements[i].value+"&lt;br&gt;n"
 }
 document.write(writeINFO)
 }

@UltimaterFeb 25.2005 — #Nextly I don't see the point in using document.write

if [b]only[/b] the first input is filled out.

Might I suggest using a button of some sort, to process

the data when the user is done filling it all in.

Not to mention that there are some browsers out there

that don't understand onchange, so you'd need them

to press a buttton to trigger an onclick anyways.

So what are you trying to do with your data?

Why are you using document.write at all if

you want to submit the form to some ASP?

@briandauthorFeb 28.2005 — #sorry about the confusion.

Document.write is being used to test the document, because I was filling the browswer with test information (On browser refresh the numbers stay the same). I was just trying to see how the elements reacted when I put []'s on them.

So what your saying is that if I store the element into a variable everything will be fine? I can access/refer it as if it was an array!?

I'll try this out! Thank you!

THank you for your help. I greatly appreciate it!

EDIT:

Man.. I gotta posting to these so early in the morning.

I'm totaling up the prices. So it would be the 1 form Item x the other form item.

These items then populate a text field on the page to give the illusion that text is changing ?.

@Warren86Feb 28.2005 — #briand:

Here's a different, shorter approach. You can put any descriptor you need within the input type tag. The below uses, unitPrice, index and product. The index value points to the appropriate ordinal element in the multi-dimensional array. The other values, and the input quantity, are stored in the array.

<HTML>

<Head>

<Script Language=JavaScript>

var dataArray = new Array();
 
  function calcForm(isField){
 
   n = isField.index;
   dataArray[n] = new Array();
   dataArray[n][0] = isField.product;
   dataArray[n][1] = isField.unitPrice;
   dataArray[n][2] = isField.value;
   currSub = document.forms.Form1.subTot.value;
   tmp = isField.value*isField.unitPrice;
   currSub = parseFloat(currSub)+parseFloat(tmp);
   document.forms.Form1.subTot.value = currSub.toFixed(2);
   alert(dataArray)
  }

</Script>

</Head>

<Body>

<Form name='Form1'>

Assorted Seasonal Sliced Fresh Fruit: <input name="sweets_seasonal_fruit_sliced" type="text" size="2" product="Assorted Seasonal Sliced Fresh Fruit" unitPrice="4.50" index="0" onblur="calcForm(this)"><br>

New York Style Cheescake: <input name="sweets_seasonal_fruit_sliced" type="text" size="2" product="New York Style Cheesecake" unitPrice="3.50" index="1" onblur="calcForm(this)"><br>

Fresh Seasonal Fruit Cup: <input name="sweets_seasonal_fruit_sliced" type="text" size="2" product="Fresh Seasonal Fruit Cup" unitPrice="2.75"index="2" onblur="calcForm(this)"><br>

Sub-Total: <input type=text size=8 readonly value="0" name="subTot">

</Form>

</Body>

</HTML>

@briandauthorFeb 28.2005 — #That's very interesting...

I never knew of that?

Does that work with ASP? How does that work with ASP? Does it work on all platforms (Or most?).

@Warren86Feb 28.2005 — #Sorry, I can't help you with ASP, but I don't think it would be platform dependent. The "usual" value, id and name descriptors, I assume work in ASP, so, I suspect that any other descriptors, as long as you don't use reserved words, should work equally as well.

Also in #JavaScript _↴

Hard Refresh required for oAuth route How to best track how long a video has been played?Delete buttons

Success!

Help @briand spread the word by sharing this article on Twitter...

Tweet This

Form Elements and multidemensional Arrays

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Form Elements and multidemensional Arrays

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴