0

テキストボックスに価格と数量を含む製品リストを動的に表示しています。数量を入力するときに製品の合計価格を計算したいのですが、ボタンを増減するときにonclickでこれを行いましたが、キーアップ時に合計価格も計算する必要があります数量テキストボックス

私のコードは

<div id="gw_articles">
    <div id="article_list">
        <p>
            <div id="article_1_element">
                <input type="text" id="jform_article_1_name" name="jform[article_1][name] " value="Spark plug ARH-II AIW16 IRIDIUM+" disabled="disabled" size="35" /> <a id="jform_article_1_modal">Select an product</a>

                <input type="hidden" id="jform_article_1_id" name="jform[article_1][id]" value="2" />
                <input type="hidden" name="jform[article_1][price]" id="jform_article_1_price" value="30.00" class="inputbox" />
                <input type="text" name="jform[article_1][price_total]" id="jform_article_1_price_total" value="90" class="inputbox" size="10" />
                <input type="text" name="jform[article_1][quantity]" id="jform_article_1_quantity" value="3" class="inputbox" size="10" />
                <input type="button" class="btn" value="+" onclick="document.id('jform_article_1_quantity').value++; calculateTotalPrice('jform_article_1')" />
                <input type="button" class="btn" value="-" onclick="if(document.id('jform_article_1_quantity').value >1)document.id('jform_article_1_quantity').value--; calculateTotalPrice('jform_article_1')" /> 
                <a title="test" class="btn btn-danger" onclick="removeElement('article_1_element')"> Delete </a>
            </div>
        </p>
        <p>
            <div id="article_2_element">
                <input type="text" id="jform_article_2_name" name="jform[article_2][name] " value="Spark plug ARH-II AIW20 IRIDIUM+" disabled="disabled" size="35" /> <a id="jform_article_2_modal" class="btn modal" title="Select an product">Select an product</a>

                <input type="hidden" id="jform_article_2_id" name="jform[article_2][id]" value="1" />
                <input type="hidden" name="jform[article_2][price]" id="jform_article_2_price" value="40.00" class="inputbox" />
                <input type="text" name="jform[article_2][price_total]" id="jform_article_2_price_total" value="40" class="inputbox" size="10" />
                <input type="text" name="jform[article_2][quantity]" id="jform_article_2_quantity" value="1" class="inputbox" size="10" />
                <input type="button" class="btn" value="+" onclick="document.id('jform_article_2_quantity').value++; calculateTotalPrice('jform_article_2')" />
                <input type="button" class="btn" value="-" onclick="if(document.id('jform_article_2_quantity').value >1)document.id('jform_article_2_quantity').value--; calculateTotalPrice('jform_article_2')" /> 
                <a title="test" class="btn btn-danger" onclick="removeElement('article_2_element')"> Delete </a>
            </div>
        </p>
    </div>
    <input type="hidden" id="articles_max" name="articles_max" value="2" />
</div>
4

2 に答える 2

0

このコードの良さには多くのことが起こっています。これを試して：

function calculateTotalPrice(article) {
    var price = and * multiplication - (some + addition);
    $('#jform_article_2_total_price').val(price);
}
$('#jform_article_2_quantity').focusout(function(){
    calculateTotalPrice('jform_article_2');
});
于 2013-09-20T02:09:26.813 に答える
0

私はそれを愛した 

      `jQuery(document).ready(function($) {
       jQuery("input[id*='quantity']" ).focusout(function(){
    max_value = $("#articles_max").val();
    var n =1;
        jQuery("input[id*='quantity']" ).each(function(){
    if (n <= max_value) {
    id='jform_article_'+n;
    calculateTotalPrice(id);
   n++;
   }
    })     
    })  
     });
    function calculateTotalPrice(field){

            var price = document.id(field + "_price").value;
            var quantity = document.id(field + "_quantity").value;
            document.id(field + "_price_total").value = price * quantity; 
        }`
于 2013-09-23T03:29:45.147 に答える