Populating many fields in a form using jQuery/AJAX

Question

I have the following code which sets input values using jQuery/AJAX. Can the repetition of the code be shortened in anyway? It's mainly the AJAX requests I'd like shortened. It doesn't seem right to be making so many AJAX requests but despite my research I can't seem to find a way to improve things.

// set property defaults
var list_select_id = 'tenancy_property';
var initial_target = 'Please Select a Property First';
var initial_target_html_property = '<option value="">Please Select a Property First</option>';

//$('#tenancy_fixed_term').val(initial_target);
$('#tenancy_furnished').html(initial_target_html_property);
$('#tenancy_rent_amount').val(initial_target);
$('#tenancy_letting_service').html(initial_target_html_property);
$('#tenancy_tenant_find_fee_type').html(initial_target_html_property);
$('#tenancy_management_fee_type').html(initial_target_html_property);
$('#tenancy_gas').html(initial_target_html_property);
$('#tenancy_electricity').html(initial_target_html_property);
$('#tenancy_water').html(initial_target_html_property);
$('#tenancy_oil').html(initial_target_html_property);
$('#tenancy_telephone').html(initial_target_html_property);
$('#tenancy_broadband').html(initial_target_html_property);
$('#tenancy_tv_licence').html(initial_target_html_property);
$('#tenancy_sat_cable_tv').html(initial_target_html_property);
$('#tenancy_council_tax').html(initial_target_html_property);
$('#tenancy_service_charge').html(initial_target_html_property);
$('#tenancy_ground_rent').html(initial_target_html_property);
$('#tenancy_pets').html(initial_target_html_property);
$('#tenancy_smoking').html(initial_target_html_property);
$('#tenancy_deposit_amount').val(initial_target);
$('#tenancy_tenant_find_fee').val(initial_target);
$('#tenancy_management_fee').val(initial_target);

$('#'+list_select_id).change(function(e) {

var selectvalue = $(this).val();

//$('#tenancy_fixed_term').val('Loading...');
$('#tenancy_furnished').html('<option value="">Loading...</option>');
$('#tenancy_rent_amount').val('Loading...');
$('#tenancy_letting_service').html('<option value="">Loading...</option>');
$('#tenancy_tenant_find_fee_type').html('<option value="">Loading...</option>');
$('#tenancy_management_fee_type').html('<option value="">Loading...</option>');
$('#tenancy_gas').html('<option value="">Loading...</option>');
$('#tenancy_electricity').html('<option value="">Loading...</option>');
$('#tenancy_water').html('<option value="">Loading...</option>');
$('#tenancy_oil').html('<option value="">Loading...</option>');
$('#tenancy_telephone').html('<option value="">Loading...</option>');
$('#tenancy_broadband').html('<option value="">Loading...</option>');
$('#tenancy_tv_licence').html('<option value="">Loading...</option>');
$('#tenancy_sat_cable_tv').html('<option value="">Loading...</option>');
$('#tenancy_council_tax').html('<option value="">Loading...</option>');
$('#tenancy_service_charge').html('<option value="">Loading...</option>');
$('#tenancy_ground_rent').html('<option value="">Loading...</option>');
$('#tenancy_pets').html('<option value="">Loading...</option>');
$('#tenancy_smoking').html('<option value="">Loading...</option>');
$('#tenancy_deposit_amount').val('Loading...');
$('#tenancy_tenant_find_fee').val('Loading...');
$('#tenancy_management_fee').val('Loading...');

if (selectvalue == "" || !selectvalue || selectvalue.length === 0) {

//$('#tenancy_fixed_term').val(initial_target);
$('#tenancy_furnished').html(initial_target_html_property);
$('#tenancy_rent_amount').val(initial_target);
$('#tenancy_letting_service').html(initial_target_html_property);
$('#tenancy_tenant_find_fee_type').html(initial_target_html_property);
$('#tenancy_management_fee_type').html(initial_target_html_property);
$('#tenancy_gas').html(initial_target_html_property);
$('#tenancy_electricity').html(initial_target_html_property);
$('#tenancy_water').html(initial_target_html_property);
$('#tenancy_oil').html(initial_target_html_property);
$('#tenancy_telephone').html(initial_target_html_property);
$('#tenancy_broadband').html(initial_target_html_property);
$('#tenancy_tv_licence').html(initial_target_html_property);
$('#tenancy_sat_cable_tv').html(initial_target_html_property);
$('#tenancy_council_tax').html(initial_target_html_property);
$('#tenancy_service_charge').html(initial_target_html_property);
$('#tenancy_ground_rent').html(initial_target_html_property);
$('#tenancy_pets').html(initial_target_html_property);
$('#tenancy_smoking').html(initial_target_html_property);
$('#tenancy_deposit_amount').val(initial_target);
$('#tenancy_tenant_find_fee').val(initial_target);
$('#tenancy_management_fee').val(initial_target);

} else {    

//Make AJAX request, using the selected value as the GET      
//$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_fixed_term',
//success: function(output) {
//$('#tenancy_fixed_term').val(output);
//},            
//error: function (xhr, ajaxOptions, thrownError) {
//alert(xhr.status + " "+ thrownError);
//}});

//Make AJAX request, using the selected value as the GET
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_furnished',
success: function(output) {
$('#tenancy_furnished').html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET      
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_rent_amount',
success: function(output) {
$('#tenancy_rent_amount').val(output);
},          
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_letting_service',
success: function(output) {
$('#tenancy_letting_service').html(output);
$('#tenancy_letting_service').change();
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_tenant_find_fee_type',
success: function(output) {
$('#tenancy_tenant_find_fee_type').html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_management_fee_type',
success: function(output) {
$('#tenancy_management_fee_type').html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_gas',
success: function(output) {
$('#tenancy_gas').html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_electricity',
success: function(output) {
$('#tenancy_electricity').html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_water',
success: function(output) {
$('#tenancy_water').html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_oil',
success: function(output) {
$('#tenancy_oil').html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_telephone',
success: function(output) {
$('#tenancy_telephone').html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_broadband',
success: function(output) {
$('#tenancy_broadband').html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_tv_licence',
success: function(output) {
$('#tenancy_tv_licence').html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_sat_cable_tv',
success: function(output) {
$('#tenancy_sat_cable_tv').html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_council_tax',
success: function(output) {
$('#tenancy_council_tax').html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_service_charge',
success: function(output) {
$('#tenancy_service_charge').html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_ground_rent',
success: function(output) {
$('#tenancy_ground_rent').html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_pets',
success: function(output) {
$('#tenancy_pets').html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_smoking',
success: function(output) {
$('#tenancy_smoking').html(output);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET      
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_deposit_amount',
success: function(output) {

if (output!='0.00') {
$('#tenancy_deposit_amount').val(output);
$("#tenancy_deposit_required").val('1');

$('tr[id=tenancy_deposit_amount_tr], tr[id=tenancy_deposit_protection_responsible_tr], tr[id=tenancy_deposit_protection_scheme_tr]').css({
            'display': 'table-row'
            });
    $('fieldset[id=deposit_contributors_all]').css({
            'display': 'block'
            });

}
},          
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET      
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_tenant_find_fee',
success: function(output) {
$('#tenancy_tenant_find_fee').val(output);
},          
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

//Make AJAX request, using the selected value as the GET      
$.ajax({url: '../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=tenancy_management_fee',
success: function(output) {
$('#tenancy_management_fee').val(output);
},          
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " "+ thrownError);
}});

}

});

Answer 1

For starters, you can make compound selectors so this:

$('#tenancy_furnished').html(initial_target_html_property);
$('#tenancy_rent_amount').val(initial_target);
$('#tenancy_letting_service').html(initial_target_html_property);
$('#tenancy_tenant_find_fee_type').html(initial_target_html_property);
$('#tenancy_management_fee_type').html(initial_target_html_property);
$('#tenancy_gas').html(initial_target_html_property);
$('#tenancy_electricity').html(initial_target_html_property);
$('#tenancy_water').html(initial_target_html_property);
$('#tenancy_oil').html(initial_target_html_property);
$('#tenancy_telephone').html(initial_target_html_property);
$('#tenancy_broadband').html(initial_target_html_property);
$('#tenancy_tv_licence').html(initial_target_html_property);
$('#tenancy_sat_cable_tv').html(initial_target_html_property);
$('#tenancy_council_tax').html(initial_target_html_property);
$('#tenancy_service_charge').html(initial_target_html_property);
$('#tenancy_ground_rent').html(initial_target_html_property);
$('#tenancy_pets').html(initial_target_html_property);
$('#tenancy_smoking').html(initial_target_html_property);
$('#tenancy_deposit_amount').val(initial_target);
$('#tenancy_tenant_find_fee').val(initial_target);
$('#tenancy_management_fee').val(initial_target);

Can be changed to this:

$('#tenancy_furnished, #tenancy_letting_service, #tenancy_tenant_find_fee_type, #tenancy_gas, #tenancy_gas, #tenancy_oil, #tenancy_telephone, #tenancy_broadband, #tenancy_tv_licence, #tenancy_cable_tv, #tenancy_council_tax, #tenancy_service_charge, #tenancy_ground_rent, #tenancy_pets').html(initial_target_html_property);
$('#tenancy_rent_amount, #tenancy_deposit_amount, #tenancy_tenant_find_fee, #tenancy_management_fee').val(initial_target);

And, the whole thing could be reduced a lot more by just putting a common class on all elements that you want to perform the same operation on. So, take all the elements that you want to set initial_target_html_property on and give them a common class name such as target_property and then you can replace most of the first code block above with this:

$(".target_property").html(initial_target_html_property);

Then, since all your ajax calls are pretty much doing the same thing, you can either factor the common code into a function you can call and pass a few arguments to or you can make the whole thing table drive, so you loop through a table processing items from the table rather than copying the same code over and over.

For example:

var ajaxItems = ["tenancy_furnished", "tenancy_rent_amount", "tenancy_letting_service", ...];

ajaxItems.forEach(function(item) {
    $.ajax('../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=' + item).then(function(result) {
        $(item).html(result);
    }, function(err) {
        // handle error here
    });
});

Or, if all your ajax items keep their useful ID like you have above, but have a common class name, you can do this:

$(".tenancy_ajax").each(function(index, element) {
    $.ajax('../ajax/tenancy_defaults.php?property_id='+selectvalue+'&request=' + element.id).then(function(result) {
        $(element).html(result);
    }, function(err) {
        // handle error here
    });
});

The idea here is that you make the items that you want to process self describing by giving them a common class and either an id or a data attribute that describes the query to use. When you add items to the HTML, you don't even have to modify the jQuery as long as the items you add to the HTML follow your recipe.