Guest Author: Jim Bob Howard
Moderator, Stump the Panel

I had a user request to automatically fill in text to a required field based on the selection of a radio button on the page. The form that is being filled out is used by a hiring manager to document the decision process for a certain recruit. Since each position will only have one person hired, but typically more than one applying, the answer to the question: “Was this person hired?” will be “No” way more than it will be “Yes.” Therefore, a reason for the “No” is required.

In the relatively rare event that the candidate is hired, the reason for not selecting them becomes moot. But rather than trying to manipulate the “requiredness” (a term I coined in my last jQuery article) of the textbox, I wanted to fill in “N/A” for them on the rare and happy occasion they choose “Yes.”

First, I needed to find the specific radio buttons in question. For some reason, the name of the choice column that generates radio buttons does not include the name of the column anywhere in the input of the button itself. Instead, it looks something like this the following.

The first choice looks like:

Yes

The second choice looks like:

No

If you’re familiar with HTML, you’ll quickly notice that the basic structure is an input tag followed by a label tag, both of which are wrapped by a span tag.

Wading through the massive concatenated id, for, and name tags, notice this structure to the two radio buttons:

  
  choice 1
  
  

…then…

  
  choice 2
  
  

The ff# found in the id, name, and for attributes above will be the same as that found in the .aspx page (e.g. NewForm.aspx) if you are working from a custom page. For example:

If you are working from the default list form page and don’t want to customize it, you can learn the ff# for your radio buttons by viewing the source of the page (in IE, open up a NewForm.aspx in the browser; right-click and select “View Source”).

In the source of your page, search for label that precedes your radio buttons. You should then be able to move forward in the document until you find HTML similar to what is shown above (with an input and label tag pair nested together inside a span tag ). Find the ff# inside the id or name attribute of the input field. This is what we’ll use to find the right radio button.

Using jQuery, we can now identify the radio buttons we’re looking forward with the following statement:

$('input[name*=ff2]:radio')

This is saying, “Find the input tag with a type of radio that has a name attribute that contains (*) ff2.”

(Put your ff# in place of the ff2 in the example.) Options for the name search are:

name=ff2 The name has to equal exactly ff2 (name=”ff2″)
name^=ff2 The name must begin with ff2 (name=”ff2_1″ or name=”ff2″)
name$=ff2 The name must end with ff2 (name=”1_ff2″ or name=”ff2″)
name*=ff2 The name must contain ff2 (name=”1_ff2_1″ or any of the previous examples)

Once we’ve found the right radio buttons, we can add an onClick event to each of them so that whenever either is clicked, a function will run to update our text field.

$('input[name*=ff2]:radio').click(function()  {
  // do stuff to update our text field
  })

Since this same function will run no matter which choice is checked, we want to find the one that is checked, then look at the text value of the label that follows it.

So, next I needed to find the text of the label of the radio button that is checked. To do this, we can use the following:

$('input[name*=ff2]:checked +  label').text()

This is saying, “Find the input tag that is checked which has a name attribute that contains (*) ff2. Once you’ve found that, look at the label tag that comes next (+) and get its text (whatever is wrapped in that tag; e.g. the No in No). We’ll assign this to a variable (str) so we can look at it more than once without having to copy and paste all of that:

var str = $('input[name*=ff2]:checked +  label').text();

Now we can look at the value of str and create an if statement that will update our targeted textbox accordingly. So, let’s find the text column.

Fortunately for us, text columns include the column name in the title attribute of the input tag:

$('input[title=MyTextField]:text')

This should be getting familiar; but just to clarify, this is saying: “Find the input tag of type text that has a title attribute of MyTextField.” We want to set the .val of this column.

If our text column is multiple lines of text, we’ll use this instead:

$('textarea[title=MyTextBox]')

So for a single line of text, our if statement looks like this:

  if (str == "Yes") {
  $('input[title=MyTextField]:text').val("N/A");
  } else if (str == "No") {
  $('input[title=MyTextField]:text').val("");
  }

Of course, you’ll want to update MyTextField or MyTextBox with the actual title of your text column. You can find that in your .aspx page or in the source as described above.

Putting it all together for a single line of text field, add a Content Editor Web Part to your page (in SharePoint or in SharePoint Designer 2007) and move it to the bottom of the page. Then paste this code into it (making adjustments where noted) and you’re good to go!

  //Add  ?PageView=Shared&ToolPaneView=2 to your NewForm.aspx URL to add the  webpart
  //Move the CEWP to the bottom of the page
  //Change the FrameType for the CEWP to None  (i.e. None)

jQuery to the rescue again!

 

Guest Author: Jim Bob Howard
Jim Bob Howard is a web designer / web master in the healthcare industry. He has been working with SharePoint only since March 2009 and enjoys sharing what he has learned. You can email him at [email protected].