Как получить данные и автоматически заполнить форму на событие изменения, используя Ajax

Question

Что мне нужно

Мне нужно, когда кто-то меняет мой календарь, сценарий php должен запускаться в фоновом режиме, извлекать некоторые данные и отображать их в полях формы соответственно. Для этого у меня есть следующий HTML код и Ajax скрипт

$("#normalShiftDate").change(function() {
  var FD = new FormData($('#dailyEditor')[0]);
  $.ajax({
    type: "POST",
    url: "supervisorEditAjax.php",
    processData: false,
    contentType: false,
    data: FD,
    success: function(result) {
      $('#normalShiftOperator').val(result["normalShiftOa"]);
      $("#normalShiftOperatorDuration").val(result["normalShiftOperatorDuration"]);
      $("#normalShiftPinCount").val(result["normalShiftPinCount"]);
    },
    error: function() {
      alert('Some error occurred!');
    }
  });
});

<div class="form-group">
  <div class="row">
    <div class="col-sm text-center" id="normalShiftOaDiv" class="">
      <label for="currentOa">Current OA?</label><br>
      <input type="radio" name="currentOa" id="normalShiftOa" value="normalShiftOa">
    </div>
    <div class="col-sm" id="normalShiftOperatorNameDiv">
      <label for="normalShiftOperator">Normal Shift</label>
      <select class="form-control" id="normalShiftOperator" name="normalShiftOperator">
        <option></option>
        <option>A</option>
        <option>B</option>
      </select>
    </div>
    <div class="col-sm" id="normalShiftOperatorDurationDiv">
      <label for="normalShiftOperatorDuration">Duration</label>
      <select class="form-control" id="normalShiftOperatorDuration" name="normalShiftOperatorDuration">
        <option></option>
        <option>1</option>
        <option>2</option>
      </select>
    </div>
    <div class="col-sm">
      <label for="normalShiftPinCount">Pin Count</label>
      <input type="number" class="form-control" id="normalShiftPinCount" name="normalShiftPinCount" value="23">
    </div>
    <div class="col-sm">
      <label for="normalShiftDate">Date</label>
      <input type="date" class="form-control" id="normalShiftDate" name="normalShiftDate">
    </div>
    <div class="col-sm">
      <button type="submit" class="btn btn-primary" style="margin-top: 30px;" id="normalShiftUpdate" name="normalShiftUpdate">Update</button>
    </div>
  </div>
</div>

Я хочу показать php переменных $normalShiftOa, $normalShiftOperatorDuration и $normalShiftPinCount в полях формы с идентификатором normalShiftOperator, normalShiftOperatorDuration, normalShiftPinCount соответственно, когда кто-то меняет календарь. Пожалуйста, ознакомьтесь с содержанием supervisorEditAjax.php. Как я могу показать эти три переменные в три id поля?

Я знаю, как показать только одно поле. Но если в нескольких полях отображается несколько значений, как мы можем это сделать?

Может кто-нибудь помочь?

Редактировать 1

Содержимое supervisorEditAjax.php

<?php
$normalShiftOa = "A";
$normalShiftOperatorDuration = "2";
$normalShiftPinCount = "100";
$arr = array('normalShiftOa' => $normalShiftOa, 'normalShiftOperatorDuration' => $normalShiftOperatorDuration, 'normalShiftPinCount' => $normalShiftPinCount);
echo json_encode($arr);?>

Я пытался использовать какой-то метод Json. Но это не работает

Answer 1

После многих проб и ошибок я могу показать это в соответствующих полях формы. Проблема была в Ajax части. В основном мне нужно проанализировать объект Json, чтобы получить указанные значения c. Замените код AJAX, как показано ниже, и он отлично работает

< script >
  $("#normalShiftDate").change(function() {
    var FD = new FormData($('#dailyEditor')[0]);
    $.ajax({
      type: "POST",
      url: "supervisorEditAjax.php",
      processData: false,
      contentType: false,
      data: FD,
      success: function(result) {
        var returnedData = JSON.parse(result); //This is the change done to the code
        $('#normalShiftOperator').val(returnedData["normalShiftOa"]);
        $("#normalShiftOperatorDuration").val(returnedData["normalShiftOperatorDuration"]);
        $("#normalShiftPinCount").val(returnedData["normalShiftPinCount"]);
      },
      error: function() {
        alert('Some error occurred!');
      }
    });
  }); 
</script>

Подробнее о JSON .parse здесь