jquery после вызова ajax, измените несколько полей ввода

Question

У меня проблема с запросом jquery ajax:

У меня есть одно поле выбора и более одного поля ввода.

После изменения поля выбора ajax.php получает некоторую информацию из базы данных вотдельные файлы. Как я могу отозвать эти значения и установить их в предыдущих полях ввода?

Я знаю, как отозвать все значения и установить их, но не знаю, как установить значения в отдельных полях ввода (data_1, data_2,data_3)

<select name="call_ajax" id="call_ajax">
    <input type="text" value="1">Value 1
    <input type="text" value="2">Value 2
</select>

<input type="text" id="data_1" value="some old data 1">
<input type="text" id="data_2" value="some old data 2">
<input type="text" id="data_3" value="some old data 3">

<script>
    $("#call_ajax").change(function() {
         $.ajax
            ({
              type: "POST",
              url: "ajax.php",
              data: dataString,
              cache: false,
              success: function(html)
              {                 
              $("#what").html(html); // ???????  

              } 
            }); 
    });
</script>  

ajax.php

<?php 
$new_data1 = "new value 1";
$new_data2 = "new value 2";
$new_data3 = "new value 3";
 ?>

Answer 1

В настоящее время ваш PHP-скрипт возвращает пустую страницу - нет ввода для процесса Ajax. Вам необходимо вывести некоторые данные с помощью вашего PHP-скрипта, например, в формате JSON:

<?php 
$new_data1 = "new value 1";
$new_data2 = "new value 2";
$new_data3 = "new value 3";
echo json_encode(array("data_1"=>$new_data1,
                       "data_2"=>$new_data2,
                       "data_3"=>$new_data3));
?>

Это вернет следующее:

{"data_1":"new value 1","data_2":"new value 2","data_3":"new value 3"}

Ваш скрипт может затем использовать эту информацию, как

// sample data:
var dat={"data_1":"new value 1","data_2":"new value 2","data_3":"new value 3"};

$("#call_ajax").change(function() {
  /*  $.getJSON("ajax.php",
                function(dat){  */
              
              // inside the callback do the following with dat:
              
              $("input:text").each(function(){
                 this.value=dat[this.id]; })
                
              
/*    });     */
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="call_ajax" id="call_ajax">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
</select>

<input type="text" id="data_1" value="some old data 1">
<input type="text" id="data_2" value="some old data 2">
<input type="text" id="data_3" value="some old data 3">

Также обратите внимание, что внутри элемента <select> не может быть элементов <input>. Вместо этого используйте <option>.