Quick and Easy: Use jQuery to Set A Text Field’s Value on a SharePoint Form

I started playing around with jQuery yesterday.  I’ve been wanting to do this for a long time, ever since Paul Grenier started writing his series about jQuery for End Users at the venerable www.endusersharepoint.com web site.  As I use it, I hope to add a series of “Quick and Easy” posts like this one.  This post describes how to set a known text field’s value to anything you want.

In this scenario, I have created a custom list whose “new” form looks as shown:

image

This is the new form for a custom list with the default Title column and two list columns (not site columns; I don’t think it should make any difference).

The objective is to assign an arbitrary value to the field, “DefaultMeFieldNoSpaces” (you can tell I’m a bit of a coward with the “no spaces” thing going on, but I do spice it up at the end of this article).

This bit of jQuery worked for me:

<script type="text/javascript">

  $(function() {

    $('input[title=DefaultMeFieldNoSpaces]').attr(
        {value: 'You are in a twisty maze of passages, all alike.'});

  });

</script>

 

As I understand it this bit of jQuery is saying, “find me any input tag whose title = DefaultMeFieldNoSpaces.  Then, set all of their values to a famous phrase from an old computer game.”

Since there will only be one field on the form with a title equal to “DefaultMeFieldNoSpaces” we are assured of assigning a value to that field and no other.

What about a field whose name has spaces in it?  It’s nearly the same:

<script type="text/javascript">

  $(function() {
     $('input[title=Assign Field With Space]').attr(
        {value: 'You are in a twisty maze of passages, all alike.'});

  });

</script>

 

I think this is a fairly safe approach, meaning that we should be able to find the field that we want and only the field we want.  If you look at the HTML SharePoint is giving us, it’s sort of messy:

<input
name="ctl00$m$g_bdb23c2c_fde7_495f_8676_69714a308d8e$ctl00$ctl04$ctl02$ctl00$ctl00$ctl04$ctl00$ctl00$TextField"
type="text"
maxlength="255"
id="ctl00_m_g_bdb23c2c_fde7_495f_8676_69714a308d8e_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00_TextField"
title="DefaultMeFieldNoSpaces"
class="ms-long"
/>

“title” stands out as a recognizable and hopefully unique attribute to help us identify the specific column to which we want to assign our arbitrary value.

This is a foundational concept.  Setting a field in an arbitrary way like this isn’t going to win any awards.  However, if we want to do more interesting form level stuff (which all of us always want to do, of course, right after we finish washing the dishes), like change the value of “field b” automatically based on the value of “field a”, we (I) need to learn these things.

I think our best chance to get a real useful value here is via the title, at least for text fields.  There may be a better, more reliable approach.  If I find it, I’ll update this post.  If you know a better way, please leave a comment.</end>

</end>

Subscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin

5 thoughts on “Quick and Easy: Use jQuery to Set A Text Field’s Value on a SharePoint Form

  1. Paul Galvin

    Oskar, I don’t have an approach as yet because I have only just started using it to play around. As I begin to use it in a production environment I will definitely write about my experience.

    Thanks for the link to spjqueryfield.

    Reply
  2. Oskar Austegard

    Paul, what’s your approach for injecting the javascript into the edit page? Doing so in a deployable, simple manner is the tricky bit, as far as I’m concerned. You really shouldn’t have to create a custom form each time… I think this, http://spjqueryfield.codeplex.com/ , is a good start. Deploy it once, then reuse as needed…

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *