javascriptによるHTMLフォーム計算

Question

javascriptでHTMLフォームを作成しようとしていますが、私は1つの部分を作成できませんでした。

訪問者が「サービス1」のドロップダウンメニューから選択すると、価格は1.5倍になります。彼が「サービス2」を選択した場合、価格は2倍になり、その後「adet」入力値で乗算されます。私はこのようにスクリプト部分で乗数の値を作りたいと思っています。

この計算が必要です。パケット（ドロップダウン）* 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>