Get the field value from dispform.aspx in SharePoint via jQuery

September 14th, 2011 | Posted by Marijn in jquery / javascript | sharepoint

I was trying to find a quick way to get the field value from dispform.aspx in SharePoint. Apparently, the internet is filled with .. let us say “less-interesting methods” to get that value..(with a big jquery function or SPServices or inline c#)

Well, standard SharePoint gives you this:

<tr>
                <td nowrap="true" valign="top" width="165px" class="ms-formlabel"><h3 class="ms-standardheader">
<a name="SPBookmark_Field1"></a>Field1</h3></td>
                <td valign="top" class="ms-formbody" width="450px" id="SPFieldText">
                <!-- FieldName=" Field1"
                         FieldInternalName=" Field1"
                         FieldType=" Field1"
                  -->
                        This is the text of Field1

                </td>
       </tr>

A tr line, with 2 td fields. You can get the first field (via the H3 tag), but there is no way to get the second field directly.
So you use the JQuery .next() functionality!

So the code will be:

var sField1 = $('h3:contains("Field1")').closest('td').next('td').text();

What this code does is create a variable, sField1. It searches the h3 tag on your page, gets the enclosing td tag. Then we take the next tag, and the text of that td. Like the French say: “Simple comme bonjour”.

And that is how you get the field value from dispform.aspx in SharePoint via jQuery!

You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.

20 Responses

  • Nilios says:

    This does make sense but didn't work for me so I must be doing something wrong. I used added the script to the CEWP and placed it below the table displaying the information.

    this is what I have:

    Is this not correct? As you can see the Field name is DashboardKey with a calculated text value in it (which is actually the [Created] value.

  • Marijn says:

    Nilioq, I cannot see your comment ( my bad, you need to change the < in a < character.

    Your jquery should be:
    Var sField1 = $('h3:contains("DashboardKey")').closest('td').next('td').text();

    If you add an alert to the code, does that work ?

  • Nilios says:

    Sorry, don't think the script displayed from my last post.

    Var sField1 = $('h3:contains("DashboardKey")').closest('td').next('td').text();
    alert("KeyValue : " + sField1);

    Prior to this I call the jquery script

    http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js

  • Marijn says:

    do you get an alert? what does it say ?

  • Nilios says:

    No alert happens. I even added a document.write with some text and that doesn't appear either, almost like the script is not being read.

    I was also advised to use the get parent().parent() but I have never used that before and your solution makes more sense.

  • Marijn says:

    Then I think something is wrong on where you call the jquery script!

    If the alert doesn't show, something is wrong before. I don't know the whole code you pasted, but it seems to me your jquery script isn't read!

  • Nilios says:

    So I removed calling the jquery script (put it above the table is dispForm) and just have this below the table (in between the script tag):

    Var sField1 = $('h3:contains("DashboardKey")').closest('td').next('td').text();
    alert("Hello");
    alert("KeyValue : " + sField1);

    The "Hello" does not alert either

  • Marijn says:

    Nilios, I think the reference to the jquery file is wrong.

    Try downloading the jquery script from jquery.com and upload it in a document library or something.

    Then add a reference to that specific file instead of to the api at google.
    Something like this:
    <script src="http://yourlocation/jquery.min.js"></script&gt;

    Then see if you can get the alert("Hello") working. That is the basis..if that works, then you can focus on the sharepoint field.

  • Nilios says:

    Thanks Marjin,

    I tried that and it still doesn't seem to work. I will have to troubleshoot more and maybe do some trial and error (put an alert below calling of jquery and that pops up). It seems that nothing between the script tags in the code below the table in dispForm is happening (put an alert above the var sfield line and it doesn't pop up).

    Appreciate the help though.

  • Marijn says:

    that is very strange. You could call the jquery underneath the table.

  • Nilios says:

    I think the issue is for dispForm, no javascript seems to be running when placed below the table. I will have to analyze source.

    Appreciate all your help.

  • Nilios says:

    So I have troubleshooted as much as I could, maybe my SP2007 page is not taking the code you posted because everything seems to work except for that line (commented the line and everything else runs even below the table).

    It is a calculated value that I am trying to get. Would that make a difference?

  • Marijn says:

    look at the source code of the page and locate the field you are trying to get.
    Is that also 2 TD items in a TR ?

  • Nilios says:

    Yes – I have

    tr
    td fieldname1
    td FieldName="DashboardKey" FieldInternalName="DashboardKey"
    FieldType="SPFieldCalculated"
    calculated value
    end tr

  • Nilios says:

    go figure, I changed the capital v in "Var" to "var" and it worked… no idea why that made a difference but it works now!

  • Marijn says:

    d'oh!!!

    let me adapt my code..

  • Uday says:

    Thanks Dude !

    It worked for me !

  • Laura says:

    Thankyou, that is extremely helpful!

  • Use trim():

    var sField1 = $(‘h3:contains(“Field1”)’).closest(‘td’).next(‘td’).text();
    console.log(sField1.trim());



Leave a Reply

%d bloggers like this: