Can you see the bug?

[spires]

Hi.

 

I have this Javascript code that I can't seem to get to work.

 

JavaScript code:

function calculate2()
{
var rCount=document.getElementById("rowCount").value;

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

var first = i;
var second = i;

if(first == i)
{
document.getElementById("monthly_discount_xQ" ).value=nan(document.getElementById("monthly_discount").value)*nan(document.getElementById("STqty").value);
}
else if(second == i)
{
document.getElementById("monthly_discount" ).value=nan(document.getElementById("monthly_discount_xQ").value)/nan(document.getElementById("STqty").value);
}



document.getElementById("rental_after_discount"+i).value=nan(document.getElementById("STlr"+i).value)-nan(document.getElementById("monthly_discount"+i).value);

document.getElementById("rental_after_discount_xQ"+i).value=nan(document.getElementById("STmr"+i).value)-nan(document.getElementById("monthly_discount_xQ"+i).value);

}
}

 

 

HTML & PHP:

<td height="17" class="verdana_9" align="left">
£<input name="monthly_discount" type="text" size="5" class="verdana_10" height="10" value="'.$stored_monthly_discount1.'"  onchange="calculate2();" onfocus="first = '.$i1.';" onkeyup="this.style.backgroundColor = \'#FFCCCC\';calculate2();" onblur="calculate2();" id="monthly_discount'.$i1.'" />
</td>
<td height="17" class="verdana_9" align="left">
£<input name="monthly_discount_xQ" type="text" size="5" class="verdana_10" height="10" value="'.$stored_monthly_discount_xQ1.'"  onchange="calculate2();" onfocus="second = '.$i1.';" onkeyup="this.style.backgroundColor = \'#FFCCCC\';calculate2();" onblur="calculate2();" id="monthly_discount_xQ'.$i1.'"/>
</td>

 

What I'm trying to do, is to run a calculation inside a form using javascript. However, the form has multiple rows which are being pulled from a database. This means that the amount of rows that the form has are never the same.

 

So, I need to give each row a specific name to work, which is why I am using the value of 'i' from a for loop.

 

However, I can seem to get this code to work.

 

Any help, or ideas would be great

 

Thanks

[gevans]

Why not just itterate every input element of the form?

[spires]

Sorry,

I'm new to javaScript, what do you mean by that?

 

Thanks

[gevans]

Something as simple as...

 

var e = document.getElementById("my-form").elements;
for (var i=0; i < e.length; i++) {
  if(e[i].type == ‘text’))
    … do something…
}

 

Should (not tested) iterate through all the text fields of the form with the set id of my-form

[Psycho]

Running through every field on the form is probably not a good idea, because chances are you do have some fields which are not part of the calculation. I can't tell what you are really trying to accomplish as your code is a little bloated (plus using varaibles such as first and second are not helpful).

 

But, in any case your IF statement has a problem. You first set the values of 'first' and 'second' both to 'i', then you do a IF to test if 'first' equals 'i'. Since you always set 'first' to 'i' just before you do that check that comparison will always result to true so the second half (the if else) will never be run.

[gevans]

I was under the impression that every field (text field) would be for numerical data that required computing. If that's not the case then yes, mjdamato is correct, it is not a good idea to go through every form element with a text type.

[Psycho]

Since you appear to have all the fields with a numerical index you could create a loop that will increment through the fields using that index. The loop below will continue until it finds that a field with that ID does not exist

 

i = 0;
While (document.getElementById("rental_after_discount"+i))
{
    //do something
    i++;
}

[spires]

Hi guys thanks for your help, you've been great.

 

However, I think I'm getting closer, but I have not cracked it yet.

 

Here is the code t it's cleanest -

This code works, it calculates both ways: See http://businessmobiles.com/comcalc/test.php:

<script language="javascript">

var selected = 1;

function calculate2()
{
if(selected == 1)
{
document.getElementById("monthly_discount_xQ" ).value=nan(document.getElementById("monthly_discount").value)*nan(document.getElementById("STqty").value);
}
else
{
document.getElementById("monthly_discount" ).value=nan(document.getElementById("monthly_discount_xQ").value)/nan(document.getElementById("STqty").value);
}
}



function nan(value)
{
if(isNaN(value))
{
	return "";
}
else
{
	return value;
}
}

</script>
</head>

<body>

<form name="form1" >
<input name="STqty" type="hidden" value="2" id="STqty" />
<table cellpadding="0" cellspacing="0" border="0">
<tr>

<td height="17" class="verdana_9" align="left">
£<input name="monthly_discount" type="text" size="5" class="verdana_10" height="10" value=""  onchange="calculate2();" onfocus="selected = 1;" onkeyup="this.style.backgroundColor = '#FFCCCC';calculate2();" onblur="calculate2();" id="monthly_discount" />
</td>
<td height="17" class="verdana_9" align="left">
£<input name="monthly_discount_xQ" type="text" size="5" class="verdana_10" height="10" value=""  onchange="calculate2();" onfocus="selected = 2;" onkeyup="this.style.backgroundColor = '#FFCCCC';calculate2();" onblur="calculate2();" id="monthly_discount_xQ"/>
</td>

</tr>
</table>
</form>

See http://businessmobiles.com/comcalc/test.php:

 

 

However, in the final code I need to loop through the form, creating multiple rows of the form above.

This means that I need to name each form something slightly different.

e.g (For loop 'i' Value)

 

So, I think all that I need to do now is this below. But I can't get it to work.

<script language="javascript">

var selected = "1a";

function calculate2()
{
if(selected == "1a")
{
document.getElementById("monthly_discount_xQ" ).value=nan(document.getElementById("monthly_discount").value)*nan(document.getElementById("STqty").value);
}
else
{
document.getElementById("monthly_discount" ).value=nan(document.getElementById("monthly_discount_xQ").value)/nan(document.getElementById("STqty").value);
}
}



function nan(value)
{
if(isNaN(value))
{
	return "";
}
else
{
	return value;
}
}

</script>
</head>

<body>

<form name="form1" >
<input name="STqty" type="hidden" value="2" id="STqty" />
<table cellpadding="0" cellspacing="0" border="0">
<tr>

<td height="17" class="verdana_9" align="left">
£<input name="monthly_discount" type="text" size="5" class="verdana_10" height="10" value=""  onchange="calculate2();" onfocus="selected = 1a;" onkeyup="this.style.backgroundColor = '#FFCCCC';calculate2();" onblur="calculate2();" id="monthly_discount" />
</td>
<td height="17" class="verdana_9" align="left">
£<input name="monthly_discount_xQ" type="text" size="5" class="verdana_10" height="10" value=""  onchange="calculate2();" onfocus="selected = 1b;" onkeyup="this.style.backgroundColor = '#FFCCCC';calculate2();" onblur="calculate2();" id="monthly_discount_xQ"/>
</td>

</tr>
</table>
</form>

 

 

As you will notice, I have named 'selected' 1a and 1b.

This means that I can us the for loop value of 'i' in replace of the number.

E.G (ia and ib)

row1 = 1a and 1b

row2 = 2a and 2b

row3 = 3a and 3b

 

 

And then, in the JavaScript, the VAR will also be in a for loop, where I shall using:

var selected = ia;

and

if(selected == ia)

 

But when I try this the calculation only works one way, not both.

 

 

Sorry for the long message. I hope that you could advise further

 

Thanks