I want a function/code which will return the value that the user submitted for the field whose name/id is passed on to it. It shouldn't matter whether the field is a textbox, textarea, radio, or select. For example, the field could be:

<input type='radio' name='a_21' value='test' id='a_21_0' />
<input type='radio' name='a_21' value='test2' id='a_21_1' />

Or

<textarea name="a_21" rows="30" cols="6"></textarea>

When I do the call:

function getVal('a_21');

It should return the selected value.

How can I do this? Will:

document.myForm.field.value

work for textareas, dropdowns and radios, too?

I want a function/code which will return the value that the user submitted for the field whose name/id is passed on to it. It shouldn't matter whether the field is a textbox, textarea, radio, or select. For example, the field could be:

<input type='radio' name='a_21' value='test' id='a_21_0' />
<input type='radio' name='a_21' value='test2' id='a_21_1' />

Or

<textarea name="a_21" rows="30" cols="6"></textarea>

When I do the call:

function getVal('a_21');

It should return the selected value.

How can I do this? Will:

document.myForm.field.value

work for textareas, dropdowns and radios, too?

• javascript
• html
• dhtml

• 4 Std. answer: Use jQuery. – Shog9 Commented Apr 26, 2009 at 20:32
• Jquery works only with ID. With radios i can't use the same id for every option – Ali Commented Apr 26, 2009 at 20:33
• 2 @Click Upvote: actually, you can easily write a jQuery selector that will match on the name attribute, further refine using the :selected pseudoclass, and then pull the value. – Shog9 Commented Apr 26, 2009 at 20:35
• 4 While I concur that jquery will handily solve the problem, I do feel that where the question does not ask for jquery there should be an emphasis on providing an actual javascript solution (which is frankly trivial). "Use jquery" is altogether too ready a mantra on SO. Just my $.02. – annakata Commented Apr 26, 2009 at 20:42
• 2 @annakata: yeah, that's why i posted a ment instead of an answer. The solution to problems like this is so trivial when using jQuery that they will always collect one or more answers with this remendation... Writing a stand-alone function to do this, while easy enough, is tedious (note that Seb's answer has omitted the logic for finding the selected radio button in a group, as well as unifying return values such as would be needed for submitting a form via AJAX). – Shog9 Commented Apr 26, 2009 at 20:46

2 Answers 2

The problem is different widgets have different purposes. For example, a <select> box with multiple selection available, multiple checkboxes, or even single checkboxes (whose value would be just "on" or "off") wouldn't have a single value, so it's ok for them to behave differently from other widgets.

But if you want to have a single function, you could do something like:

function getVal(obj){
  if(obj.value){
    return obj.value;
  }

  if(obj.selectedIndex){
    return obj.options[obj.selectedIndex];
  }

  if(obj.checked){
    return obj.checked;
  }

 return null;
}

Using jQuery you can do:

$('[name="a_21"]').val();

This will give you the value on of the field with name a_21, so matter what the type of field.

Note: The quotes are not needed, but I've gotten in the the practice of adding them because of checkbox arrays:

<input type="checkbox" name="ids[]" value="1" />
<input type="checkbox" name="ids[]" value="2" />

I figure it's better to be safe than trying to figure out why it doesn't work.