Author: Jim Bob Howard

This question came in my email from Fernando:

I used the code from your article, Extending the DVWP – Part 22: Creating Title Based on Other Fields in jQuery.

I’m having a problem when using fields that are not "Text", for example in fields combo box or radio button the variable returns "undefined".

When I use fields "text" the script works fine.

My code:

<script language="javascript" type="text/javascript">
  $(document).ready(function() {
      $("input[title=Título]").parent().parent().parent().hide();
  });

  function PreSaveAction() {
      var txtDept = $("input[title=Colaborador]").val();
      var txtGroup = $("input[title=Equipe]").val();
      $("input[title=Título]").val(txtDept + ' - ' + txtGroup);
      return true;
  };
</script>

The result when I use other combo box fields is undefined – undefined

Can you help me?

Good question.

There’s Something Strange Going On with the Select Control

In Internet Explorer, with a dropdown that contains more than 20 items, Microsoft has decided to fake the select control with an input box and an iFrame. (Anyone know why?) I covered this to a limited extent in Extending the DVWP – Part 31: Filling in Default Data on the Insert Template.

What that means is that a dropdown won’t look the way it "should" when you’re try manipulate it with jQuery. So, before you begin this task, you need to check to see if the dropdown you want to use has more than 20 items, and whether the user creating the item is using IE.

The Way Things Ought To Be

Let’s first assume that you’re working with a non-IE browser, OR that your list will always contain less than 20 items. In a perfect world, this is how it would always work.

A standard dropdown control on a form will look similar to this in the HTML:

<select name="{long name}" id="{really long ID}" title="Colaborador">
        <option value="12">Arturo</option>
        <option value="13">Alonzo</option>
        <option value="17">Diego</option>
        <option value="14">Esteban</option>
        <option value="15">Fernando</option>
        <option value="16">Hidalgo</option>
        <option value="18">Jaime</option>
        <option value="23">Javier</option>
        <option value="25">Manuel</option>
        <option value="19">Martin</option>
        <option value="20">Paulo</option>
        <option value="24">Pedro</option>
        <option value="21">Rafael</option>
        <option value="22">Raul</option>
</select>

Notice the control that is named after the column in our list is a select tag in the HTML, but the selected value is inside an option tag.

Armed with that knowledge, the jQuery way to get to the text of this control is pretty straightforward:

     $("select[title='Colaborador'] > option:selected").text();

Alternately, we could get the value of the selected option with:

     $("select[title='Colaborador'] > option:selected").val();

In the case above, it would simply be a case of changing the two variable declarations:

      var txtDept = $("select[title=Colaborador] > option:selected").text();
      var txtGroup = $("select[title=Equipe] > option:selected").text();

Meanwhile, Back in IE with More than 20 Items…

While the implementation seems strange, the solution is headache-free if you know there will always be more than 20 items. In fact, it looks very much like a text box (because it is).

Fernando’s code would work as written.

But, what if you’re not sure how many items will be in the control, nor which browser your users will use to access your list?

Since most browsers draw this control as a select, we’ll assume that first.

      var txtDept = $("select[title=Colaborador] > option:selected").text();
      var txtGroup = $("select[title=Equipe] > option:selected").text();

But, then we’ll check to see if we’ve really got something. If not, then we’re in IE and we have more than 20 items, so we’ll fall back to looking for the input.

      if (txtDept is undefined) txtDept = $("input[title=Colaborador]").val();
      if (txtGroup is undefined) txtGroup = $("input[title=Equipe]").val();

We can then continue with assigning a value to the Title (or Título, in Fernando’s case) control.

      $("input[title=Título]").val(txtDept + ' - ' + txtGroup);

Solution in Action

In Fernando’s case, he was working with less than 20 items, so he didn’t have to do the check for undefined.

Your solution worked! It was less than 20 items in the combo box and I put the code the way you wrote.

The current code:

  function PreSaveAction() {
      var txtDept = $("select[title='Colaborador'] > option:selected").text();
      var txtGroup = $("select[title='Equipe'] > option:selected").text();
      $("input[title=Título]").val(txtDept + ' - ' + txtGroup);
      return true;
  };

Thank you!

Love it when it works the first time!

Author: Jim Bob Howard

Jim Bob Howard is a web designer / webmaster in the healthcare industry. He has been working with SharePoint since March 2009 and enjoys sharing what he has learned. He is a moderator and frequent contributor to Stump the Panel, and answers SharePoint questions on Twitter (@jbhoward) and via email ([email protected]).