concatenating select menus into a single form input

Question

I have a text input as follows:

<input class="input-large" form="form" type="text" name="product_data[product]" id="product_description_product" value="{$product_data.product}" />

Unfortunately I want the information entered into this field to be very specific. The best solution I can think for this, is to provide 3 drop down menus with a range of options.

I can edit the HTML and add JavaScript as necessary, but can't edit the form processing script or the database, so the value I need to get back from the 3 select menus needs to be concatenated into a single form field value.

What do you reckon?

I think I almost have it but it isn't working. I would copy the whole form but it is very long and hopefully this bit is the only bit needed

<form>
    <input form="form" type="hidden" name="product_data[product]" id="product_description_product" value="{$product_data.product}" />

    <script type="text/javascript">
        $(all_three_select_tags).change(function(){
    concatenated_string = $(#product_description_product_1).val() + $(#product_description_product_2).val() + $(#product_description_product_3).val();
    $("#product_description_product").val(concatenated_string);
    })
    </script>
    <select id="product_description_product_1">
        <optgroup label="Box size">
            <option value="Extra small">Extra small</option>
            <option value="Small">Small</option>
            <option value="Medium">Medium</option>
            <option value="Large">Large</option>
            <option value="Extra Large">Extra Large</option>
        </optgroup>
    </select>
    <select id="product_description_product_2">
        <optgroup label="Speciality">
            <option value="organic">organic</option>
            <option value="seasonal">seasonal</option>
            <option value="locally grown">locally grown</option>
            <option value="exotic">exotic</option>
            <option value="gourmet">gourmet</option>
        </optgroup>
    </select>
    <select id="product_description_product_3">
        <optgroup label="Type of box">
            <option value="veg box">veg box</option>
            <option value="fruit box">fruit box</option>
            <option value="fruit &amp; veg box">fruit &amp; veg box</option>
        </optgroup>
    </select>
</form>

Answer 1

I'm going to try to update this based on the code you provided. Your script tag contents should be this:

<script type='text/javascript'>
    $("#product_description_product_1, #product_description_product_2, #product_description_product_3").change(function(){
        concatenated_string = $("#product_description_product_1").val() + $("#product_description_product_2").val() + $("#product_description_product_3").val();
        $("#product_description_product").val(concatenated_string);
    })
</script>

Also your hidden field tag should look something like this (I'm assuming the top line, of the second block of code, was intended to be the hidden field):

<input type='hidden' value='' id="product_description_product">

Here is a jsfiddle with this an example as well http://jsfiddle.net/eNNZX/

Please keep in mind the div with id "temp_display" is not required, its only so you can see the value after each change.

This way anytime any of the selects are changed the hidden input is updated with the concatenated version of all 3. Then when you submit the page, just look at the parameter referencing the hidden input for your desired value.

Hope this helps!