Adding multiple text boxes in html using javascript

Question

I am trying to add multiple text boxes integer value and the sum to be store in another text box.

<script>
function updatesum(){
cash =  parseInt(document.rent_form.cash.value,10);
card = parseInt(document.rent_form.card.value,10);
online = parseInt(document.rent_form.online.value,10);
deduction = parseInt(document.rent_form.deduction.value,10);
actAmount    = parseInt(document.rent_form.actAmount.value,10);
tot = actAmount - (cash+card+online+deduction);
document.rent_form.bal.value = tot;
}
</script>

I am getting NaN value displayed in text box with name="bal"

<form class="form-horizontal" name="rent_form" id="rent_form" action="php/tenantTable.php" 
method="POST">
<input type="text" id="act_rent_amount" name="actAmount" class="input-xlarge" placeholder="" 
value="<?php echo ($row['rent_amount']); ?>" style="visibility: hidden">
<input type="text" name="cash" onChange="updatesum()" value="0">
<input type="text" name="card" onChange="updatesum()" value="0">
<input type="text" name="online" onChange="updatesum()" value="0">
<input type="text" name="deduction" onChange="updatesum()" value="0">
<input type="text" id="bal" name="bal">

Here's a link

I honestly don't see any input text box with name="bal". Where is it in the code you posted? — The One and Only ChemistryBlob
– The One and Only ChemistryBlob, Commented Jul 17, 2014 at 13:16

Nzall · Accepted Answer · 2014-07-17 13:36:34Z

1

If you want to read the value of an input, you need to use document.getElementById("inputid"). so instead of

cash =  parseInt(document.rent_form.cash.value,10);

you need to use

cash =  parseInt(document.getElementById("cash").value,10);

You also need to give all your input fields an Id. If you want to use the name, you need to use getElementsByName()[0], which returns the first element with that name (but please use the ID, it's more accurate and easier to read).

However, because you have the same logical sequence 5 times, I'd do it slightly differently and wrap it into a function:

function ParseElementValue(elementName){
    return parseInt(document.getElementById(elementName).value,10);
}

and call this like this:

cash = ParseElementValue("cash");
card = ParseElementValue("card");

edited Jul 17, 2014 at 13:36

answered Jul 17, 2014 at 13:31

Nzall

3,5855 gold badges36 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding multiple text boxes in html using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related