Accessing HTML Form elements through Javascript

Question

Can any guru show me how to get values from HTML Form element - RADIO BUTTON and CHECK BOX?

For example in case of text box we can get the value directly by getElementById(id).value;

But how to get the value for a combo box (drop down menu), radio button and checkbox ?

Thanks.

Side note: pretty much no one does it this way anymore, and instead most people use frameworks like jQuery, Mootools, etc, so that we can just do $('#yourSelectId').val() or $('#yourSelectId option:selected').val() (jquery examples). — gregmac
– gregmac, Commented Jan 17, 2012 at 5:42
you can do a little googling and you will find 1000s of example. put a little effort. — dku.rajkumar
– dku.rajkumar, Commented Jan 17, 2012 at 5:50

Cᴏʀʏ · Accepted Answer · 2012-01-17 05:38:30Z

2

Drop down (<select>):

var el = document.getElementById('yourSelectId');
var value = el.options[el.selectedIndex].value;

If you're treating your select list as a multi-select (combobox) list, you have to loop through the options and check if they are selected:

var el = document.getElementByid('yourSelectId');
var selectedValues = [];

for (var i = 0; i < el.options.length; i++) {
    if (el.options[i].selected) {
        selectedValues.push(el.options[i].value);
    }
}

// all selected values are now in the selectedValues array.

Radio buttons and checkboxes should also have value properties, but more appropriately I think I would only test whether they are checked:

var isChecked = document.getElementById('yourRadioOrCheckboxId').checked;

edited Jan 17, 2012 at 5:38

answered Jan 17, 2012 at 5:32

Cᴏʀʏ

108k20 gold badges169 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RobG Over a year ago

el.options[el.selectedIndex].value can be simply el.value, unless you need to support really ancient browsers (NN4 and similar).

Blender · Accepted Answer · 2012-01-17 05:33:25Z

1

For checkbox, the element has a .checked property:

document.getElementById('foo').checked; // true or false

answered Jan 17, 2012 at 5:33

Blender

300k55 gold badges462 silver badges511 bronze badges

Collectives™ on Stack Overflow

Accessing HTML Form elements through Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related