Question

I was hoping someone could shed some light on a very odd behavior I’ve encountered. I have a simple select box (single value drop-down) that has a default selected value set on page load. The odd behavior is that if the user changes the value of the select box, it appears both values (the default value and the new selected value) are being sent on postback?!

<select name="selectBox">
    <option value="1" selected>Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

So, if a user selects item 2, on post I’m receiving a value like, "1,2". Obviously, I’d expect just to receive a value of "2". If I debug in firebug, when I select an option, the value being displayed in firebug is the single, selected value as expected. It seems so simple, am I blind? I am using MVC as the framework, if that makes any difference. Your help is greatly appreciated.

Answer 1

Add a name attribute to your select element.

The name attribute is used to reference form data after it’s
submitted, and to reference the data using JavaScript on the client
side. Unlike the id attribute, which must be given a unique value each
time it’s applied to a new form control, a name attribute with a given
value may be applied to numerous form controls (although in practice
this approach is only ever seen in use with radio input buttons).
Note that only form elements which have a name attribute will have their values passed through to the page or script specified in the
form’s action attribute.