Bootstrap Snippet Calc using HTML jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<form id="form1" method="post" action="">
  <p>
    <select name="CPU" id="CPU">
      <option value="0" selected>Select CPU</option>
      <option value="246">Intel Core i5 4440 3.1GHz (3.3GHz Turbo) Quad Core</option>
      <option value="268.80">Intel Core i5 4570 3.2GHz (3.6GHz Turbo) Quad Core CPU</option>
      <option value="282">Intel Core i5 4570S 2.9GHz (3.6GHz Turbo) Quad Core CPU</option>
      <option value="294">Intel Core i5 4670 3.4GHz (3.8GHz Turbo) Quad Core CPU</option>
      <option value="414">Intel Core i7 4770 3.4GHz (3.9GHz Turbo) Quad Core CPU</option>
    </select>
  </p>
  <p>
    <select name="GPU" id="GPU">
      <option value="0">Select Graphics Card</option>
      <option value="1498.80">EVGA GeForce GTX Titan 6GB Superclocked</option>
      <option value="958.80">Gigabyte GeForce GTX 780 Ti 3GB</option>
      <option value="754.80">Gigabyte GeForce GTX 780 OC 3GB</option>
      <option value="502.80">EVGA GeForce GTX 770 Superclocked 2GB</option>
      <option value="378">EVGA GeForce GTX 760 ACX 2GB</option>
      <option value="262.80">Gigabyte GeForce GTX 660 OC 2GB</option>
      <option value="250.80">EVGA GeForce GTX 650 Ti Boost 2GB Superclocked</option>
      <option value="154.80">EVGA GeForce GTX 650 1GB</option>
      <option value="130.80">ASUS GeForce GT 640 2GB</option>
      <option value="814.80">XFX Radeon R9 290X 4GB</option>
      <option value="598.80">XFX Radeon R9 290 4GB</option>
    </select>
  </p>
  <p>
    <select name="HDD" id="HDD">
      <option value="0">Select HDD
        <option value="70.80">500gb</option>
        <option value="82.80">1TB</option>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function() {
  var fields = $('#form1 :input').change(calculate)
  $("#form1 option").text(function(i, t) {
    if (this.value !== "0")
      return t + " - " + this.value
  }).first().change()
  
function calculate() {
  var price = 0;
  var list = []
  fields.each(function() {
    price += +$(this).val();
    if ($(this).val() > 0)
      list.push($(this).find("option:selected").text())
  })
  $("#list").html(list.join("<br>"))
  $('#price').html(price.toFixed(2));
}
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Calc"
Bootstrap 4.1.1 Snippet by denisnorma

Related: See More

Questions / Comments:

"Calc" Bootstrap 4.1.1 Snippet by denisnorma

Related: See More

Questions / Comments:

"Calc"
Bootstrap 4.1.1 Snippet by denisnorma