How to identify button click from array of buttons

Question

I have a table with 1 button in each row, on click of button tax shown in that row will be applied to the client and i need to show some indication to end user. I want to change the button css(color, txt ect.) on click for that purpose. Below is the code -

<table class="data report_table">       
                        <tbody>
                        <c:forEach var="taxVO" items="${taxVo}" varStatus="item">
                        <tr class="${item.index % 2 == 0 ? 'odd gradeX' : 'even gradeC'}">                          
                            <td><c:out value="${taxVO.taxName}" /></td>
                            <td><input type="button" class="btn-icon" value="Apply" id="applyTaxButton" onClick="applyTax('${taxVO.taxId}');"></input>
                            </td>   
                        </tr>
                        </c:forEach>
                        </tbody>
                    </table>

and jquery i am using is -

function applyTax(taxIdValue)   {
    $('#taxId').val(taxIdValue);
    $(this).$('#applyTaxButton').css("background-color","yellow");
}

but i am getting error - Uncaught TypeError: Object [object Object] has no method '$'. Can someone please let me know how to fix it?

Have you tried $(this).find('#applyTaxButton').css("background-color","yellow");? — Igor Shastin
– Igor Shastin, Commented Oct 14, 2012 at 17:36
yes i tried, although there was no java script error but nothing happens on the button as well. No change. — Sachin
– Sachin, Commented Oct 14, 2012 at 17:38

nbrooks · Accepted Answer · 2012-10-14 17:57:04Z

2

jsFiddle Demo

HTML IDs should be unique, so you should not have the all buttons having the same ID. Use the class attribute for that purpose. However, to simply change the context of your selection, the correct syntax is:

$(selector, context);

A better approach is to remove the onclick attribute altogether, and handle the event completely in jQuery:

$(function() {
    $('.report_table').on('click', '.btn-icon', function() {
        $(this).css('background-color', 'yellow');
        $('.btn-icon').not(this).css('background-color', 'transparent');
    });
});

edited Oct 14, 2012 at 17:57

answered Oct 14, 2012 at 17:38

nbrooks

18.2k5 gold badges58 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sachin Over a year ago

Not working, no error but no change either, i think my JSTL loop is generating more tha 1 button and actual HTML is - <input onclick="applyTax('2');" id="applyTaxButton" value="Apply" class="btn-icon btn-small btn-grey" type="button">, this might cause the jquery hard to find exect button

Sachin Over a year ago

even though i made it dynamic(id) by adding loop counter value with button id, still it doesn;t work :(

Sachin Over a year ago

Removing onClick() also doesn't help. :(

webdeveloper · Accepted Answer · 2012-10-14 17:48:54Z

1

<input id="taxId" type="text" /><br />

<input onclick="applyTax(this, '1');" value="Apply" class="btn-icon btn-small btn-grey" type="button" />
<input onclick="applyTax(this, '2');" value="Apply" class="btn-icon btn-small btn-grey" type="button" />
<input onclick="applyTax(this, '3');" value="Apply" class="btn-icon btn-small btn-grey" type="button" />


<script>
function applyTax(btn, taxIdValue)   {
    $('#taxId').val(taxIdValue);
    $(btn).css("background-color","yellow");
}
</script>

Demo: http://jsfiddle.net/NFGkj/

But it's better to use jquery event binding.

answered Oct 14, 2012 at 17:48

webdeveloper

17.3k3 gold badges51 silver badges47 bronze badges

2 Comments

Sachin Over a year ago

You solution has 1 issue, i have to undone yellow once another apply button is clicked. only 1 can be of yellow color out of array of apply buttons

webdeveloper Over a year ago

@Sachin I just show idea, for one yellow button try this: jsfiddle.net/NFGkj/1 or jsfiddle.net/NFGkj/2

Collectives™ on Stack Overflow

How to identify button click from array of buttons

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related