@bichukov

Как передать данные формы из 3 seleсt и отобразить их ниже на экране?

Есть 3 селекта.
<div class="container">
    <div class="row text-center">
    <H1 class="mb-3">Заказ пиццы</H1>
        <form action="" method="post" name="ourf">
            <div class="form-group">
                <select id="single" class="form-control asd" name="search" >
                    <option value="" disabled selected style='display:none;'>Выберите пиццу</option>
                    <?php foreach($article as $object): ?>
                        <option value ="<?=$object['price']?>"><?=$object['name']?></option>
                    <?php endforeach ?>
                </select>

                <select  class="form asd" id="single1" name="search" >
                    <option value="" disabled selected style='display:none;'>Выберите размер</option>
                    <?php foreach($article1 as $object): ?>
                        <option value ="<?=$object['price']?>"><?=$object['size']?></option>
                    <?php endforeach ?>
                </select>


                <select id="single2" class="form asd" name="search"  >
                    <option value="" disabled selected style='display:none;'>Выберите пиццу</option>

                    <?php foreach($article2 as $object): ?>
                        <option value ="<?=$object['price']?>"><?=$object['name']?></option>
                    <?php endforeach ?>
                </select>
            </div>
        </form>
    </div>
</div>

            <div id="result"></div>
<input type="submit" id="target" value="Отправить" name="search1">


Как отправить данные из них через ajax и потом эти данные отобразить на этой же странице, чуть ниже ?
Смотрел разные примеры с select, но они не работали.
Буду благодарен любой помощи)
  • Вопрос задан
  • 188 просмотров
Решения вопроса 1
DanArst
@DanArst Куратор тега JavaScript
Гриффиндор в моде при любой погоде!
Если будет всегда 3 селекта, то можно пойти в лоб
$('form[name="ourf"]').submit(function(e) { 
    e.preventDefault();
    var 
       form = $(this),
       select1 = form.find('select:first-child').val(),
       select2 = form.find('select:nth-child(2)').val(),
       select3 = form.find('select:last-child').val();
  
    $.post(document.location.href, {action: 'selectsPost', select1: select1, select2: select2, select3: select3}, 
        function(data) {
            //тут обработка ответа
            console.log(data);        
        }
    );
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы