將文本字段值與選擇列表相乘

Question

如何將文本字段中的值與選擇列表的值相乘？

我有如下因素的html代碼：

$(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>

我想用文本框的相乘的結果乘以選擇列表中的值。所以應該是房間長度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>