trying to calculate rates runtime using javascript and html5

Question

here im trying to calculate rates of bus ticket on selection of seat for that i did searched on internet then i found something relavant on stack but its not working

following is html something minor issue help me to get out of this rates are not getting calculate on selection of value

here is my js

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<script type="text/javascript">
    $('#quantity').change(function(){
      var qty = $('#quantity').val();
      var price = $('#productPrice').val();
      var total = price * qty;
      $("#totalprice").val(total);
    });
    </script>

    <div class="pricesection">
            <input type="hidden" id="productPrice" value="340"/>
        Quantity: 
        <select id="quantity">
            <option value="1" selected>1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
    Total: $
    <input type="text" id="totalprice" value="340"/>

score 0 · Answer 1 · answered Jul 28 '18 at 21:23

You may have a conflict in some other code that you have not posted (I closed your div, but not much else). Here is a working example that may help you troubleshoot.

$('#quantity').change(function() {
  var qty = $('#quantity').val();
  var price = $('#productPrice').val();
  var total = price * qty;
  $('#totalprice').val(total);
});

<div class="pricesection">
  <input type="hidden" id="productPrice" value="340" />
  Quantity:
  <select id="quantity">
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
  Total: $
  <input type="text" id="totalprice" value="340" />
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 0 · Answer 2 · answered Jul 28 '18 at 21:25

0

Use parseInt() to convert string to number

  var qty =parseInt($('#quantity').val());
  var price = parseInt($('#productPrice').val());
  var total = price * qty;
  $("#totalprice").val(total);

answered Jul 28 '18 at 21:25

Osama

2,912
1
12
15

score 0 · Answer 3 · answered Jul 28 '18 at 21:36

There is no problem with your code, but in its' order. The script code goes in your post above the elements inside the document. The running order in WEB is line by line, so when your script asking for $("#quantity") it gets an undefined as answer. All you need to do is to move your script to be after your document's elements.

Another solution can be creating of script file and use there with post initialize of the DOM elements- Something like this:

$(document).ready(function() { /* code here */ })

You can read more here: window.onload vs document.onload

See that the following code is perfect when the script tag is after the elements' initialize:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

    <div class="pricesection">
            <input type="hidden" id="productPrice" value="340"/>
        Quantity: 
        <select id="quantity">
            <option value="1" selected>1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
    Total: $
    <input type="text" id="totalprice" value="340"/>
    
    <script type="text/javascript">
    $('#quantity').change(function(){
      var qty = $('#quantity').val();
      var price = $('#productPrice').val();
      var total = price * qty;
      $("#totalprice").val(total);
    });
    </script>

trying to calculate rates runtime using javascript and html5

3 Answers3