jQuery and HTML toggle buttons

Question

I have the following code:

echo "<button type=\"button\" class=\"btn btn-link\" onclick=\"personchange('{$row['first_name']}')\">{$row['first_name']}</button>";

What I am trying to do is read all the names from the database and create a button for each name. When a user clicks on a name, I want to call the personchange Javascript function, which works, and add a class to the button that changes the way it looks (so that the user knows which name is currently selected). I know we have to use jQuery to add the class, but how do I know which button I selected in jQuery?

user1477388 · Accepted Answer · 2013-07-31 19:44:17Z

2

You can add a class to button on click like this:

$('.btn').click(function() {
    $(this).addClass('clicked');
});

Is that what you're looking for?

answered Jul 31, 2013 at 19:44

user1477388

21.6k35 gold badges152 silver badges277 bronze badges

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

2 Comments

Nondeterministic narwhal Over a year ago

I'm assuming that OP wants one name selected at a time, so there should also be an extra line: a .removeClass('clicked') on the currently selected button before the addClass is called ;)

user1477388 Over a year ago

@Nondeterministicnarwhal They would have to add $('.btn').removeClass('clicked'); to the function passed to .click().

ia.solano · Accepted Answer · 2013-07-31 19:44:43Z

0

You can have an id attribute on each button, and in the onclick() function you may add that id as a parameter. You can then access the button by its id.

answered Jul 31, 2013 at 19:44

ia.solano

5783 gold badges10 silver badges24 bronze badges

Comments

tester · Accepted Answer · 2013-07-31 19:46:00Z

0

Since we're doing icky-inline JavaScript:

onclick="personchange(...); this.className += ' clicked';"

answered Jul 31, 2013 at 19:46

tester

23.4k27 gold badges90 silver badges129 bronze badges

Collectives™ on Stack Overflow

jQuery and HTML toggle buttons

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related