我正在使用以下AJAX函数从API检索数据。需要在populateBlocks函数中使用检索到的数据,以使用车辆数据填充表单中的各种HTML块。我还需要将客户的名字附加到该函数并填充相同的HTML块。 AJAX功能有效。你可以在这里看到我到目前为止所做的事情:http://autolife.granddemo.co.nz/get-quote/。如何在单击“获取引用”按钮之前阻止显示摘要块?
$("#get-rego").click(function(e) {
e.preventDefault();
var regoAjax = document.querySelector(".ajax-loader");
addClass(regoAjax, "active");
var plate = document.getElementById("input_2_6").value;
$.post({
url: "/wp-admin/admin-ajax.php",
data: {
"action": "get_vehicle",
"plate": plate,
},
"dataType": "json",
success: function(obj) {
var response = obj.idh;
console.log(response);
removeClass(regoAjax, "active");
removeClass(vehicleDetails, "gfield_conditionally_hidden");
var vehicleMake = response.vehicle.make;
var vehicleModel = response.vehicle.model;
var vehicleYear = response.vehicle.year_of_manufacture;
var vehicleColour = response.vehicle.main_colour;
var vehicleSubModel = response.vehicle.submodel;
var vehicleBodyStyle = response.vehicle.body_style;
var vehicleWofExpiry = response.vehicle.expiry_date_of_last_successful_wof;
var vehicleRegoExpiry = response.vehicle.date_of_last_registration;
var vehicleDataSummaryOutput = "<div class=\"summary\">" +
"<ul>" +
"<li><span class=\"label\">Make:</span> " + titleCase(vehicleMake) + "</li>" +
"<li><span class=\"label\">Model:</span> " + titleCase(vehicleModel) + "</li>" +
"<li><span class=\"label\">Year:</span> " + vehicleYear + "</li>" +
"<li><span class=\"label\">Colour:</span> " + vehicleColour + "</li>" +
"<li><span class=\"label\">Submodel:</span> " + titleCase(vehicleSubModel) + "</li>" +
"<li><span class=\"label\">Body Style:</span> " + vehicleBodyStyle + "</li>" +
"</ul>" +
"</div>";
document.querySelector(".vehicle-details").innerHTML = vehicleDataSummaryOutput;
populateSummaryBlocks(response.vehicle);
}
});
});
function populateSummaryBlocks(vehicle) {
var vehicleMake = vehicle.make;
var vehicleModel = vehicle.model;
var customerName = document.querySelector("input_2_46_3").value;
document.body.querySelector(".vehicle-make-text").innerHTML = vehicleMake;
document.body.querySelector(".vehicle-model-text").innerHTML = vehicleModel;
}
document.querySelector("#choice_2_121_1").addEventListener("change", populateSummaryBlocks, false);