How do i create different Jquery function for each buttons?

Question

I have a form which have five buttons and several checkboxes holding different values.

<form action="" method="post" id="create-user">
    <button type="button" name="new-user">New</button>
    <button type="button" name="activate-user">Activate</button>
    <button type="button" name="block-user">Block</button>
    <button type="button" name="unblock-user">Unblock</button>
    <button type="button" name="delete-user">Delete</button>
    <input type="checkbox" value="1>" name="userId[]" />
    <input type="checkbox" value="2>" name="userId[]" />
    <input type="checkbox" value="3>" name="userId[]" />
    <input type="checkbox" value="4>" name="userId[]" />
    <input type="checkbox" value="5>" name="userId[]" />
</form>

now based on JavaScript event like onclick, i would like to perform different action for different buttons, for example.

a) <button type="button" name="new-user">New</button>

When User click this button it should redirect to following url.'index.php?users&option=create'.

b) <button type="button" name="activate-user">Activate</button>

this button is used for Ajax, it should fetch the selected checkbox value in an array i.e userId[], and send the data to manage-users.php and update form after receiving the response. and the rest three buttons Block, Unblock and Delete follows the same procedure as this.

And all this should be done using JQuery, as i am still a novice in JS/JQuery, i would appreicate if someone could guide me with creating JQuery function.

thanks.

Treffynnon · Accepted Answer · 2011-07-27 13:04:23Z

1

Easiest way is to add an id attribute to your buttons so you can easily target them with jQuery.

For example:

<form action="" method="post" id="create-user">
    <button type="button" name="new-user" id="new-user">New</button>
    <button type="button" name="activate-user" id="activate-user">Activate</button>
    <button type="button" name="block-user" id="block-user">Block</button>
    <button type="button" name="unblock-user" id="unblock-user">Unblock</button>
    <button type="button" name="delete-user" id="delete-user">Delete</button>
    <input type="checkbox" value="1>" name="userId[]" />
    <input type="checkbox" value="2>" name="userId[]" />
    <input type="checkbox" value="3>" name="userId[]" />
    <input type="checkbox" value="4>" name="userId[]" />
    <input type="checkbox" value="5>" name="userId[]" />
</form>

Then use jQuery to attach handlers for the click event on the buttons like so:

<script type="text/javascript">
    $().ready(function(){
        $('#new-user').click(function() {
            // do your code here
        });
        $('#activate-user').click(function() {
            // do your code here
        });
        $('#block-user').click(function() {
            // do your code here
        });
        $('#unblock-user').click(function() {
            // do your code here
        });
        $('#delete-user').click(function() {
            // do your code here
        });
    });
</script>

That is not to say that you have to use ids to target the buttons you could use something like the following with your current HTML code:

<script type="text/javascript">
    $().ready(function(){
        $('button[name="new-user"]').click(function() {
            // do your code here
        });
        $('button[name="activate-user"]').click(function() {
            // do your code here
        });
        $('button[name="block-user"]').click(function() {
            // do your code here
        });
        $('button[name="unblock-user"]').click(function() {
            // do your code here
        });
        $('button[name="delete-user"]').click(function() {
            // do your code here
        });
    });
</script>

ids are considered better practice though and are faster for the browser to locate in the DOM than search by attribute like in my last example.

edited Jul 27, 2011 at 13:04

answered Jul 27, 2011 at 12:57

Treffynnon

21.6k6 gold badges68 silver badges99 bronze badges

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

2 Comments

Ibrahim Azhar Armar Over a year ago

this looks so nice, however can't is use $("button[name='new-user']").click(function() instead of the id attribute?

Treffynnon Over a year ago

@IbrahimAzharArmar yes you can, but as I mentioned in my answer above ids are considered better practice though and are faster for the browser to locate in the DOM.

Nicola Peluchetti · Accepted Answer · 2011-07-27 12:59:57Z

1

You could use event.target and respond accordingly to the button clicked:

$('button').click(function(event){
   var name= event.target.name;
   if (name == 'delete-user'){
     //delete the user
   }else if (name == 'new-user'){
     // and so on

});

answered Jul 27, 2011 at 12:59

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

1 Comment

Treffynnon Over a year ago

I don't like this approach. What if there are buttons on the screen that are not be handled by this function (it gets triggered for every button regardless)? Even if it doesn't do anything your still stealing the users processor cycles.

Aleksi Yrttiaho · Accepted Answer · 2011-07-27 13:05:17Z

The basic idea is to create a selector for each button and attaching an event handler for each matched element. Example

$("button[name='new-user']").click(function() {
   window.location = "index.php?users&option=create";
});

What happens here is that

$("button[name='new-user']") finds each button element with the name new-user
.click(param) attaches an event handler to each element found in step one. The event handler is called when an onclick event is fired
As the param for click we create new function that is executed as the event handler
window.location instructs the browser to change the current URL.

It is probably faster to execute if you use an id attribute to identify each button. Then the jQuery selector $("#new-button") would be able to use document.getElementById to find the button in question.

I suggest you dive into the jQuery documentation as it is exceptionally good and provides code examples on all functions. After you have tried to do something it's time to ask what you have done wrong here.

Also, depending on your target audience, it is usually a good idea to provide graceful degradation in case javascript is not supported (screen readers, mobile devices, etc). If the navigation is entirely done using javascript there's a certain set of users that cannot use the service at all.

leora · Accepted Answer · 2011-07-27 12:56:11Z

0

you would need to put an attribute (like id) on each button and then read that id $(this).attr("id") to figure out which button was pushed during the event callback:

answered Jul 27, 2011 at 12:56

leora

198k370 gold badges911 silver badges1.4k bronze badges

Collectives™ on Stack Overflow

How do i create different Jquery function for each buttons?

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related