Автозаполнение <select>из MySQL и автоматическое заполнение полей <input> - PullRequest
Новая
       5

Автозаполнение <select>из MySQL и автоматическое заполнение полей <input>

1 голос
/ 14 июля 2020

Я получаю список элементов из MySQL БД и заполняю поле <select> в форме. Когда значение параметра выбрано, массив будет автоматически помещен в поля <input> рядом с ним. Все это отлично работает для первого, но проблема в том, что вторая, третья, четвертая записи и т. Д. Не заполняются автоматически.

Я не знаю jQuery и полагался на примеры, которые я нашел на этом веб-сайте, чтобы построить это. 

<?php
include('../includes/main.php');
include_once('../includes/config.php');

//// Get data from database

$sql = "SELECT item, description, price from pricelist ";
$result = mysqli_query($con, $sql);
$dataSource = array();

while($row = mysqli_fetch_assoc($result))
{
     $dataSource[] = $row;
}

    $dataSourceInJson = json_encode($dataSource);

?>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $( document ).ready(function() {
            var dataSource = '<?php echo $dataSourceInJson; ?>';

            $( "#items").click(function() {
                var itemSelected = $(this).val();

                $.each(JSON.parse(dataSource), function( index, value ) {
                    var itemType = value.item;

                    if(itemSelected == itemType){
                        // Extract related Craft values from JSON object
                        var description = value.description;
                        var price = value.price;

                        // Place craft value in respective INPUT box
                        $('#description').val(description);
                        $('#price').val(price);
                    }

                });
            });
        });
    </script>
</head>
<body>
    <!-- First entry -->
    <p><select id='items' name="items[]">
        <option value="">Select a Service</option>
        <?php
            foreach ($dataSource as $key => $value)
            {
                echo "<option value='$value[item]'>$value[item]</option>";
            }
        ?>
    </select></p>

    <p>Description:     <input type="text" id="description" name="description[]" value=""></p>
    <p>Price: <input type="text" id="price" name="price[]" value=""></p>
    
    
    <!-- Second entry -->
    <p><select id='items' name="items[]">
        <option value="">Select a Service</option>
        <?php
            foreach ($dataSource as $key => $value)
            {
                echo "<option value='$value[item]'>$value[item]</option>";
            }
        ?>
    </select></p>
    <p>Description:     <input type="text" id="description" name="description[]" value=""></p>
    <p>Price: <input type="text" id="price" name="price[]" value=""></p>   
    
    
    <!-- Third entry -->
    <p><select id='items' name="items[]">
        <option value="">Select a Service</option>
        <?php
            foreach ($dataSource as $key => $value)
            {
                echo "<option value='$value[item]'>$value[item]</option>";
            }
        ?>
    </select></p>
    <p>Description:     <input type="text" id="description" name="description[]" value=""></p>
    <p>Price: <input type="text" id="price" name="price[]" value=""></p>      
    
    
</body>
</html>

1 Ответ

1 голос
/ 14 июля 2020

Вы используете один и тот же id для всех своих input ящиков. id - уникальное свойство, вы должны использовать разные id для каждого из ваших входов. Добавьте общий класс в раскрывающиеся списки и измените обработчик событий на класс выбранных элементов. Затем измените настройки ввода описания и цены, используя jquery функции .closest и .next и .find, например:

Измените каждый из выбранных вами так: 

<p><select class='nameItems' name="items[]">

Измените каждый из ваших входов следующим образом: 

<p>Description:<input type="text" class="description" name="description[]" value=""></p>
<p>Price: <input type="text" class="price" name="price[]" value=""></p>

Затем в вашем скрипте измените на это: 

$( ".nameItems").click(function() {
            const itemSelected = $(this).val();
            const $selectedElement = $(this); //Store a reference to the select element

            $.each(JSON.parse(dataSource), function( index, value ) {
                var itemType = value.item;

                if(itemSelected == itemType){
                    // Extract related Craft values from JSON object
                    var description = value.description;
                    var price = value.price;

                    // Place craft value in respective INPUT box
                    $selectedElement.closest('p').next('p').find('input').val(description);
                    $selectedElement.closest('p').next('p').next('p').find('input').val(price);
                }

            });
        });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...