How to calculate in multiple line items?

[coolguyraj]

I have a javascript code to take value from two text boxes and calculate on triggering the "OnBlur" function and display in the third box.

The code works fine with one line item,If i have more that one line item.i will be able too calculate the value only for the last line item added ,But if i change any of the values in the two boxes from which it takes values.The probablity will not be recalculated.

Could anyone help me to fix this?

//here is the code.

//code for the text boxes.
<td class="bodyForm"><input type="text" name="ITEM_IN[<?php echo $x;?>][PERCENTAGE_GO]" maxlength="10" size="3"<?php
if (!empty($_REQUEST['ITEM_IN'][$i]['PERCENTAGE_GO'])) {
echo ' value="' . $_REQUEST['ITEM_IN'][$i]['PERCENTAGE_GO'] . '"';
}
//$go= $_REQUEST['ITEM_IN'][$i]['PERCENTAGE_GO'] ;?> /></td>
<td class="bodyForm"><input type="text" onBlur="probability()" name="ITEM_IN[<?php echo $x;?>][PERCENTAGE_WIN]" maxlength="10" size="3"<?php
if (!empty($_REQUEST['ITEM_IN'][$i]['PERCENTAGE_WIN'])) {
echo ' value="' . $_REQUEST['ITEM_IN'][$i]['PERCENTAGE_WIN'] . '"';
}

//to display the results
<input type="text" id="answer" onBlur="probability()" name="ITEM_IN[<?php echo $x;?>][PROBABILITY]" size="5" value="<?php echo $_REQUEST['ITEM_IN'][$i]['PROBABILITY']?>" <?php
if (!empty($_REQUEST['ITEM_IN'][$i]['PROBABILITY'])) {
echo ' value="' . $_REQUEST['ITEM_IN'][$i]['PROBABILITY'] . '"';
}?>/></td>




//javascript to calculate the probablity.
<SCRIPT>
function probability()
{
var val1 = parseInt(document.getElementById("ITEM_IN[<?php echo $x;?>][PERCENTAGE_GO]").value);
var val2 = parseInt(document.getElementById("ITEM_IN[<?php echo $x;?>][PERCENTAGE_WIN]").value);
var ansd = document.getElementById("ITEM_IN[<?php echo $x;?>][PROBABILITY]");
ansd.value = Math.round((val1 * val2)/100);
}

</SCRIPT>

Please help.

Thanks

[acoder]

Could you give the HTML source that is generated (not PHP), i.e. what values are generated by the PHP code? Also, give an example of at least two rows, so we can work with that.

[coolguyraj]

Hi ,

Thanks for your replay,Below is the generated HTML code.


HTML FOR FIRST LINE ITEM
tr class="headerBG">

<th class="bodyTextWhite">% Go</th>
<th class="bodyTextWhite">% Win</th>
<th class="bodyTextWhite">Probability</th>



<SCRIPT LANGUAGE="JavaScript">
function probability()
{
var val1 = parseInt(document.getElementById("ITEM_IN[0][PERCENTAGE_GO]").value);
var val2 = parseInt(document.getElementById("ITEM_IN[0][PERCENTAGE_WIN]").value);
var ansd = document.getElementById("ITEM_IN[0][PROBABILITY]");
ansd.value = Math.round((val1 * val2)/100);
}
</SCRIPT>

<tr>

<td class="bodyForm"><input type="text" name="ITEM_IN[0][PERCENTAGE_GO]" maxlength="10" size="3" value="45" /></td>
<td class="bodyForm"><input type="text" onBlur="probability()" name="ITEM_IN[0][PERCENTAGE_WIN]" maxlength="10" size="3" value="78" /></td>
</tr>

//THIS TEXT BOX DISPLAYS CACULATED VALUE FOR FIRST LINE ITEM<td class="bodyForm">

<input type="text" id="answer" readonly = "readonly" onBlur="probability()" name="ITEM_IN[0][PROBABILITY]" size="5" value="35" value="35"/></td>



//SECOND LINE ITEM
<th class="bodyTextWhite">% Go</th>
<th class="bodyTextWhite">% Win</th>
<th class="bodyTextWhite">Probability</th>

<SCRIPT LANGUAGE="JavaScript">
function probability()
{
var val1 = parseInt(document.getElementById("ITEM_IN[1][PERCENTAGE_GO]").value);
var val2 = parseInt(document.getElementById("ITEM_IN[1][PERCENTAGE_WIN]").value);
var ansd = document.getElementById("ITEM_IN[1][PROBABILITY]");
ansd.value = Math.round((val1 * val2)/100);
}
</SCRIPT>

<td class="bodyForm"><input type="text" name="ITEM_IN[1][PERCENTAGE_GO]" maxlength="10" size="3" value="56" /></td>
<td class="bodyForm"><input type="text" onBlur="probability()" name="ITEM_IN[1][PERCENTAGE_WIN]" maxlength="10" size="3" value="89"/></td>

//THIS TEXT BOX DISPLAYS CACULATED VALUE FOR SECOND LINEITEM

<td class="bodyForm">


<input type="text" id="answer" readonly = "readonly" onBlur="probability()" name="ITEM_IN[1][PROBABILITY]" size="5" value="50" value="50"/></td>

//SECOND LINE ITEM

<th class="bodyTextWhite">% Go</th>
<th class="bodyTextWhite">% Win</th>
<th class="bodyTextWhite">Probability</th>
<SCRIPT LANGUAGE="JavaScript">


function probability()
{
var val1 = parseInt(document.getElementById("ITEM_IN[2][PERCENTAGE_GO]").value);
var val2 = parseInt(document.getElementById("ITEM_IN[2][PERCENTAGE_WIN]").value);
var ansd = document.getElementById("ITEM_IN[2][PROBABILITY]");
ansd.value = Math.round((val1 * val2)/100);
}
//THIRD LINE ITEM
</SCRIPT>

<tr>
<td class="bodyForm"><input type="text" name="ITEM_IN[2][PERCENTAGE_GO]" maxlength="10" size="3" /></td>
<td class="bodyForm"><input type="text" onBlur="probability()" name="ITEM_IN[2][PERCENTAGE_WIN]" maxlength="10" size="3" /></td>

<td class="bodyForm">

//THIS TEXT BOX DISPLAYS CACULATED VALUE FOR THIRD LINE ITEM

<input type="text" id="answer" readonly = "readonly" onBlur="probability()" name="ITEM_IN[2][PROBABILITY]" size="5" value="" /></td>




<input type="submit" value="New Task" name="itemBTN" />(Button to add new Line Item)
<input type="submit" value="Submit" name="submitBTN" />(Button to Submit the Line items)

Let me know if you have more clarification.

Thanks.

[acoder]

You're overwriting probability. Instead have one generic function which takes a parameter (say, index). Then modify as below:

function probability(index)
{
var val1 = parseInt(document.getElementById("ITEM_IN["+index+"][PERCENTAGE_GO]").value);
var val2 = parseInt(document.getElementById("ITEM_IN["+index+"][PERCENTAGE_WIN]").value);
var ansd = document.getElementById("ITEM_IN["+index+"][PROBABILITY]");
ansd.value = Math.round((val1 * val2)/100);
}

Notice how I have replaced 0, 1, 2, etc. with 'index'. When you call the function, call it with 0,1,2,etc.