Автозаполнение существующего текстового поля при нажатии выбора

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

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

Мой код формы:

    <form name = "inserform" method = "POST">
      <label>Existing Customer Name : </label>
         <select name = "existCustName" id = "existCustName">
             <option value = "">None</option>
                 <?php
                 $custName = $conn->query("SELECT * FROM customers");
                 while ($row = $custName->fetch_assoc())
                 {
                     ?><option id = "<?php echo $row['customerID']; ?>" value = "<?php echo $row['customerID']; ?>"><?php echo $row['customerName']; ?></option><?php
                 }
                 ?>
         </select>br>

      <label>Current Bottle Balance : </label>
         <input type = "int" id = "currentBal" name = "currentBal"></input><br>

      <input name = "insert" type = "submit" value = "INSERT"></input>
    </form>

Мой код скрипта:

<script type = "text/javascript">
    $(document).on("change", 'select#existCustName', function(e) {
        var existCustID = $(this).children(":selected").attr("id");
        $.ajax({
            type: "POST",
            data: {existCustID: existCustID},
            url: 'existingcustomerlist.php',
            dataType: 'json',
            success: function(json) {
                var $el = $("input#currentBal");
                $el.empty();
                $.each(json, function(k, v) {
                    $el.append("'input[value='" + v.currentBal + "']").val();
                });
            }
        });
    });
</script>

существующий код клиента list.php:

 <?php 
    include 'config/config.php';
    $result = $conn->query("SELECT * FROM customers WHERE customerID = '" .$_POST['existCustID'] . "'");
    $results = [];
    while ($row = $result->fetch_assoc()) {
        $results[] = $row;
    }
    header('Content-Type: application/json');
    echo json_encode($results); 
 ?>

Мне нужна помощь, чтобы решить эту проблему.

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Symfony Station Communiqué - 7 июля 2023 г
Symfony Station Communiqué - 7 июля 2023 г
Это коммюнике первоначально появилось на Symfony Station .
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Установка и настройка Nginx и PHP на Ubuntu-сервере
Установка и настройка Nginx и PHP на Ubuntu-сервере
В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Как установить PHP на Mac
Как установить PHP на Mac
PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...
1
0
259
1

Ответы 1

Я предполагаю, что вы пытаетесь показать результаты как текстовый элемент ввода рядом с элементом #currentBal. Попробуйте изменить тег скрипта внутри успешного обратного вызова, как показано ниже.

$.each(json, function (k, v) {
   $el.after("<input type='text' class = "currentBalTemp" value='" + v.currentBal + "' />");
});

Обязательно удалите элементы .currentBalTemp при изменении события выбора, иначе будет отображаться дублирование. Добавьте приведенный ниже код при изменении события.

$('.currentBalTemp').remove();

Я не совсем уверен, что это правильный синтаксис для хранения значения для ввода текстового поля, потому что я сделал аналогичный этому синтаксису, но до сих пор не нашел решения. Если я не ошибаюсь, возможно, мой код полностью неправильный, начиная со строки «success: function (json) до конца строки скрипта».

Richmond 24.05.2018 07:45

Другие вопросы по теме