How to get the value of an Hyperlink field using Javascript or JQuery?

Hello,

How to get the value of an Hyperlink field using Javascript or JQuery in the DispForm.aspx ?

Thank you.
pgirardierAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Steve KrileConnect With a Mentor Commented:
Certainly.  You can even do the above from the interface using a Custom Web Part.

However, using Designer is perfectly fine.  Just open the DisplayForm.aspx page and add the following things.

I found a Content area with some script in it already, and added the following:

<asp:Content ContentPlaceHolderId="PlaceHolderTitleAreaClass" runat="server">
<script id="onetidPageTitleAreaFrameScript">
      document.getElementById("onetidPageTitleAreaFrame").className="ms-areaseparator";
</script>


<!--I ADDED THIS-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
      $(document).ready(function(){
            alert('hello')
      });
      
</script>
<!-------------------->

</asp:Content>


Now, your DispForm.aspx page has jquery on it, and when it loads you should see the Hello popup.  Once you have the bit worked out, your page is jquery good to go!

Next thing you will need to do is sniff out the name of the image on the page.  Once you know what "object" is holding the image url (and it will usually have an ID or Name attribute that jquery can look for), you will need to select that object (in the (document).ready() function of jquery) and get the href attribute.

Once you have that attribute, you can assign it to anything else on the page.



0
 
Steve KrileCommented:
The following tag is a hyperlink:

<a href="somepage.html" id="tag1">Hi there</a>


Using jquery, you can get all the information about this hyperlink like this:

var href = $("#tag1").attr("href");
var atext = $("#tag1").text();


I've attached a working example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>


</head>


<body>
	<a href="somepage.html" id="tag1">Hi There</a>


</body>

<script>
	$(document).ready(function(){
		var href = $("#tag1").attr("href");
		var atext = $("#tag1").text();

		alert(atext);
	});
</script>

</html>

Open in new window

0
 
Steve KrileCommented:
The big question I have is:  Why do you want the "value" of a hyperlink from the DisplayForm.aspx page?  I suspect you are looking for an ID, no?
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
pgirardierAuthor Commented:
Hi skrile,

Thank you for your quick reply.
First, can the above solution be applied in a Sharepoint web site while editing its pages using Sharepoint Designer?

Second, in my form I have an hyperlink field which represents the URL of the picture of a person. On loading the DispForm page, I wan to get that URL in order to show the picture in a customized zone.

Thanks.
0
 
pgirardierAuthor Commented:
Hi skrile,

I tested succeffully the above piece of code. And, please can you illustrate how to sniff out the image on the page if we assume that the image is shown in a row. Here is a the part of code relative to the picture and the objective is to get the value of "@Picture":
...

      
            


                  Picture
            

     
      
            
      

...

Thanks,
0
 
Steve KrileCommented:
Best thing for that would be some sort of developer add-on for your browser that allows you to click on elements on a web page and shows you the code behind the object.  FireBug for FireFox works great.  IE8 has developer tools baked right in - just hit F12 for a bunch of nice features.  Either way, you are going to be viewing the markup that Sharepoint throws out there (which is VERY heavy).  If you can do that and want to post the information "around" the image, I can give you some advice about how best to "find" the item you are looking for.
0
 
pgirardierAuthor Commented:
Of course Skrile, and I will be very thankfull if you give me advices about how to find the item that I'm looking for.

Thanks,
0
 
pgirardierAuthor Commented:
Thank you.
0
All Courses

From novice to tech pro — start learning today.