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.

Answer 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.