Question

I have the following code, which should adds a field to a form if the user selects ‘Other’ from a dropdown. However, using this code seems to overwrite the value of the dropdown, so that when the form is posted $_POST['enquiry_source'] is empty.

I’ve narrowed it down to this line that is causeing me the problem buy adding the field on any change in the dropdown, not just if ‘Other’ is selected –

$(field_to_append).insertAfter('#form-field-enquiry_source');

I’ve also tried $('#form-field-enquiry_source').after(field_to_append);, but the result was the same.

$(function(){

    /** Looks for changes to the enquiry source dropdown */ 
    $('#form-field-select-enquiry_source').live('change', function(){

        /** Check the enquiry source */
        var enquiry_source = $('select[name="enquiry_source"]').val();      

        /**
         * Adds another field to the enquires form when the user selects 'Other' form the enquiry source dropdown
         */
        if(enquiry_source === 'other'){ // The user has selected other as the enquiry source, so lock the form

            var field_to_append = '<div id="form-field-enquiry_source_other" class="form-field float-left">'+
                '<label>Other<span class="required"></span></label>'+
                '<input name="enquiry_source" id="form-field-input-enquiry_source_other" />'+
                '</div>';

            $(field_to_append).insertAfter('#form-field-enquiry_source');

        } else {

            $('#form-field-enquiry_source_other').remove();

        }

    });

});

Any ideas what is causing this problem?

Answer 1

If you have a select with name = enquiry_source and then you ad an input with the same name only one element is posted to the server, in your case the input field (only the latter element is posted) so you should give the field a different name

        var field_to_append = '<div id="form-field-enquiry_source_other" class="form-field float-left">'+
            '<label>Other<span class="required"></span></label>'+
            '<input name="enquiry_source_other" id="form-field-input-enquiry_source_other" />'+
            '</div>';