Как использовать AJAX для заполнения ввода с опцией выбора с данными из базы данных?

Question

Вопрос, который я получил в моем тесте, звучит так:

У вас есть 1 выбор с 2 вариантами (элемент № 1 и номер № 2) и 2 поля ввода (цена, вес). Как бы вы изменили поля ввода без записи в них?

Итак, после долгого времени поиска и проб (без особой удачи) я понял, что для этого мне нужно использовать ajax. поэтому я попробовал кучу, и это код, который я пытался редактировать, чтобы он работал. getAllproduct - это выборка, которая выбирает все данные из моей таблицы с продуктами. это id, name, item_number, price, weight. в любом случае вот мой код

<?php
    $sth = $db->prepare("SELECT `price`,`weight` FROM product");
    $sth->execute();
    $row = $sth->fetch(PDO::FETCH_ASSOC);
    $row = array();
    json_encode($row);
?>

product.php

<div class="form-group col-2">
    <label for="product">Item number</label>
    <?=@$error['product']?>
    <select class="form-control" name="product" id="product" onChange="getproduct(this.value)">
        <?php foreach ($csv->getAllproduct() as $csv) { ?>
        <option value="<?= @$csv->id ?>" selected><?= @$csv->product?></option>
        <?php } ?>
    </select>
</div>

<div class="form-group col-2">
    <label for="weight">weight</label>
    <?=@$error['weight']?>
    <input type="text" name="weight" id="weight" class="form-control">
</div>
<div class="form-group col-2">
    <label for="price">price</label>
    <?=@$error['price']?>
    <input type="text" name="price" id="price" class="form-control">
</div>

<div class="input-group">
    <button type="submit" style="margin-left:15px; margin-bottom: 15px; z-index: 5" class="btn btn-success" value="Opret" name="btn_opret_maal">Submit</button>
</div>

<script>
function getproduct(val){
$.ajax({
    type:"POST",
    url:"pages\call.php",
    data: 'product='+val,
    success: function(response){
        var result = JSON.parse(response);
        if (result.response == true) {
            var data = result.rows;
            $("#weight").val(data[0].weight);
            $("#price").val(data[0].price);
        }else if (result.response == false) {
            $('#product').append('<option>No products were found!</option>');
        }
    }
});
}
</script>

То, что я ожидаю, что смогу сделать, это выбрать номер элемента, и он автоматически заполнит поля ввода цены и веса данными в базе данных из номера элемента.

Я не изучил много Ajax / JS, поэтому любая помощь приветствуется.

Попытка : для другого проекта, использующего этот код. еще не получил его на работу.

<form class="row" method="POST" >
<div style="border-color:#dddddd;" class="dropdown-divider col-12"></div>

<script>$('#Varenummer').on('change', function() {
    var selectedOption = $(this).find('option:selected');
    $('#Tolminus').val(selectedOption[0].dataset.Tolminus);
    $('#Tolplus').val(selectedOption[0].dataset.Tolplus);
    });
</script>

<div class="form-group col-2">
    <label for="Varenummer">Varenummer</label>
    <?= @$error['Varenummer'] ?>
    <select class="form-control" name="Varenummer" id="Varenummer">
<?php
foreach ($csv->getAllVarenummer() as $csv) {?>
        <option value="<?= @$csv->id ?>" data-Tolminus="<?= @$csv->Tolminus ?>" 
data-Tolplus="<?= @$csv->Tolplus ?>"><?= @$csv->Varenummer ?></option>
<?php }?>
    </select>
</div>

<div class="form-group col-2">
    <label for="Tolminus">Tol -</label>
    <?= @$error['Tolminus'] ?>
   <input type="text" name="Tolminus" id="Tolminus" class="form-control" value="">
</div>
<div class="form-group col-2">
    <label for="Tolplus">Tol +</label>
    <?= @$error['Tolplus'] ?>
   <input type="text" name="Tolplus" id="Tolplus" class="form-control" value="">
</div>

<div class="input-group">
    <button type="submit" style="margin-left:15px; margin-bottom: 15px; z-index: 5" class="btn btn-success" value="Opret" name="btn_opret_maal">Submit</button>
</div>

В нижний колонтитул добавлены jquery-скрипты и другие.

Answer 1

Как вы спросили выше в комментариях: i need it to the input to change when i select an option. can i still only use php? ...

Да.

Возможно, вам вообще не понадобится ajax.Для вашей задачи я бы рекомендовал предварительно загружать значения веса и цены в data- атрибуты соответствующих option элементов.Затем, при изменении выбора, просто получите эти значения и вставьте их во входные данные.

$('#product').on('change', function() {
  var selectedOption = $(this).find('option:selected');
  
  $('#weight').val(selectedOption[0].dataset.weight);
  $('#price').val(selectedOption[0].dataset.price);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-2">
    <label for="product">Item number</label>
    <select class="form-control" name="product" id="product">
        <option disabled selected>Choose product...</option>
        <option value="1" data-weight="100" data-price="1000">Product 1</option>
        <option value="2" data-weight="50" data-price="200">Product 2</option>
        <option value="3" data-weight="25" data-price="115">Product 3</option>
    </select>
</div>

<div class="form-group col-2">
    <label for="weight">weight</label>
    <input type="text" name="weight" id="weight" class="form-control">
</div>
<div class="form-group col-2">
    <label for="price">price</label>
    <input type="text" name="price" id="price" class="form-control">
</div>

<div class="input-group">
    <button type="submit" style="margin-left:15px; margin-bottom: 15px; z-index: 5" class="btn btn-success" value="Opret" name="btn_opret_maal">Submit</button>
</div>

Для сгенерированного PHP выбора (при условии, что метод getAllproduct возвращает свойства weight и price):

...
<div class="form-group col-2">
    <label for="product">Item number</label>
    <?=@$error['product']?>
    <select class="form-control" name="product" id="product">
        <?php foreach ($csv->getAllproduct() as $csv) { ?>
        <option value="<?= @$csv->id ?>" data-weight="<?= @$csv->weight ?>" data-price="<?= @$csv->price ?>"><?= @$csv->product?></option>
        <?php } ?>
    </select>
</div>
...