Cloned row requesting same function

Question

Possible Duplicate:
Call same function by a cloned list row

I am trying to make a simple calculation to work.

I have the following running:

http://jsfiddle.net/vSyK6/41/

Basically, the way it works now is this: When you select an option on the drop down list it will display the content based on the option selected. Then when you select the same option again it will add, basically clone the same row. Now, when the second option is selected "Option2" it will display an empty textbox. When you enter a number it will or should call the a function where we make a basic calculation. The function is already in the script.

However, when we have two empty textboxes it should call the same calculation function but calculate seperately and puts it in a different div. The div# where we display the amount is a called "amount"

Basically, it should work like this:

First Empty textbox -> 100 -> 100 * 22.38 = display result in div#1
Second Empty textbox -> 230 -> 230 * 22.38 = display in div#2

any idea on how to accomplish that ?

Answer 1

When cloning elements the id is cloned as well. It is best practice to create a new ID for the cloned elements, which will also help in accomplishing what you want. The same goes for the name attribute as well.

With a few modification to your code, http://jsfiddle.net/dNQVQ/3/, I was able to get what you were after. Let me first say that this might not be the ideal way to go, but it is a start. Like I said earlier the key is going to be setting unique ids for the cloned elements. What I did in this example was use a index as part of the list element id that is cloned with a matching index in an 'amount' div. This way when an input is updated the index is retrieved and then used to update the appropriate div. Additionally, I moved the function that did the calculation and updates to an anonymous function in the settimeout call. This makes it easy to use a reference to the updated input in the function call.

Answer 2

Joining the party quite late here :) Here is one vernon: http://jsfiddle.net/KVPwm/

ALso if its assignment bruv, put an assignment homework tag!

People around SO community are awesome folks so be truthful, guys will help man!

• Use .on instead of live - recommendation. i.e. upgrade your JQ source if keen read this - What's wrong with the jQuery live method?
• you have 2 document.ready functions also I chained few things for you.
• Also think of using isNan check as well.
• Rest you can read the code and play around a bit to make it more concise.
• I have added 2 divs and using the id number to populate the stuff accordingly.

This should fit the cause :)

code

$("document").ready(function() {
    /////////////////////////////////CALUCATIONS/////////////////////////////////
    //setup before functions
    var typingTimer; //timer identifier
    var doneTypingInterval = 0; //time in ms, 5 second for example
    $('input[name=Input2], input[name=Input1]').live('keyup', function() {
        var str = $(this).prop("id");
        var pattern = /[0-9]+/g;
        var matches = str.match(pattern);

        amount = parseFloat($(this).val()) * 22.38;
        typingTimer = setTimeout(doneTyping(matches), doneTypingInterval);
    });

    $('#Input2').keydown(function() {
        clearTimeout(typingTimer);
    });

    function doneTyping(matches) {
        $('#amount'+matches).text(amount.toFixed(2) + " lbs");
    }
    $("#List-Option1,#List-Option2").hide();

    $('#category').change(function() {
        var str = $('#category').val();
        if (str == 'Option1') {
            var option1 = $("#List-Option1:first").clone().show();
            $('#box li:last').after(option1);
        }

        if (str == 'Option2') {
            var option2 = $("#List-Option2:first").clone().show();
            $('#box li:last').after(option2);

        }

    });
});​