Question

I have a combobox in a form, written in html, like following:

<form name="formname" action="formaction.php" method="get">
    <select name="selectname">
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
    </select>
    <!-- other inputs -->
</form>

Upon submission, an example url would be “formaction.php?selectname=Option1”. I wish for the option value to be passed in the url as “option1”, but I want to avoid having a value attribute for every option, equal to the option’s innerHTML (I’ve considered doing this dynamically via JS as well). Note: I already process values server-side without regard to character case; I want to do this simply for aesthetics.

My goal is to submit all form values in their lowercase representations.

I’ve attempted adding an onsubmit attribute to the form with state = state.toLowerCase(), and similar forms like referring to the value via the document element, retrieved by id.

Is this possible, or must I dynamically set each option’s value attribute to its lowercase form?

Answer 1

There is no native method in javascript that sets all your forms value to lower case.

You can just as easily process those values on your server side and turn them to lowercase. or you can print them as lowercase in your html and use css to show them as first letter uppercase:

<select name="selectname">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
    </select>

select option {
   text-transform:capitalize;
}