I have inserted an image (with <a> tag) like "Add to cart" before the title of list item using SP Designer. Now I want to check that which item's link is clicked using java script. How to do that?

My code is:

<script type="text/javascript">                             
function Clicked()                          
     alert("You have clicked link");
     return false;
<a href="#" onclick="return Clicked();" title="Add item to cart"><img alt="Add to cart" src="file:///C:/Users/Kalpesh.Vaghela/Desktop/add-to-cart-web-button-9227672.jpg"></img></a>
<xsl:value-of select="$thisNode/@*[name()=current()/@Name]" disable-output-escaping ="yes"/>
  • Are you sure return Clicked is the optimal use in the onclick event? I advice you to use <a href="javascript:void(0)" onclick="Clicked()"> instead as it makes return redundant/unneeded.
    – user2536
    Sep 17, 2013 at 8:46
  • I corrected my code sir, @DanielZiga
    – users1100
    Sep 17, 2013 at 9:03
  • Is there any way to decide which link is clicked?
    – users1100
    Sep 17, 2013 at 9:07

1 Answer 1


Change your function Clicked() to have a parameter.

function Clicked(elem) { 
    alert(elem.length); // This is just to alert something

Then in your click event on the <a> tag, add the argument this in Clicked()

<a href="javascript:void(0)" onclick="Clicked(this);" title="Add item to card">...</a>

The Clicked function should now alert the length of the clicked <a> tag.

Since the <a> tag is located within XSL and you want to know which item is being clicked, you can create an XSL variable

<xsl:variable name="ItemName" select="$thisNode/@*[name()=current()/@Name]" />

You can now use this XLS variables value in your javascript as follows

<script type="text/javascript">
function Clicked(value) { 
<xsl:variable name="ItemName" select="$thisNode/@*[name()=current()/@Name]" />
<a href="javascript:void(0)" onclick="Clicked({$ItemName});" title="Add item to card">...</a>
<xsl:value-of select="$thisNode/@*[name()=current()/@Name]" disable-output-escaping ="yes"/>

Change the XML path in the select property out with the one you want and that will be alerted by your javascript.

This is just a proof of concept. You'll have to make the rest of the logic yourself.

  • Output comes as "undefined"
    – users1100
    Sep 17, 2013 at 9:32
  • @users1100 Try just alerting elem or alert elem === "undefined" <- if this returns false it means you have a valid object and can continue from there.
    – user2536
    Sep 17, 2013 at 9:36
  • Plz have a look at this I want the name of item when user clicks on the green button left side of name. @DanielZiga
    – users1100
    Sep 17, 2013 at 9:48
  • Provide some suggestion or reference.
    – users1100
    Sep 17, 2013 at 9:50
  • @users1100 Check my update.
    – user2536
    Sep 17, 2013 at 10:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.