選択した値でテキストフィールド値を掛ける

Question

テキストフィールドの値に選択リストの値を掛けるにはどうすればよいですか？

$(document).ready(function() { 
 
$('#myForm').on('keyup', 'input', function() { 
 
    var iSum = 0; 
 
    $('#myForm input').each(function() { 
 
     iSum = iSum + parseFloat($(this).val()); 
 
    });  
 
    $('#calculateSum').html(iSum); 
 
}); 
 
});

<form id="myForm"> 
 
<input type="text" placeholder="Room length" /><br> 
 
<input type="text" placeholder="Room width" /> 
 
<br> 
 
<select> 
 
    <option value="type-1">Type 1 (150,00€/m²)</option> 
 
    <option value="type-2">Type 2 (155,00€/m²)</option> 
 
</select><br> 
 
    <div> 
 
     <label for="calculateSum">Sum is</label> 
 
     <span id="calculateSum">0</span> /m² 
 
    </div> 
 
    </form>

が、私はテキストフィールドの乗算の結果と選択リストの値を乗算します：

私はfolowing HTMLコードを持っています。だから、部屋の長さx部屋の幅xのようにする必要があります。 1型

Answer 1

ここでは、ソリューションhttps://jsfiddle.net/kq3ugctn/1/

updateCalc = function(){ 
 
    var iSum = 1; 
 
    $('#myForm input').each(function() { 
 
    if(isNaN(parseFloat($(this).val()))) { 
 
     iSum *= 0; 
 
    } else { 
 
     iSum *= parseFloat($(this).val()); 
 
    }  
 
    });  
 
    iSum *= parseFloat($('select option:selected').data('value')); 
 
    $('#calculateSum').html(iSum); 
 
} 
 

 
$('#myForm').on('keyup', 'input', function() { 
 
    updateCalc(); 
 
}); 
 

 
$('select').on('change', function(){ 
 
    updateCalc(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myForm"> 
 
    <input type="text" placeholder="Room length" /><br> 
 
    <input type="text" placeholder="Room width" /> 
 
    <br/> 
 
    <select> 
 
    <option value="type-1" data-value="15000" selected>Type 1 (150,00€/m²)</option> 
 
    <option value="type-2" data-value="15500">Type 2 (155,00€/m²)</option> 
 
    </select> 
 
    <br> 
 
    <div> 
 
    <label for="calculateSum">Sum is</label> 
 
    <span id="calculateSum">0</span> /m² 
 
    </div> 
 
</form>

ソリューションの説明

で行きます

updateCalc方法は二回

• input textbox更新が
• 選択オプションの変更と呼ばれます。

値がinput textbox`に入力されていない場合、それは、

とさせていただきますが、これはあなたを助けることを願っています。

Answer 2

function calculate() { 
 
\t var iSum = 1; 
 
\t $('#myForm input').each(function() { 
 
\t \t iSum *= parseFloat($(this).val()); 
 
\t });  
 
\t $('#calculateSum').html(iSum); 
 
\t var selectedValue = Number($("#values").val()); 
 
\t $('#calculateValue').html(iSum * selectedValue); 
 
} 
 
$(document).ready(function() { 
 
\t $('#myForm input, #values').on('keyup change select', function() { 
 
\t \t calculate(); 
 
\t }); 
 
\t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myForm"> 
 
<input type="text" placeholder="Room length" /><br> 
 
<input type="text" placeholder="Room width" /> 
 
<br> 
 
<select id="values"> 
 
    <option value="150.00">Type 1 (150,00€/m²)</option> 
 
    <option value="155.00">Type 2 (155,00€/m²)</option> 
 
</select><br> 
 
    <div> 
 
     <label for="calculateSum">Sum is</label> 
 
     <span id="calculateSum">0</span> /m² <br /> 
 
     Totla: <span id="calculateValue">0</span> € 
 
    </div>

Answer 3

これに対する簡単な答えは次のようになります。

 <form id="myForm"> 
    <input type="text" id="roomLength" placeholder="Room length" onchange="calculateCost();" /><br> 
    <input type="text" id="roomHeight" placeholder="Room width" onchange="calculateCost();" /> 
    <br> 
    <select name="rate" id="rate" onchange="calculateCost();"> 
     <option value="150.00">Type 1 (150,00€/m²)</option> 
     <option value="155.00">Type 2 (155,00€/m²)</option> 
    </select><br> 
     <div> 
      <label for="calculateArea">Area is</label> 
      <span id="calculateArea">0</span>m² 

      <label for="calculateCost">Cost is</label> 
      &euro;<span id="calculateCost">0</span> 
     </div> 
</form> 

     <script> 
      function calculateCost() { 
       var area = $('#roomLength').val() * $('#roomHeight').val(); 

       $('#calculateArea').html(area); 


       var rate = $('select[name=rate]').val(); 
       var cost = area * rate; 

       $('#calculateCost').html(cost); 

      } 
    </script>