CODEWITHSUNDEEP
jquery
Chicago Excel User
Chicago Excel User

Reputation: 263

JQuery Execute Function Based on ID

I have buttons and other elements that are dynamically created.

<input name="qbut" type="button" id="qbut" value="Go" />

<input name="qbut1" type="button" id="qbut1" value="Go" />

<input name="qbut2" type="button" id="qbut2" value="Go" />

Here is the function that does something when #qbut button is clicked:

$(document).ready(function() {
    $("#qbut").click(function() {
        var qvendor = $("#qvendor").val();
        var qmiles = $("#qmiles").val();
        var qtaxes = $("#qtaxes").val();
        var qprice = $("#qprice").val();
        var qqty = $("#qqty").val();
        var qprofit = qprice * qqty - qprice * qqty * 3.2 / 100
            - qtaxes - qmiles * qvendor / 100000;
        var qamex = qprice * qqty * 3.2 / 100;
        var qgross = qprice * qqty ;
        var fqprofit = formatDollar(qprofit);
        var fqamex = formatDollar(qamex);
        var fqgross = formatDollar(qgross);

        $('#qgross').val(fqgross);
        $('#qamex').val(fqamex);
        $('#qprofit').val(fqprofit);
    });
});

How do I make the same function work for each set?

For example: When #qbut1 is pressed it works for:

$("#qbut1").click(function() {
    var qvendor = $("#qvendor1").val();

    // etc.
});

Basically I need to get the number variable from button ID element and apply that variable in function for choosing corresponding elements.

Upvotes: 0

Views: 1548

Answers (4)

Chicago Excel User
Chicago Excel User

Reputation: 263

OK, I think by combining the 2 answers this should work:

<input class="myButton" name="qbut" type="button" id="qbut" value="Go" />


$(".myButton").click(function() {
   extractedString = $(this).prop('id').replace ( /[^\d.]/g, '' );
alert('integeris extracted  : ' + extractedString);

});

Upvotes: 1

Adam
Adam

Reputation: 6733

Use a class instead of ids for the buttons and assign the click handler using .on on a higher level element.

Either uses classes for the data (with a grouping class set as a data element on the button) or set the id suffix as a data item on the button E.g. (you only need either data-qclass or data-qnum depending on which you use)

<input class="qbutton" data-qclass="q0" data-qnum="" name="qbut" type="button" id="qbut" value="Go" />

<input class="qbutton" data-qclass="q1" data-qnum="1" name="qbut1" type="button" id="qbut1" value="Go" />

<input class="qbutton" data-qclass="q2" data-qnum="2" name="qbut2" type="button" id="qbut2" value="Go" />

with corresponding javascript

$(document).ready(function() {
    $(document).on(".qbutton", 'click', function() {

        // Using ids for fetching the data
        var q_num = $(this).data('qnum');
        var qvendor = $("#qvendor" + q_num).val();
        var qmiles = $("#qmiles" + q_num).val();

        // Alternative use classes
        var all_data_items = $('.' + $(this).data('qclass'));
        var qvendor = $(".qvendor", all_data_items).val();
        var qmiles = $(".qmiles", all_data_items).val();


    });
});

You could do it soley based on ids (you still need a common class to assign the click event, but without the data- elements) but I think using data- is clearer. However, for the id-based variant use javascript

$(document).ready(function() {
    $(document).on(".qbutton", 'click', function() {

        // Fetch the rest of the id of the button to use as a suffix for the data element ids
        var q_num = $(this).attr('id').replace(/qbut/, '');

        // Fetch data
        var qvendor = $("#qvendor" + q_num).val();
        var qmiles = $("#qmiles" + q_num).val();


    });
});

Warning: not tested at all, but should work!

Upvotes: 0

Tats_innit
Tats_innit

Reputation: 34107

Try this: demo http://jsfiddle.net/EAwbD/ click second button

So idea is to extract the number out of the string and + it to the qvendor object:

sample: extractedString = whateeverid.replace ( /[^\d.]/g, '' );

I reckon rest should fit the need :)

$("#qbut1").click(function() {
       extractedString = $(this).prop('id').replace ( /[^\d.]/g, '' );
       var qvendor = $("#qvendor" + extractedString  ).val();

});

or

$("#qbut1").click(function(e) {
       extractedString = e.target.id.replace ( /[^\d.]/g, '' );
       var qvendor = $("#qvendor" + extractedString  ).val();

});

Upvotes: 0

Aram
Aram

Reputation: 5705

I think for that you are going to need to use a class for hooking up the event like this:

<input class="myButton" name="qbut" type="button" id="qbut" value="Go" />

<input class="myButton" name="qbut1" type="button" id="qbut1" value="Go" />

<input class="myButton" name="qbut2" type="button" id="qbut2" value="Go" />

and then in the JQuery you can go like:

$(".myButton").click(function() {
var qvendor = $("#qvendor").val();
}

Upvotes: 0

Related Questions