How to display result in input field using javascript

Question

Hi i have written this code that takes input and calculates 2 values using javascript. but i am not able to print the result in third input field.how to do this?

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function updatesum() {
document.form.total.value = (document.form.time.value -0) + (document.form.cost.value -0);
}
</script>
</head>
<body>

<form name="input" action="#" method="get">
Timespent
Timespent:<input type="text" name="time" value=" ">
Cost:<input type="text" name="cost" value=" ">
Totalcost:<input type="text" name="total" value=" ">
<input type="submit" value="Submit" onclick=updatesum()>
</form> 

</body>
</html>

user1823761 · Accepted Answer · 2013-06-05 09:54:56Z

5

Working jsFiddle Demo

Disable submitting your form:

<form name="input" action="#" method="get" onsubmit="return false;">

Your form name is input, so you must access it with it:

function updatesum() {
    document.input.total.value = (document.input.time.value -0) + (document.input.cost.value -0);
}

Also your submit button need quotes:

<input type="submit" value="Submit" onclick="updatesum()">

answered Jun 5, 2013 at 9:54

user1823761

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

2 Comments

David Jashi Over a year ago

This is not worse a separate answer, so would you please edit yours so, that conversion to number goes like Number (document.input.time.value) instead of subtracting zero?

user1823761 Over a year ago

@DavidJashi I've just corrected mistakes, not offerring alternatives. Your comment will add useful information to this answer. Thank you :).

Talha · Accepted Answer · 2013-06-05 10:11:15Z

1

WORKING DEMO

Set the id attribute of your inputs like

<form name="input" action="#" method="get">
Timespent
Timespent:<input type="text" name="time" value=" " id="txtTime">
Cost:<input type="text" name="cost" value=" " id="txtCost">
Totalcost:<input type="text" name="total" value=" " id="txtTotal">
<input type="submit" value="Submit" onclick="updatesum()">
</form>

and in your function

function updatesum() {
   // alert('a');
var time = document.getElementById("txtTime").value;
var cost = document.getElementById("txtCost").value;
var total=0; 
total = (time-0) +( cost-0);
   // alert(total);
document.getElementById("txtTotal").value = total;
return false;
}

your function should return false to prevent event

edited Jun 5, 2013 at 10:11

answered Jun 5, 2013 at 9:55

Talha

19.3k8 gold badges53 silver badges66 bronze badges

1 Comment

David Jashi Over a year ago

You risk getting concatenation instead of sum.

Collectives™ on Stack Overflow

How to display result in input field using javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related