PHP $_POST value being lost when using JS .insertAfter() - php

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>';

Answer 2

Are you inserting inside? sounds like you are generating a html code like
<form>something</form><input name=enquiry_source>
Maybe what you want is $('#form-field-enquiry_source').append($(field_to_append));
I don't know what is "#form-field-enquiry_source". Is a form?

Answer 3

I know this may seem a bit off topic (but kind of is not). You could change your approach by having a hidden div with those contents already within it, then your problem comes down to having the drop down show/hide depending on the field.
The nice part about this is upon javascript minification that long strings cannot be minified, you will save a lot more space by doing it this way.
if(enquiry_source === 'other'){ // The user has selected other as the enquiry source, so lock the form
$("#enquiry_source_other").show();
} else {
$("#enquiry_source_other").hide();
}
I feel like this approach is a bit simplier