使用javascript进行Html表单计算

Question

我正在尝试使用javascript制作HTML表单，但我无法成为一部分。

如果访问者从下拉菜单“服务1”中选择，则价格将乘以1.5。如果他选择“服务2”，则价格乘以2，然后乘以“adet”输入值。我想在这样的脚本部分中创建乘数值;

var service_prices = new Array();
 service_prices["service1"]=1.5;
 service_prices["service2"]=2;

我需要这个计算Paket（下拉）* Adet（输入）你能帮帮我吗？ 这些是我的HTML代码;

 <script>
        $(function(){
        //Adet
        var val = $('#adet').val();
        output = $('#output');
        output.html(val);

        $('#adet').on('change', function () {
            output.html(this.value);
        });

        $('#Paket').change(function () {
            if (this.value == "80") {
                $('#adet').prop({
                    'min': 20,
                });
            }
            if (this.value == "81") {
                $('#adet').prop({
                    'min': 100,
                });
            }
            $('#adet').val();
            output.html('');
        });
        });
    </script>           

    <form method="post" action="process.php"></br>
        <label class="control-label col-sm-3" for="inputSuccess3">Paket</label>
        <div class="col-sm-9">
            <select class="form-control" id="Paket" name="paket">
            <option value="80">Service 1 x1.5</option>
            <option value="81">Service 2 x2</option>
            </select>
        </div>
        <br>
        <label class="control-label col-sm-3" for="inputSuccess3">Adet</label>
        <div class="col-sm-9">
        <input class="form-control" type="number" id="adet" name="adet" min="20" max="250" value="10" required>
        </div>
        <label class="control-label col-sm-3" for="inputSuccess3">Link</label>
        <div class="col-sm-9">
            <input class="form-control" type="text" name="link" required>
        </div>
        <div class="col-sm-offset-4 col-sm-8">
            Fee: <span id="output"></span> Credi
        </div>
        <div class="col-sm-offset-4 col-sm-8">
          <button type="submit" class="btn btn-primary">Order</button>
        </div>
    </form>

Answer 1

您可以将值存储在如下数组中：

var service_prices = [{
    "name": "Service 1",
    "value": 80,
    "multiplier": 1.5
  }, {
    "name": "Service 2",
    "value": 81,
    "multiplier": 2
  }
];

您可以将乘数值存储在Paket下拉列表的每个选项中的data-attribute。

见这个例子：

(function() {
  var service_prices = [{
    "name": "Service 1",
    "value": 80,
    "multiplier": 1.5
  }, {
    "name": "Service 2",
    "value": 81,
    "multiplier": 2
  }];
  var Paket = document.getElementById("Paket");
  var adet = document.getElementById("adet");
  var output = document.getElementById("output");

  adet.onchange = function() {

    output.innerHTML = adet.value;

    if (Paket.value.length > 0) {
      var multiplier = Paket.options[Paket.selectedIndex].getAttribute("data-multiplier") * 1;
      output.innerHTML = adet.value * (Paket.value * 1) * multiplier;
    } else {
      output.innerHTML = "";
    }
  };

  Paket.onchange = function() {
    if (this.value.length > 0) {
      var multiplier = this.options[this.selectedIndex].getAttribute("data-multiplier") * 1;
      if (this.value === "80") {
        adet.setAttribute("min", "20");
      }
      if (this.value === "81") {
        adet.setAttribute("min", "100");
      }
      adet.value = 10;
      output.innerHTML = adet.value * (this.value * 1) * multiplier;
    } else {
      output.innerHTML = "";
    }
  };

  function fillServices(data) {
    var html = "", i, len = data.length, obj;
    html += "<option value=\"\">[SELECT]</option>";
    for (i = 0; i < len; i++) {
      obj = data[i];
      html += "<option data-multiplier=\"";
      html += obj.multiplier;
      html += "\" value=\"";
      html += obj.value;
      html += "\">";
      html += obj.name;
      html += "</option>";
    }
    return html;
  }
  Paket.innerHTML = fillServices(service_prices);
})();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<form method="post" action="process.php">
  <label class="control-label col-sm-3" for="inputSuccess3">Paket</label>
  <div class="col-sm-9">
    <select class="form-control" id="Paket" name="paket">
    </select>
  </div>
  <br>
  <label class="control-label col-sm-3" for="inputSuccess3">Adet</label>
  <div class="col-sm-9">
    <input class="form-control" type="number" id="adet" name="adet" min="20" max="250" value="10" required>
  </div>
  <label class="control-label col-sm-3" for="inputSuccess3">Link</label>
  <div class="col-sm-9">
    <input class="form-control" type="text" name="link" required>
  </div>
  <div class="col-sm-offset-4 col-sm-8">
    Fee: <span id="output"></span> Credi
  </div>
  <div class="col-sm-offset-4 col-sm-8">
    <button type="submit" class="btn btn-primary">Order</button>
  </div>
</form>