Calculate data based on text box values with javascript/html

Question

I am trying to get the values from 3 html text fields and add them together to get the total value when the use clicks on the button. I am new to javascript and after researching online, I found an example code and implemented to my code, but it is not showing any values. Here is my code:

 <form name="selectVehicleForm" action="SelectVehicle">
            Car Make: <input type="text" name="make" id="make" value="${Vehicles.make}" disabled> <br>
            Car Model: <input type="text" name="model" id="model" value="${Vehicles.model}" disabled> <br>
            Car Year: <input type="text" name="year" id="year" value="${Vehicles.year}" disabled> <br>
            Car Transmission: <input type="text" name="transmission" id="transmission" value="${Vehicles.transimssion}" disabled> <br>
            Car Rate Per Mile: <input type="text" name="rpm" id="rpm" value="${Vehicles.ratePerMile}" disabled> <br>
            Car Rate: <input type="text" name="rpd" id="rpd" value="${Vehicles.ratePerDay}" disabled> <br>
            <%
                int id = (Integer) request.getAttribute("id");
            %>
            <input type="hidden" name="id" value="<%=id%>">

            Pick Up Date: <input type="date" name="pickUpDate"> <br>
            Return Date: <input type="date" name="returnDate"> <br>
            Total Miles: <input type="text" name="totalMile" id="totalMile" placeholder="approximate"> <br> <br>

            <script>
                function totalDue(){
                    var rpm = document.getElementById("rpm").value;
                    var rpd = document.getElementById("rpd").value;
                    var totalMiles = document.getElementById("totalMile").value;

                    var totalDue = (rpm * totalMiles) + rpd;
                    document.getElementById("totalDue").innerHTML = totalDue;
                }
            </script>

            <br>Total Amount Due: <input type="text" name="totalDue" id="totalDue"> <br>
        </form>

            <button id="showPaymentForm" onclick="totalDue()">Billing/Payment Info</button>

your totalDue needs to be span instead of input if you want to use innerHtml.. <span id="totalDue"> </span> that should help.. — Searching
– Searching, Commented Dec 19, 2016 at 2:38

Ash · Accepted Answer · 2016-12-19 02:49:43Z

2

You need to set the value of the field instead of innerHTML in your case. Please refer to the fiddle here : https://jsfiddle.net/jhf18hsr/1/

I have put the parsing to integer values, which you can change to float as per your need, when reading the values from input controls.

function totalDue(){
  var rpm = parseInt(document.getElementById("rpm").value) || 0;
  var rpd = parseInt(document.getElementById("rpd").value) || 0;
  var totalMiles = parseInt(document.getElementById("totalMile").value) || 0;

  var totalDue = (rpm * totalMiles) + rpd;
  document.getElementById("totalDue").value = totalDue;
}

answered Dec 19, 2016 at 2:49

Ash

2,6152 gold badges22 silver badges28 bronze badges

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

3 Comments

Nasim Ahmed Over a year ago

Thanks so much, why did you use || 0

Searching Over a year ago

@NasimAhmed if the parseInt value returns NaN/Null then assign 0 instead and safely continue. .

Nasim Ahmed Over a year ago

@Searching Thanks I got it

Macarrao · Accepted Answer · 2016-12-19 03:42:44Z

First we put some values in both rpm and rpd, like 3 and 40. For now let us do this:

Car Rate Per Mile: <input type="text" name="rpm" id="rpm" value="3"> <br>

Or you can simply remove the default values if desired:

Car Rate Per Mile: <input type="text" name="rpm" id="rpm"> <br>

Same for rpd. In the future you may want to load this values from a database or something, it would be awesome since you stated you are new to JS and maybe you will try php later but not the case today; in the meantime remove the "disabled" part and input your desired values each time.

Second, add a parseFloat in your math so js treat your rpm and rpd values as numbers not as text; parseFloat will allow you to use and display some decimals, in contrast to parseInt.

var totalDue = (parseFloat(rpm) * parseFloat(totalMiles)) + parseFloat(rpd);

Third, change document.getElementById("totalDue").innerHTML = totalDue; for document.getElementById("totalDue").value=totalDue;. This way you will populate your output textbox onClick.

However this does not integrate dates into equation, you must ellaborate your JS function a little bit more to achieve this.

In your output textbox line I would add disabled since I don't want to write in this box, only show the result:

<br>Total Amount Due: <input type="text" name="totalDue" id="totalDue" disabled> <br>

Hope this helps.

Collectives™ on Stack Overflow

Calculate data based on text box values with javascript/html

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related