CODEWITHSUNDEEP
javascripthtml
user718359
user718359

Reputation: 515

Add up and change values of 3 text boxes

I have 3 text boxes (testbox, testbox2, testbox3) that get values from an input field, radio button selection and checkbox/tick. The correct values go into testbox, testbox2, testbox3.

However, I need the total of testbox, testbox2, testbox3 to go into text box 'total' - with the total to change if the users selects different radio buttons or tick/unticks etc..

One more thing I need the total to also be shown in the form, echo, (in addition to going into the text box - which will eventually be hidden).

Thank you.

 <head>
 <script type="text/javascript">
 function checkboxClick() {
 var textbox = document.forms[0].testbox3;
 textbox.value = (textbox.value == 0) ? '1.00' : '0.00';
 }
 </script> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>
 </head>
 <form action="" method="get">
 <input name="form1" type="radio" onclick="document.forms[0].testbox2.value='0.00'; "/>
 <input name="form1" type="radio" onclick="document.forms[0].testbox2.value='1.00'; "/>
 <input name="" type="checkbox" value="" onclick='checkboxClick()'/>
 <input name="testbox" type="text" value"2.00"/>
 <input name="testbox2" type="text" value"0.00"/>
 <input name="testbox3" type="text" value="0.00"/>

 <input name="total" type="text" value=""/>

 </form>
 <body>
 </body>
 </html>

Upvotes: 0

Views: 686

Answers (1)

VNO
VNO

Reputation: 3695

How about writing a function to update the total (and being careful to parse the textbox inputs as floats):

  function updateTotal() {
    var textbox1val = parseFloat(document.forms[0].testbox.value);
    var textbox2val = parseFloat(document.forms[0].testbox2.value);
    var textbox3val = parseFloat(document.forms[0].testbox3.value);
    var total = textbox1val + textbox2val + textbox3val;
    document.forms[0].total.value = total;
  }

And then calling this function in an onchange attribute?

Upvotes: 1

Related Questions