Page 1 of 1

Javascript/JQuery naming field by count

Posted: Sun Mar 11, 2007 10:38 pm
by iknownothing
hey guys, as you can see with the following JQuery code, I am trying to name the individual textboxes to coincide with the current count, so they are useful for their purpose. I have them in what I "believe" to be arrays, so that I can get the final value for all of the Area's to add up at the end. It is just a simple calculator which a user can edit how many values they can insert. It keeps telling me that an object is required however, which leads me to believe that javascript code can not be within the string. Can anyone see anything wrong. Actually, could someone please point out whats wrong, because obviously something is.

Code: Select all

//LINES SPLIT TO MAKE IT EASIER TO READ
while (counta < numba) {
	

$('<div style="height:30px;" valign="center" align="center">')
.append($('

<font style="font-family:arial,verdana,sansserif;color:#FFFFFF;font-size:12px">
Length 
<input type="text" id="length'+[counta]'" size="8" style="background: #79f27f;border: 1px solid #FFFFFF;font-family:arial,verdana,sansserif;"/> m  
x  Width 
<input type="text" id="wideness'+[counta]'" size="8" style="background: #79f27f;border: 1px solid #FFFFFF;font-family:arial,verdana,sansserif;"/> m 
 = 
<input type="text" id="area'+[counta]'"  style="background: #79f27f;border: 1px solid #FFFFFF;font-family:arial,verdana,sansserif;" size="8"/> 
m²
</font>

')).appendTo("#calcform").attr('id','Div'+counta);
	
	
counta++;
}

Posted: Sun Mar 11, 2007 10:59 pm
by feyd
I believe you are missing a few plus signs and may possibly have misplaced brackets.

Posted: Sun Mar 11, 2007 11:31 pm
by iknownothing
Ok, the naming works now, thanks for that.

Below is the new code, once a value "numba" has been inserted it produces the div's as it should, but nothing in the way of array's work, nor does the value of the Area (Length x Width). I am starting to think that I am way off track and the apparent arrays, are not existent, and the names just look like arrays. Could someone please point out whether or not they are arrays, and any other problems you may see.

For those who don't understand, this is what should happen...

- User Inputs amount of rectangles/squares to use within the calculator (it is to determine total yard size (minus house, garden etc), as it is generally not one single rectangle/square.
- User then adds a length and a width to each rectangle, the Area box is the sum of Length x Width. This is continued until they have filled in all Length and Width boxes.
- The sum of all Area boxes is established to produce a Total Area value.

Thanks again.

Code: Select all

function addElement() {
	var lengtha = new Array;
	var wideness = new Array;
	var areaa = new Array;
var numba = document.getElementById('calculator').value;
if (numba > 10) {
	
	$('<div style="height:30px;" valign="center" align="center">').append($('<font style="font-family:arial,verdana,sansserif;color:#FFFFFF;font-size:12px">Please enter in a value between 1 and 10</font>')).appendTo("#calcform").attr('id','Div'+counta);
}
var counta = 0;
while (counta < numba) {
	

	$('<div style="height:30px;" valign="center" align="center">').append($('<font style="font-family:arial,verdana,sansserif;color:#FFFFFF;font-size:12px">Length <input type="text" onchange="editit();" id="lengtha['+counta+']" size="8" style="background: #79f27f;border: 1px solid #FFFFFF;font-family:arial,verdana,sansserif;"/> m  x  Width <input type="text" onchange="editit();" id="wideness['+counta+']" size="8" style="background: #79f27f;border: 1px solid #FFFFFF;font-family:arial,verdana,sansserif;"/> m  = <input type="text" id="areaa['+counta+']" style="background: #79f27f;border: 1px solid #FFFFFF;font-family:arial,verdana,sansserif;" size="8"/> m²</font>')).appendTo("#calcform").attr('id','Div'+counta);
	
	
counta++;
}
document.getElementById('calculator').value = "";
}

document.getElementById('areaa['+counta+']').value= lengtha[counta] * wideness[counta];

var sum = 0;
for (i=1; i<=areaa.length; i++)
  {
  sum = sum + areaa[i];
  document.getElementById('areatotal').value = sum;
  }

Posted: Mon Mar 12, 2007 9:16 am
by feyd
Set the value attribute?

Posted: Mon Mar 12, 2007 7:03 pm
by iknownothing
feyd wrote:Set the value attribute?
I have set the value to be Length x Width, but, its not working.

With the above code, I'm not expecting anyone to do a full rewrite, just some pointers. Google showed me no results which come anywhere near the problem I have (I could have wrote the wrong keywords however).

Is there another way other than an Array?

Posted: Tue Mar 13, 2007 7:21 am
by feyd
I don't see where areaa's values are being set.

Posted: Tue Mar 13, 2007 8:24 am
by iknownothing
It has a null value when it first appears, but is the sum of Length x Width when they have been entered.

Code: Select all

document.getElementById('areaa['+counta+']').value= lengtha[counta] * wideness[counta]; 
or should i have

Code: Select all

<input type="text" id="areaa['+counta+']" value="'+lengtha[counta] * wideness[counta]+'" style="background: #79f27f;border: 1px solid #FFFFFF;font-family:arial,verdana,sansserif;" size="8"/>
the latter shows a value of "NaN" apon loading...

Posted: Tue Mar 13, 2007 8:26 am
by feyd
Neither one sets values into the array.

Posted: Tue Mar 13, 2007 8:30 am
by iknownothing
so within the loop, but after the jQuery, something like this maybe?:

Code: Select all

areaa[counta] = document.getElementById('areaa['+counta+']').value;

Posted: Tue Mar 13, 2007 8:56 am
by feyd
I would set the array values using the math, then use the array values to set the field values. Otherwise you'll have to parse the strings into numbers before being able to perform additional math on them.

Posted: Tue Mar 13, 2007 6:17 pm
by iknownothing
feyd wrote:I would set the array values using the math, then use the array values to set the field values. Otherwise you'll have to parse the strings into numbers before being able to perform additional math on them.
Is this what you mean? You said Arrays however, how can I set the length and width values using math when they are to be entered in by the user?

Code: Select all

wideness[counta] = document.getElementById('wideness['+counta+']').value; 
lengtha[counta] = document.getElementById('lengtha['+counta+']').value; 	
areaa[counta] = wideness[counta] * lentha[counta]; 	
document.getElementById('areaa['+counta+']').value = areaa[counta];
If this is what you mean, thats good, but adding a value into the length and width boxes, does not put a valid value in the area box, all it says is NaN.

Posted: Tue Mar 13, 2007 11:05 pm
by feyd
There are a few methods that may be of interest like parseInt() and parseFloat().

Posted: Wed Mar 14, 2007 6:33 am
by iknownothing
The Area value is only NaN to start with, when the length and width values haven't contributed to the areas value. On "startup" everything works as it should, Once the original function is complete however, it cannot be accessed, and no change of any value will do anything. How can I get access to individual array numbers of all three values (which have the same array number) to tell them what to do outside of the original function?