PHP/MySQL 값을 사용하는 jQuery 수학

Question

숫자에서 백분율을 뺀 다음 jQuery를 사용하여 입력에 표시하려고하지만 양식이 PHP/MySQL을 사용하여 값을 가져옵니다.

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

더

있습니다 : 값이 다시 데이터베이스에 다른 테이블에 게시 할 수있는 고유 한 ID입니다 때문에 내가 선택 필드에 추가 속성을 사용하고

이 내가없는 것입니다 콘솔에서 오류가 양식을로드 할 때하지만 난 다른 할인 혜택을 선택할 때마다, 전체 입력 값은 문제가 당신이 입력의 각 클릭에 sum()을하고 있다는 것입니다 0

Answer 1

문제는 할인 속성을 제대로 얻지 못한다는 것입니다. 다음 줄의 실행 후 할인 변수의 값을 검사하는 경우 : jQuery("#invdiscount option")이 하나를 선택 선택 상자가 아닌 에서 모든 옵션을 선택하기 때문에,

가

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

그것은 항상 "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> 

마지막으로, 당신은 얻을 대신 일반 자바 스크립트를 사용하여의 값을 할당의 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(); 
    }); 
});