How to pass form data from 3 select and display it below on screen?

Question

AJAX

There are 3 selects.

<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">

How to send data from them via ajax and then display this data on the same page, just below?
I looked at different examples with select, but they did not work.
I would be grateful for any help)

Answer 1

If there are always 3 selects, then you can go head-on

$('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);        
        }
    );
});