Jquery - dynamically add fields and multiplication of the values

Question

This is my code below. One can dynamically add fields by clicking 'Add More' button & also can remove the fields if required. I need to multiply input values and to get the Grand Total of the results of multiplication of successive fields. How can i achieve this in 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!

Bla... · Accepted Answer · 2014-08-16 13:13:40Z

So here is what you must do:

1) Instead of using id attribute, it would be better to use class attribute for easier 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="" />

Note: Don't forget to change your Add More function..

2) Here is how you calculate the total, that is triggered by either changing the <input> or <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();
});

Check out this Fiddle..

Collectives™ on Stack Overflow

Jquery - dynamically add fields and multiplication of the values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related