ahadeveloper777 ahadeveloper777 - 1 month ago 4x
CSS Question

Automatically Calculate And Show Result On Dynamic Parent While KeyUp on Dynamic Child TextBox

This is still regarding dynamic parent and dynamic child where my issue is to automatically do calculation while key-up function.

All the script you can find at my previous question

I also already add class on each div and input to make it better as suggestions.

<div id="divexpeses" **class="expenses"** style="margin-left:25px;background-color:antiquewhite">
<label style="float:left; margin-right:100px;">Expenses</label><label>Amount</label>
<input type="text" name="txtpetrol[]" class="field1" value="90" />
Pay Trip
<input type="text" name="txtticket[]" class="field1" value="90" />

Now. Let me show my function where actually I need do automatically calculate and should be show up accordingly on parent div:-

$(".purchase-item").keyup('.field1', function (index, value) {
// get current index position of the div
var itemIndex = $(this).parents('expenses').children('.field1').index($(this).parent('.field1'));

Your must remember this is dynamic parent and dynamic child!

Each time I insert value on txtpetrol[] txtticket[] result be determine first which Parent Index and div Expenses. Then it should show at like below:-

Expenses Amount -- to --> Expenses Amount: 180

Any idea how overcome this issue? I need help please.

Thanks on advance for reading and replying my question.


Firstly I must say thanks to @guest271314 where show it code and I appreciate. I trying to adopt it, but it's not suitable on my situation and I keep thinking it's should be more simple than that.

Before I sleep I just trying this syntax like below and I got what I want:-

$(".purchase-items").keyup('.expenses', function (index, value) {
                // get current index position of the div
                dt2 = 0;
                var itemIndex = $(this).index();
                //var items = $(".expenses").index(); //current div expenses
                //find input(.field2) inside div(.expenses) as parent
                    var innerDivId = $(this).val();
                    if (innerDivId == '') { innerDivId = "0" };
                    //do calculation
                    dt2 = (Number(dt2) + Number(innerDivId));

I not sure why it workable, sum all input on based div and show a correct result because I am very very new on jquery function.