根据用户单击的链接更改提示文本

Question

I'm working on a site that has a queue of "to do" items, which users can edit, claim, or mark as finished. I want a simple prompt when the user clicks the link to perform one of those actions that says "are you sure you want to [action] this item?". I know I can write a javascript function for each and use "onclick", but is there a nice way to write one function that fills in the action being done?

HTML:

<table>
  <tr>
    <td id='complete'>
        <a href='submit.php?request=$request_index'><img src='images/completeCheck.gif'/></a>
    </td>
    <td>
        <a href='claim.php?request=$request_index'><img src='images/claimStar.gif'/></a>
    </td>
  </tr>
</table>

Answer 1

Working examples: Vanilla Javascript or jQuery

Add the class areyousure, and the text you want in the question to each anchor as a rel attribute.

<table>
  <tr>
    <td id='complete'>
        <a class='areyousure' href='submit.php?request=$request_index' rel='complete check'><img src='images/completeCheck.gif'/></a>
    </td>
    <td>
        <a class='areyousure' href='claim.php?request=$request_index' rel='claim star'><img src='images/claimStar.gif'/></a>
    </td>
  </tr>
</table>

Then use this javascript to construct the question and if the user presses cancel it will return false, preventing the action.

var areyousures = document.getElementsByClassName('areyousure');
for (i in areyousures) {
    var item = areyousures[i];  
    item.onclick=function(){
       var q='Are you sure you want to ' + this.rel + ' this item?';
       if (!confirm(q)) return false; 
    }
}

If you use jQuery

$('.areyousure').on('click', function(){
    var q='Are you sure you want to ' + this.rel + ' this item?';
    if (!confirm(q)) return false;
})

Why rel ? Because it's valid HTML and you're not already using it. Normally I'd use jQuery always so would assign a data tag instead.

Answer 2

You can use jQuery to validate stop the link processing if the user says no, something like:

$('a').click(function(evt) {
   var res = confirm('Are you sure you want to ' + $(this).text());
    if (!res) {
       evt.preventDefault();
    }
});

I've posted a fiddle http://jsfiddle.net/dtymH/1/