提交下拉框时出现javascript问题？

Question

I have three dropdowns that are populated from 3 different mysql tables from php. It is for an employee tracking system.

The first dropdown has a bunch of fields and one that basically says they are "Out of Office".

I want the Product and the Project dropdown to be disabled and to automatically go to our "N/A" row respectively for each table.

I have the following js:

<script>    
$(function() {
            $("#f_activity_id").change(function() {
                if ($(this).val() == "7") {
                    document.getElementById('f_product_id').value='16', 
                    document.getElementById('f_segment_id').value='7',
                    $("#f_segment_id").prop("disabled", true),
                     $("#f_product_id").prop("disabled", true);

                }
                else
                    $("#f_product_id").prop("disabled", false),
                    $("#f_segment_id").prop("disabled", false);
            });
        });    
</script>

Well it seems like my script is right because it disables the second two dropdowns and it sets them to "N/A" which correlates to id 16 and 7. But on submit the two fields are null which I guess is because I am disabling them? So how do I gray them out and still allow them to submit correctly?

Answer 1

after the change event code add this

$('#yourForm').submit(function () {
        $("#f_product_id").prop("disabled", false),
        $("#f_segment_id").prop("disabled", false);
});