Same html form performing different actions

Question

i am in a scenario where i have these data rows .

<a id="login" href="#"><img src="images/edit_ico.png" alt="Edit" title="Edit"  border="0" id="<?php echo $key['sub_Id'];?>" /></a> &nbsp;&nbsp;
            <a id="login" href="#"><img src="images/del_ico.png" alt="Delete" title="Delete" border="0" id="<?php echo $key['sub_Id'];?>" /></a> &nbsp;&nbsp;
            <a id="login" href="#"><img src="images/suspend_ico.png" alt="Suspend" title="Suspend" border="0" id="<?php echo $key['sub_Id'];?>" /></a>
            </td>

that is records of different subscribers and against them the edit, suspend and delete image. on click i open the jquery dialog where the admin enter the user name and password for each action. i've to get the subscriber id against each action on that form and perform that specific action. here is my form

<div id="box" align="center">
</div>
<form name="loginform" id="confirm_action" method="post" action="process_form.php?action=<?php echo"1"; ?>" onsubmit="return validateForm()">User Name:
    <input type="text" name="username" id="username" placeholder="User Name..."/>
    <br/>Password:
    <input type="password" name="password" id="password" maxlength="20" placeholder="Password..." />
    <input type="submit" name="Submit" />
    <button type="button" id="cancel"> Cancel</button>

and the jquery to load this form

$('a#login').click(function(){
$("#box").fadeIn('slow');
$('form').fadeIn('slow');
})

when the form loaded how do i perform different opertion by geting the id in image id field.

Answer 1

Create a hidden input on your form:

<input type="hidden" name="sub_id" id="sub_id" value="" />

It won't be shown to the user, but sent to your server-side script on form submission. Update it's value with JavaScript & jQuery when showing the form:

$('a#login').click(function(){
    $("#box").fadeIn('slow');
    $('form').fadeIn('slow');
    $('#sub_id').val($(this).attr('id'));
});

You could add another hidden field for storing the action to perform.

Note, that I strongly recommend using another attribute than "id" on your image tag, because the id has to be unique . Rather, use the data attributes introduced in HTML 5 as suggested by Chatura Dilan in his answer. This would result in an image tag like:

<img src="images/edit_ico.png" alt="Edit" title="Edit" border="0" data-subscriber="<?php echo $key['sub_Id'];?>" />

You then can retrieve the id in JavaScript by $(this).data('id') instead of $(this).attr('id') .

Answer 2

First of all do not use same id for different links use a same CSS class name instead. You can use JQuery data to get data inside image or link

refer to this http://api.jquery.com/data/

Eg:

<a class="login" data-id="<?php echo $key['sub_Id'];?>" data-action="edit" href="#"><img src="images/edit_ico.png" alt="Edit" title="Edit"  border="0" /></a>

<a class="login" data-id="<?php echo $key['sub_Id'];?>" data-action="delete" href="#"><img src="images/delete_ico.png" alt="Delete" title="Delete"  border="0" /></a>