CODEWITHSUNDEEP
javascript
jack98
jack98

Reputation: 69

how can i fix my javascript calculation which is not working?

the problem is the "total price" is not working.when i pick the "pickup date" and "drop date" it will show the value in the input form. i have to key in the number in "number of days" then the total price will calculate. i need the "total of price" is auto calculate. i have try various event of javascript. here i will attach my code. hope someone will help me. thanks in advance.

function sum() {
  var txtFirstNumberValue = document.getElementById('num1').value;
  var txtSecondNumberValue = document.getElementById('numdays2').value;
  var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
  if (!isNaN(result)) {
    document.getElementById('num3').value = result;
  }
}


function GetDays() {
  var dropdt = new Date(document.getElementById("drop_date").value);
  var pickdt = new Date(document.getElementById("pick_date").value);
  return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}

function cal() {
  if (document.getElementById("drop_date")) {
    document.getElementById("numdays2").value = GetDays();
  }
}
<label for="total">Price per day:</label>
<input type="text" name="price" id="num1" onkeyup="sum();" value="3" readonly>

<div id="pickup_date">
  <p><label class="form">Pickup Date:</label>
    <input type="date" class="textbox" id="pick_date" name="pickup_date" onchange="cal()" /></p>
</div>

<div id="dropoff_date">
  <p><label class="form">Dropoff Date:</label>
    <input type="date" class="textbox" id="drop_date" name="dropoff_date" onchange="cal()" /></p>
</div>

<div id="reserve_form">
  <div id="numdays"><label class="form">Number of days:</label>
    <input type="text" id="numdays2" name="numdays" oninput="sum();" />

    <label for="total">Total Price (RM)</label>
    <input type="text" name="test" placeholder="Total Price" value="" id="num3">

i expect that the total price can automatically calculate.

Upvotes: 3

Views: 96

Answers (1)

Tibrogargan
Tibrogargan

Reputation: 4603

You just need to make sure your sum function (or in the example just cal) is being called when your inputs are complete and valid. Since you may want to restrict the user from manually setting the number of days I've demonstrated how you might do this by firing a change event programmatically. It's also current practice to attach events to elements programmatically instead of using the inline HTML5 event notation (e.g. "onchange=foo"), see Why are inline event handler attributes a bad idea in modern semantic HTML? 

function setDate(event) {
    var days = getDays();
    // if the number of days is valid
    if (!isNaN(days)) {
        var nod = document.getElementById("numdays2");
        nod.value = days;
        // programmatically setting a value will not fire a change event
        nod.dispatchEvent(new Event("change"));
    }
}

function getDays() {
    // returns NaN if either date does not hold a valid date
    var dropdt = new Date(document.getElementById("drop_date").value);
    var pickdt = new Date(document.getElementById("pick_date").value);
    return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
}

function cal() {
    var pricePerDay = document.getElementById("pricePerDay").value;
    if (0 == (pricePerDay = parseInt(pricePerDay))) { return } // TODO needs to handle decimal values
    document.getElementById("total").value = parseInt(document.getElementById("numdays2").value) * pricePerDay;
}

function init() {
    document.getElementById("drop_date").addEventListener("change", setDate);
    document.getElementById("pick_date").addEventListener("change", setDate);
    document.getElementById("numdays2").addEventListener("change", cal);
}

document.addEventListener("DOMContentLoaded", init);
<label for="total">Price per day:</label>
<input type="text" name="price" id="pricePerDay" value="" placeholder="Manually enter a value">

<div id="pickup_date">
  <p><label class="form">Pickup Date:</label>
    <input type="date" class="textbox" id="pick_date" name="pickup_date" /></p>
</div>

<div id="dropoff_date">
  <p><label class="form">Dropoff Date:</label>
    <input type="date" class="textbox" id="drop_date" name="dropoff_date" /></p>
</div>

<div id="reserve_form">
  <div id="numdays"><label class="form">Number of days:</label>
    <!-- numdays2 is readonly to ensure the date pickers are used -->
    <input type="text" id="numdays2" name="numdays" readonly placeholder="Select dates above" />
    <label for="total">Total Price (RM)</label>
    <input id="total" type="text" readonly name="test" placeholder="Total Price" value="" id="num3">
  </div>
</div>

Upvotes: 2

Related Questions