HTMLフォーム入力にselectオプション値を掛ける

-2

メニューから特定の価格オプションと数量を選択し、合計を自動的に計算させるようにします。すなわち（その価格）*（製品の数量または数量）。HTMLフォーム入力にselectオプション値を掛ける

これはコードです。

あなたの学術レベルのページ

の

<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の紹介を試す必要があるようです。これをいくつかの異なる方法（クライアント側またはサーバー側）で解決することは可能です。私はグーグルで「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フォーム入力にselectオプション値を掛ける

答えて

関連する問題