传递AJAX检索的数据以填充HTML单击功能

时间:2017-12-02 21:46:05

标签: javascript jquery html ajax

我正在使用以下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);

0 个答案:

没有答案