Javascript/JQuery naming field by count

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

Javascript/JQuery naming field by count

Post 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++;
}
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I believe you are missing a few plus signs and may possibly have misplaced brackets.
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

Post 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;
  }
Last edited by iknownothing on Mon Mar 12, 2007 9:44 am, edited 1 time in total.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Set the value attribute?
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I don't see where areaa's values are being set.
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

Post 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...
Last edited by iknownothing on Tue Mar 13, 2007 8:27 am, edited 1 time in total.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Neither one sets values into the array.
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

Post by iknownothing »

so within the loop, but after the jQuery, something like this maybe?:

Code: Select all

areaa[counta] = document.getElementById('areaa['+counta+']').value;
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

There are a few methods that may be of interest like parseInt() and parseFloat().
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

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