Use "Rel" to add function to anchor?

[hybrid kill3r]

I have a page that displays database results. For each of these results, I have a link that I want to use to delete a certain result. All I want to do is add a function that let's me use "rel='delete' in my anchor tags instead of adding a confirm window function to every single delete link. Here's the code I have:

function confirmAction(){				if(confirm('Are you sure you want to do this?  This action CANNOT be undone!!!')){					window.location = this.href;				} else {					return false;				}			}

For example:

<a href='delete.php' rel='delete'>Delete</a>

Instead of using the following:

<a href='delete.php' onclick='confirmAction();'>Delete</a>

[justsomeguy]

I suppose you could loop through all anchor elements looking for ones with the right attribute and attaching handlers to each one. You'll want to do some testing to make sure the scope is correct for the handler though, to make sure that this points to the correct object.

[jeffman]

You can add any attribute you want to an element tag, but if it is not a part of the standard (1) the page will not validate, and (2) you can only access the attribute in JavaScript using the element's getAttribute method. Normal dot notation won't work. Maybe none of that's a big deal. Your choice.The better practice is to give an element a standard attribute like an id or a className and use JavaScript to bind the event handler to element(s) with that attribute. If you have multiple elements this needs to be applied to, use the looping strategy JSG mentions. Since it's the kind of code you'll use over and over again, make the technique robust enough to support all kinds of attributes and make it a library function. (Hint. Since an element can support multiple classNames, use a matching operator (like a regex) instead of an equality operator, if you want to use the technique with classNames.)FWIW, jQuery has a method for exactly this kind of thing. I'm not trying to sell you on jQuery; just pointing out that it's such a standard practice, jQuery decided to built it into its core. You might wanna do the same.

[chokk]

Here is what you are looking for.. Just something that I wrote quickly.. (updated and tested - works!)

<script type="text/javascript">window.onload = function(){		//	Get number of anchor tags in the document..	var aNumber = document.getElementsByTagName('a').length;		//	Start a loop to run through all anchor tags..	for(i=0; i<aNumber; i++)	{		//	Add an event listener to all anchor tags..		document.getElementsByTagName('a').item(i).addEventListener('click', function()		{			//	Prevent default action..			stopAction(event);			//	When an anchor tag is clicked then call the deleteFunction..			deleteFunction(this);		});	}	}function stopAction(e){	//	Prevent default action..	e.preventDefault();}function deleteFunction(element){	//	If an anchor tag has a rel attribute..	if(element.hasAttribute('rel'))	{		//	And if the rel attribute is exactly equal to 'delete'..		if(element.getAttribute('rel') === 'delete')		{			//	If the confirm box returns true..			if(confirm('Are you sure you want to do this? This action CANNOT be undone!!!'))			{				//	Go to the element's href..				window.location = element.href;			}			//	If the confirm box returns false..			else			{				//	Return false (nothing happens)..				return false;			}		}	}}</script>

[hybrid kill3r]

Thank you for your help, chokk, but when I use the above code, I get an error in web console and nothing works. It says this in error console:

Error: uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://localhost/lensereflex/main.php/gallery/Scott/1 :: <TOP_LEVEL> :: line 37" data: no]

[chokk]

Oh I forgot about cross browser compatibility. It works in Google Chrome. I'll get around to make it cross browser

[chokk]

This revised code was a ###### for me to write, but here is the cross browser solution. Let me know how it works out for you:

<script type="text/javascript">window.onload = function(){		var aNumber = document.getElementsByTagName('a').length;		for(i=0; i<aNumber; i++)	{				document.getElementsByTagName('a').item(i).onclick = function(e)		{			stopAction(e);			deleteFunction(this);		}	}}function stopAction(e){	if(!e)	{		if(window.event)		{			e = window.event; 		}		else		{			return;		}	}	if(e.preventDefault)	{		e.preventDefault();	}	if(window.event)	{		e.returnValue = false;	}}function deleteFunction(element){	if(element.hasAttribute('rel'))	{		if(element.getAttribute('rel') === 'delete')		{			if(confirm('Are you sure you want to do this? This action CANNOT be undone!!!'))			{				window.location = element.href;			}			else			{				return false;			}		}	}}</script>

*Tested in IE, Opera, Chrome, Firefox and Safari.