如何使用Javascript实时自动计算价格和产品

Question

I have this code in Javascript that auto-calculate price and product quantity in real-time as user makes selection from select form option. it works fine. Now i want to auto-calculate using form input, that is the real-time calculation will be done as user input values in the form inputs

below is the code working with the select form option.

    <script>
    function calculatePrice(myform){

      //Get selected data  
      var elt = document.getElementById("memoryItem");
      var memory = elt.options[elt.selectedIndex].value;

      var elt = document.getElementById("hddItem");
      var hdd = elt.options[elt.selectedIndex].value;

      var elt = document.getElementById("networkItem");
      var network = elt.options[elt.selectedIndex].value;

      //convert data to integers
      memory = parseInt(memory);
      hdd = parseInt(hdd);
      network = parseInt(network);

      //calculate total value  
      var total = memory+hdd+network; 

      //print value to  PicExtPrice 
      document.getElementById("PicExtPrice").value=total;

    }
    </script>



    <FORM Name="myform">
    <SELECT NAME="memoryItem" onChange="calculatePrice()" id="memoryItem">
      <OPTION value="0">--Select One Choice--</OPTION>
      <OPTION value="49">8 GB add $49</OPTION>
      <OPTION value="98">12 GB add $98</OPTION>
    </SELECT>

    <SELECT NAME="hddItem" onChange="calculatePrice()" id="hddItem">
      <OPTION value="0">--Select One Choice--</OPTION>
      <OPTION value="109">1 TB HD add $109</OPTION>
      <OPTION value="150">1.5 TB HD add $150</OPTION>
    </SELECT>

    <SELECT NAME="networkItem" onChange="calculatePrice()" id="networkItem">
      <OPTION value="0">--Select One Choice--</OPTION>
      <OPTION value="109">Laptop 1 $109</OPTION>
      <OPTION value="79">lapto 2 $79</OPTION>
    </SELECT>
    </FORM>

    <button type="button" onclick="calculatePrice()">Calculate</button>
    Total:<INPUT type="text" id="PicExtPrice" Size=8>  

Please how can I allow user  to enter values from form input and it will be auto calculated also instead of using select option.

Eg. As in the form below


    <FORM Name="myform">
   <b>Data 1</b> <input type="text" NAME="memoryItem" onChange="calculatePrice()" id="memoryItem">


  <b>Data 2</b>  <input type="text" NAME="hddItem" onChange="calculatePrice()" id="hddItem"><br>


   <b> Data 3</b> <input type="text" NAME="networkItem" onChange="calculatePrice()" id="networkItem">

    </FORM>

    <button type="button" onclick="calculatePrice()">Calculate</button>
    Total:<INPUT type="text" id="PicExtPrice" Size=8>  

Thanks

Answer 1

I think a fast solution could be:

<script>
function calculatePrice(myform){

  //Get selected data  
  var elt = document.getElementById("memoryItem");
  var memory = elt.options[elt.selectedIndex].value;
  var memoryQty = parseInt(document.getElementById("memoryItemQty").value);

  var elt = document.getElementById("hddItem");
  var hdd = elt.options[elt.selectedIndex].value;
  var hddQty = parseInt(document.getElementById("hddItemQty").value);

  var elt = document.getElementById("networkItem");
  var network = elt.options[elt.selectedIndex].value;
  var networkQty = parseInt(document.getElementById("networkItemQty").value);

  //convert data to integers
  memory = parseInt(memory)*memoryQty;
  hdd = parseInt(hdd)*hddQty;
  network = parseInt(network)*networkQty;

  //calculate total value  
  var total = memory+hdd+network; 

  //print value to  PicExtPrice 
  document.getElementById("PicExtPrice").value=total;

}
</script>



<FORM Name="myform">
<table>
<tr><th>Item</th><th>Qty</th></tr>
<tr>
<td>
<SELECT NAME="memoryItem" onChange="calculatePrice()" id="memoryItem">
  <OPTION value="0">--Select One Choice--</OPTION>
  <OPTION value="49">8 GB add $49</OPTION>
  <OPTION value="98">12 GB add $98</OPTION>
</SELECT>
</td><td><input type="text" id="memoryItemQty" value="1" onChange="calculatePrice()" /></td></tr><tr><td>
<SELECT NAME="hddItem" onChange="calculatePrice()" id="hddItem">
  <OPTION value="0">--Select One Choice--</OPTION>
  <OPTION value="109">1 TB HD add $109</OPTION>
  <OPTION value="150">1.5 TB HD add $150</OPTION>
</SELECT>
</td><td><input type="text" id="hddItemQty" value="1" onChange="calculatePrice()" /></td></tr><tr><td>
<SELECT NAME="networkItem" onChange="calculatePrice()" id="networkItem">
  <OPTION value="0">--Select One Choice--</OPTION>
  <OPTION value="109">Laptop 1 $109</OPTION>
  <OPTION value="79">lapto 2 $79</OPTION>
</SELECT>
</td><td><input type="text" id="networkItemQty" value="1" onChange="calculatePrice()" /></td></tr>
</tr>
</table>
</FORM>

<button type="button" onclick="calculatePrice()">Calculate</button>
Total:<INPUT type="text" id="PicExtPrice" Size=8>  

You can also use other input events like "onkeypress", "onkeyup" or "onkeydown"

Hope help you