Replacing html

[wigglesby]

Hi

I have written some code, that calculates the value of one input box minus another input box and then puts the sum into another input box.

 

This works fine if there is only 1 row (the page uses php to loop through the db), with only 3 boxes.

 

If there is another table row (i.e. another 3), the code doesn't seem to update but the row below does.

 

<script type="text/javascript" />
   jQuery.noConflict();

      jQuery(document).ready(function() {

        var cartons2 = jQuery('input#txtitemscarton<? echo $recId ?>').val();
    	var received2 = jQuery('input#txtitemsreceived<? echo $recId ?>').val();
    	var remaining2 = jQuery('input#txtitemsremiaining<? echo $recId ?>').val();
    	var gRemaining = cartons2 - received2;
    	var gReceived = received2;

var html2 = '<input type="text" onblur="updateReceivedCartons()" id="txtitemsremaining<? echo $recId ?>" name="txtitemsremaining<? echo $recId?>" class="teenyinput numbers" value="'+gRemaining+'" />';
    jQuery("#txtitemsremaining<? echo $recId ?>").after(html2).remove();
    var html3 = '<input type="text" onblur="updateRemainingCartons()" id="txtitemsreceived<? echo $recId ?>" name="txtitemsreceived<? echo $recId?>" class="teenyinput numbers" value="'+gReceived+'" />';
    jQuery("#txtitemsreceived<? echo $recId ?>").after(html3).remove();

      });

</script>

 

Above is my code:

 

The 3 input fields have the following ids:

carton number  = txtitemscarton + the id of the row from the db

received number = txtitemsreceived + the id of the row from the db

remaining number = txtitemsremaining + the id of the row from the db

 

So on load, it should detect the value of txtitemscarton... - txtitemsreceived and then insert the result into txtitemsremaining, but it if there are 2 or more rows, then it only replaces 1 txtitemsreceived input box.

 

I have attached a screenshot of what I mean.

 

Any ideas how I can change this code?

 

Thanks

 

 

 

[attachment deleted by admin]

[crashmaster]

quite stupid idea to use PHP function oin JS.. try to avoid it..can cause TOO MANY problems..

[seventheyejosh]

Regardless of proper practices, calling someone stupid is quite counter-productive...

[wigglesby]

I haven't called a PHP function in my JS.

 

updateReceivedCartons() is another JS function:

 

<script type="text/javascript" />
   jQuery.noConflict();

function updateReceivedCartons(){

var cartons = jQuery('input#txtitemscarton<? echo $recId ?>').val();
var remaining = jQuery('input#txtitemsremaining<? echo $recId ?>').val();
    var received = jQuery('input#txtitemsreceived<? echo $recId ?>').val();
    var gTotal = cartons - remaining;
    var html = '<input type="text" onblur="updateRemainingCartons()" id="txtitemsreceived<? echo $recId ?>" name="txtitemsreceived<? echo $recId?>" class="teenyinput numbers" value="'+gTotal+'" />';
     if (gTotal < 0)
     {
     	alert("The number you entered is too large.");

     }
 else
 {
	 jQuery("#txtitemsreceived<? echo $recId ?>").after(html).remove();

 }

}
</script>

 

<script type="text/javascript" />
   jQuery.noConflict();

function updateRemainingCartons(){

var cartons3 = jQuery('input#txtitemscarton<? echo $recId ?>').val();
var remaining3 = jQuery('input#txtitemsremaining<? echo $recId ?>').val();
    var received3 = jQuery('input#txtitemsreceived<? echo $recId ?>').val();
    var gTotal2 = cartons3 - received3;
    var html = '<input type="text" onblur="updateReceivedCartons()" id="txtitemsremaining<? echo $recId ?>" name="txtitemsremaining<? echo $recId?>" class="teenyinput numbers" value="'+gTotal2+'" />';
     if (gTotal2 < 0)
     {
     	alert("The number you entered is too large.");

     }
 else
 {
	 jQuery("#txtitemsremaining<? echo $recId ?>").after(html).remove();

 }

}
</script>

 

Thanks