PHP/MySQLの値を使用したjQuery数

Question

数値からパーセントを減算してjQueryを使用して入力に表示しようとしていますが、PHP/MySQLを使用してフォームが値を取得しています。

私は値がデータベースに戻って別のテーブルに掲載されるユニークなIDであるので、これは私が持っているものである選択フィールドに余分な属性を使用していないよ：

<input type="text" id="invamount" name="invamount" value="250.00"/> 
<select id="invdiscount"> 
    <option data-discount="0" value="" selected>No Discount</option> 
    <option data-discount="5" value="1">Discount 1 - 5%</option> 
    <option data-discount="10" value="2">Discount 2 - 10%</option> 
    <option data-discount="15" value="3">Discount 3 - 15%</option> 
</select> 
<input type="text" id="invtotal" name="invtotal" /> 

<script> 
jQuery(document).ready(function() { 
    jQuery("#invtotal").on("click", function() { 
     sum(); 
    }); 
}); 

function sum() { 
      var amount = document.getElementById('invamount').value; 
      var discount = jQuery("#invdiscount option").attr("data-discount"); 
      var maths1 = (discount * amount/100); 
      document.getElementById('invtotal').value = maths1; 
     } 
</script> 

何がありますコンソールにエラーフォームをロードするが、私は別の割引を選択するたびに、総入力の値は、単に問題は、あなたが入力にそれぞれクリックにsum()を行っているということである0

Answer 1

割引の属性が正しく取得されていないという問題があります。 あなたは次の行を実行した後に値引き変数の値を調べる場合：

var discount = jQuery("#invdiscount option").attr("data-discount"); 

jQuery("#invdiscount option")がが 1を選択し、選択ボックスからすべてのオプションをいない選択されているため、それは常に、「0」を返します。選択されたオプションから割引属性を取得するには

、あなたが（：オプション後を選択します）jQuery("#invdiscount option:selected").attr("data-discount")を使用することができます。このオプションを選択した後に更新された入力を取得したい場合

また、あなたは要素を選択で変更イベントをリッスンする必要があります。

作業コードは次のようになります。

<input type="text" id="invamount" name="invamount" value="250.00"/> 
<select id="invdiscount"> 
    <option data-discount="0" value="" selected>No Discount</option> 
    <option data-discount="5" value="1">Discount 1 - 5%</option> 
    <option data-discount="10" value="2">Discount 2 - 10%</option> 
    <option data-discount="15" value="3">Discount 3 - 15%</option> 
</select> 
<input type="text" id="invtotal" name="invtotal" /> 

<script> 
jQuery(document).ready(function() { 
    jQuery("#invdiscount").on("change", function() { 
     sum(); 
    }); 
}); 

function sum() { 
      var amount = document.getElementById('invamount').value; 
      var discount = jQuery("#invdiscount option:selected").attr("data-discount"); 
      var maths1 = (discount * amount/100); 
      document.getElementById('invtotal').value = maths1; 
     } 
</script> 

最後に、あなたが取得し、代わりにプレーンなJavaScriptを使用して値を割り当てるためにjQueryのメソッドを使用することができます。コードは次のようになります：

<input type="text" id="invamount" name="invamount" value="250.00"/> 
<select id="invdiscount"> 
    <option data-discount="0" value="" selected>No Discount</option> 
    <option data-discount="5" value="1">Discount 1 - 5%</option> 
    <option data-discount="10" value="2">Discount 2 - 10%</option> 
    <option data-discount="15" value="3">Discount 3 - 15%</option> 
</select> 
<input type="text" id="invtotal" name="invtotal" /> 

<script> 
jQuery(document).ready(function() { 
    jQuery("#invdiscount").on("change", function() { 
     sum(); 
    }); 
}); 

function sum() { 
    var amount = $("#invamount").val(); 
    var discount = jQuery("#invdiscount option:selected").attr("data-discount"); 
    var maths1 = (discount * amount/100); 
    jQuery("#invtotal").val(maths1); 
} 
</script> 

Answer 2

にとどまります。
そしての変更をに変更するたびにsum()を実行する必要があります。

jQuery(document).ready(function() { 
    jQuery("#invdiscount").on("change", function() { 
     sum(); 
    }); 
});