代码之家 › 专栏 › 技术社区 › Chetan Singh

Jquery-动态添加字段和值的乘法

multiplication add forms jquery

0

Chetan Singh · 技术社区 · 11 年前

这是我下面的代码。可以通过单击“添加更多”按钮动态添加字段;如果需要,也可以删除字段。我需要将输入值相乘,得到连续字段相乘结果的总和。 如何在Jquery中实现这一点?

    <div class="my-form">
    <form name="form" >
        <p class="text-box">
    <select name="size[]" id="box1">
    <option value="20">20</option>
    <option value="35">35</option>
    <option value="50">50</option>
    <option value="100">100</option>
    </select>
    x
    <input name="qty[]" id="box2"  type="text" value="" />
   = <input name="multiply[]" id="answer" type="text" value="" />
       <a class="add-box" href="#">Add More</a>
        </p>

        <input type="submit" value="Submit" /> 
        </form>
        </div>
        Grand Total: <span class="GrandTotal">0.00</span><br/><br/>



      <script>
        jQuery(document).ready(function($){
            $('.my-form .add-box').click(function(){
                var n = $('.text-box').length + 1;
                if( 10 < n ) {
                    alert('Stop it!');
                    return false;
                }
                var box_html = $('<p class="text-box"> <select name="size[]" id="box1' + n + '"> <option value="20">20</option> <option value="35">35</option> <option value="50">50</option> <option value="100">100</option> </select> x <input type="text" name="qty[]" value="" id="box2' + n + '" /> = <input name="multiply[]" id="answer' + n + '"  value="" /> <a href="#" class="remove-box">Remove</a></p>');
                jQuery('#my-form').append(box_html);
                box_html.hide();
                $('.my-form p.text-box:last').after(box_html);
                box_html.fadeIn('slow');
                return false;
            });

            $('.my-form').on('click', '.remove-box', function(){
                $(this).parent().css( 'background-color', '#FF6C6C' );
                $(this).parent().fadeOut("slow", function() {
                    $(this).remove();
                    $('.box-number').each(function(index){
                        $(this).text( index + 1 );
                    });
                });
                return false;
            });
        });
        </script>

Click here for Working Example !

1 回复 | 直到 11 年前

1

Bla... 11 年前

因此,您必须做到以下几点:

1) 而不是使用 id 属性,最好使用 class 属性以便于jQuery。。

<select name="size[]" id="box1" class="box1">
<option value="20">20</option>
<option value="35">35</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
x
<input name="qty[]" id="box2" class="box2" type="text" value="" />
= <input name="multiply[]" id="answer" class="answer" type="text" value="" />

注意:不要忘记更改 Add More 作用

2) 以下是您如何计算总数,这是通过更改 <input> 或 <select>

function calTotal(){
    var total = 0;
    $(".my-form .text-box .answer").each(function(){       
        total += Number($(this).val());
    });
    $(".GrandTotal").text("");
    $(".GrandTotal").text(total);
}
$(".my-form").on('input', '.box2', function(){
    var total_row = $(this).val();
    total_row *= $(this).siblings(".box1").val();
    $(this).siblings(".answer").val(total_row);
    calTotal();
});
$(".my-form").on('change', '.box1', function(){
    var total_row = $(this).val();
    total_row *= $(this).siblings(".box2").val();
    $(this).siblings(".answer").val(total_row);
    calTotal();
});

看看这个 Fiddle ..