如何將兩個範圍值一起添加，然後將其乘以選擇標籤？

林進行一個簡單的形式來計算地毯的價格等，我有2個範圍輸入字段與可調滑塊從0到100，並選擇標籤與下拉選項與不同的價格，我想要做的計算是（範圍1 +範圍2）*選擇然後總計放入文本框總計這是所有沒有點擊提交，所以它給你一個實時計算，而不需要提交頁面，關於如何完成這個任何想法？如何將兩個範圍值一起添加，然後將其乘以選擇標籤？

<html> 
<head> 
      <link rel="stylesheet" type="text/css" href="form_style.css"> 
      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
      <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> 
      <script type="text/javascript"> 
       object.onchange=function output(){ 
       var value1 = document.getElementById("width").value; 
       var value2 = document.getElementById("length").value; 
       document.getElementById('total').innerHTML = parseInt(width) + parseInt(length);  
       }   
      </script> 
     </head> 
    <body> 
     <div id="form11"> 
      <h1>Form</h1> 
      <form method="post" action="#"> 
       <table id="table11"> 

        <tr><td><p>Width (m):</p></td><td><input type="range" name="width" id="value1" value="0" min="0" max="100" data-highlight="true" onchange="calc"></td></tr> 
        <tr><td><p>Length (m):</p></td><td><input type="range" name="length" id="value2" value="0" min="0" max="100" data-highlight="true" onchange="calc"></td></tr> 
        <tr><td><p>Carpet Type:</p></td><td><select name="carpettype"> 
                  <option value="6.99">Carpet1</option> 
                  <option value="4.99">Carpet2</option> 
                  <option value="8.99">Carpet3</option> 
                  <option value="3.99">Carpet4</option> 
                  <option value="5.99">Carpet5</option> 
                 </select></td></tr> 
        <tr><td><p>Total:</p></td><td><input type="text" id="total" name="total"/></td></tr> 
        <tr><td colspan="2"><input type="submit" value="Submit"/></td></tr> 


       </table> 
      </form> 
     </div> 


    </body>

來源

2014-07-08 M0n5terBunny

Seing爲你使用jQuery：

<script type="text/javascript"> 
    $(document).ready(function(){ 

     // On any change in form. 
     $("form :input").change(function() { 
      // Fetch selected options. 
      var value1 = $('form #value1').val(); 
      var value2 = $('form #value2').val(); 
      var selectoption = $("form select option:selected").val(); 
      // Output to text field. 
      $('form #total').val((value1 + value2) * selectoption); 
     }); 

    }); 
</script>

見working jsfiddle。

來源

2014-07-08 13:52:10 Banana

我是否缺少一些我喜歡的，但沒有任何事情發生http://50.87.10.130/includes/form.html – M0n5terBunny

@ M0n5terBunny您需要'$（document）.ready（function（）{... }'部分告訴jQuery加載它後面的身體 – Banana

加入它仍然沒有:(可能其他javascripts影響它呢？ – M0n5terBunny

如何將兩個範圍值一起添加，然後將其乘以選擇標籤？

回答

相關問題