將HTML表單輸入與選擇選項值相乘

-2

我希望用戶從菜單中選擇特定的價格選項和數量，並自動計算總計。即（其價格）*（產品的數量或數量）。將HTML表單輸入與選擇選項值相乘

這是代碼。

請選擇您的學術水平

<select name="ac_level" id="ac_level" required=""> 
<option id="1" value="highschool">Highschool</option> 
<option id="2"value="college">College</option> 
<option id="3" value="university">University</option> 
<option id="4" value="masters">Masters</option> 
<option id="5" value="phd">PhD</option> 
</select>

頁

<input name="pages" id="number" required="" type="number" min=1 /> 
<input name="total" id="total" type="text" readonly /> 
<!-- #total = #number * #ac_level -->

數

來源

2017-02-25 Faizan Ahmed

實在是沒有力氣展現在這裏。價格在哪裏，數量輸入在哪裏，腳本的第一次嘗試在哪裏？ – trincot

這聽起來像你需要嘗試一些簡單的JavaScript介紹。可以用幾種不同的方式解決這個問題（客戶端或服務器端）。我會嘗試Google搜索，「用JavaScript處理HTML表單」（在這個網站上已經有很多關於此主題的答案）。 –

@trincot我對此非常抱歉。我試圖編寫一個腳本，但它不起作用，所以我認爲提交一個沒有腳本會更好（只是爲了避免混淆）。 –

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script> 
     <script> 

      $(document).ready(function(){ 

       $(document).on("change","#selectboxnumbers",function(){ 
        //user is user picks new option 
        var value1 =0,value2 = 0; 

        value1 = $("#selectboxnumbers option:selected").attr("value") * 1; 
        value2 = $("#value2").val() * 1; 

        if(value1 != "" && value2 != "" && value1 != "undefined" && value2 != "undefined"){ 
         $("#score").html("$" + Math.round(value1 * value2)); 
        } 
       }); 
       $("input").on("keyup change",function(){ 
        //user is typing so will trigger this 
        var value1 =0,value2 = 0; 

        value1 = $("#selectboxnumbers option:selected").attr("value"); 
        value2 = $("#value2").val(); 

        if(value1 != "" && value2 != "" && value1 != "undefined" && value2 != "undefined"){ 
         $("#score").html("$" + Math.round(value1 * value2)); 
        } 
       }); 
      }); 
     </script> 
    </head> 
    <body> 

     Enter Value 1: 
     <select name="ac_level" id="selectboxnumbers"> 
      <option id="1" value="32">Item 1 - $32</option> 
      <option id="2" value="55.93">Item 2 - $55.93</option> 
      <option id="3" value="88.27">Item 3 - $88.27</option> 
      <option id="4" value="2">Item 4 - $2</option> 
      <option id="5" value="1">Item 5 - $1</option> 
     </select><br> 

     Enter Value 2: <input type="number" id="value2"> 

     <p id="score"></p> 

    </body> 
</html>

來源

2017-02-25 15:26:29 linc

好的答案，（適用於我），但爲什麼「value1 = value1 =」？ –

@linc我直接在我的網站上試過這段代碼，但沒有奏效。我也試過它在Dreamweaver中，但它說，下面一行有錯誤。我不知道爲什麼。（「＃score」）。html（「$」+ Math.round（value1 * value2））; }' –

@FaizanAhmed我不知道爲什麼它不起作用 - 我直接嘗試了這一點 - 讓我再次檢查，看看一切正常 – linc

將HTML表單輸入與選擇選項值相乘

回答

相關問題