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

Question

[Siarhei]

Есть 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, но они не работали.
Буду благодарен любой помощи)

Comments

[ProjectSoft]

Глобально хранить все данные в JS по $article, $article1, $article2.
Подход к реализации может измениться. Я не уверен, что вам можно, да и нужно ли, сводиться к цене во время заказа. Конечно дело каждого, но я бы не стал.
Цена, как понимаю, здесь только для информации клиента нужна, но никак не для выбора конкретного товара.

[Siarhei]

ProjectSoft
Разобрался как передать значение из одного селекта а вот из нескольких пока ни как.

Как его можно допилить чтоб читался как надо?

let servResponse=document.querySelector('#response');
document.forms.ourForm.onsubmit=function (e) {
    e.preventDefault();
    let userInput=document.forms.ourForm.ourForm_inp.value;
    let userInput1=document.forms.ourForm.ourForm_inp1.value;
    let userInput2=document.forms.ourForm.ourForm_inp2.value;
    console.log(userInput)
    let xhr= new XMLHttpRequest();
    xhr.open("POST","mysqli.php");
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange=function (){
        if (xhr.readyState===4 && xhr.status===200){
            servResponse.textContent=xhr.responseText;
        }
    }
    xhr.send('ourForm_inp=' + userInput+userInput1);


};

[ProjectSoft]

bichukov, почему submit формы?
Вам же нужно отобразить данные до отправки формы. Т. е. при выборе товара. Тогда слушать надо селекты и от них уже делать запросы на предоставление информации. Вот в этом направлении стройте логику приложения.
А по сабмиту вы уже перенаправляете на кабинет заказа (оплата, просмотр, etc... )

[Rst0]

через FormData

[Siarhei]

ProjectSoft

Не, нужно отправить чтоб они пришли в другой файл и присвоились какой-нибудь переменной, а я бы эти переменые вытягивал и выводил на форме и страницах где мне нужно.

с 1 селектом получилось но с двумя или тремя никак.

[Siarhei]

Rst0,
Мог бы подсказать как его переделать под FormData?

[Danny Arty]

а почему <input type="submit"> находится вне формы?

[Rst0]

Мог бы подсказать как его переделать под FormData?

..............
   let data = new FormData( document.querySelector('form'));
   data.append( 'discount', 'Не забудь про скидку' ); // <-- 
   let xhr= new XMLHttpRequest();
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange=function (){
        if (xhr.readyState===4 && xhr.status===200){
            servResponse.textContent=xhr.responseText;
        }
    }
  XHR.open( 'POST', 'mysqli.php' );
  XHR.send( data );
...................

if(isset($_POST['discount']) && $_POST['discount'] !=='') {
  $order_price = $price - $discount;
}

[Rst0]

при создании new FormData() из формы там уже будут все поля, но можно добавить как в примере со скидкой

[Siarhei]

Rst0,
Но а суть.
я так и не понимаю как можно передать 3 селекта?)

[Rst0]

ну добавьте к formData как то так

const selects = document.querySelectorAll('form select'); // все селекты
  Object.keys(selects).map( key => {
    data.append( 
          selects[key].name, 
          selects[key].options.[ selects[key].options.selectedIndex ].value);  // значения выбранных option 
     );
});

[ProjectSoft]

bichukov,

let data = new FormData( document.querySelector('form'));

Уже все три в форме. Вы уже их отправляете в

xhr.open( 'POST', 'mysqli.php' );
xhr.send( data );

[Rst0]

Уже все три в форме. Вы уже их отправляете в

не верит человек на слово))))

[Rst0]

bichukov,
select такой же input
его value подставляет браузер сам, вас с толку сбивает, что в нем много option
и как я теперь их передам, но не нужно.
вы получите в $_POST имя селекта и значение, исходя из выбранной опции как и у обычного инпута

[Siarhei]

Rst0, ProjectSoft,

Выглядит так

let servResponse=document.querySelector('#response');
document.forms.ourForm.onsubmit=function (e) {
    e.preventDefault();
    let data = new FormData(document.querySelector("form"))

    console.log(data)

    let xhr= new XMLHttpRequest();
    xhr.open("POST","mysqli.php");
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange=function (){
        if (xhr.readyState===4 && xhr.status===200){
            servResponse.textContent=xhr.responseText;
        }
    }
    xhr.send(data);


};

[ProjectSoft]

bichukov, то, что в предпросмотре у вас чего-то нет зависит только от вас, а ещё точнее - от вашего скрипта, как и что вы там обрабатываете.
Вы посмотрите на отправленные данные - там есть ваши селекты, вернее имя и значение селектов.

[Rst0]

[Siarhei]

Rst0,
Ну форма у меня работает только не получается получить отправленные данные.

[Rst0]

работает только не получается

$_POST проверяйте чего там приходит в mysqli.php (не очень название для обработки заказа)

[Siarhei]

Rst0, ProjectSoft,
Перекопал отправку запроса. Теперь она выглядит так

$(document).ready(function() {
    $('form').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,

            success: function(data) {
                $('#title').html('Ваш заказ <br>'+data+'</p>');

            },
        });

    });
});

На сервере обрабатывается так

<?php
$inp=$_POST['title'];
$inp1=$_POST['title1'];
$inp2=$_POST['title2'];
        echo $inp;?>
<?php echo $inp1;?>
<?php echo $inp2;?>

Осталось решит вопрос, как
success: function(data) {
$('#title').html('Ваш заказ
'+data+'');
разделить на 3 части(т.к. на сервер приходит и обрабатывается 3 значения)

[ProjectSoft]

bichukov, о чём я и говорил

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

По идее вы должны получить сам товар на сервере по запросу и отправить все данные о нём для отображения заказчику.
Под "всеми данными" я имею ввиду Наименование, Количество, Цена за одну, Общая цена, Цена со скидкой, Изображение, Короткое описание, etc... Тут вам решать, что именно отображать.
Не забудьте правильно подготовить запрос к базе учитывая безопасность для обращения к базе данных.

[Rst0]

bichukov,

разделить на 3 части(т.к. на сервер приходит и обрабатывается 3 значения)

можно с сервера массив в JSON

$json = [];  
		if (/условие/) {
			$json['success'] = 'ok';
			$json['title'] = $inp;
			$json['text'] = $inp1;

		} else {
			$json['redirect'] = 'home.php';
		}
               echo json_encode($json);

type: 'post',
				data: data,
			        dataType: 'json',
			        contentType: false,
                                processData: false,
                                cache: false,
			        success: function(json) {
                             if (json['success']) {
								$('#title').html($json['title']);
								$('#text').html($json['text']);
                                          }
                                 }

как это делается в Opencart common.js, к примеру
common.js

[Rst0]

Вообще, есть смысл вам по ссылке код движка просмотреть/поизучать - где ваши вопросы реализованы правильно на практике

Answer 1

[Danny Arty]

Если будет всегда 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);        
        }
    );
});

Comments

[Siarhei]

Danny Arty
nth-child(2)
irst-child это что?)

[Danny Arty]

bichukov, https://developer.mozilla.org/ru/docs/Web/CSS/:nth...

[Siarhei]

Danny Arty,

Этот вариант не работает.
в select1-3 висят данные из первого селекта
а при отправке отправляется вся форма(

[Danny Arty]

bichukov, значит что-то не так делаете, потому что у меня все работает верно

[Siarhei]

Danny Arty,
Перекопал отправку запроса. Теперь она выглядит так

$(document).ready(function() {
    $('form').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,

            success: function(data) {
                $('#title').html('Ваш заказ <br>'+data+'</p>');

            },
        });

    });
});

На сервере обрабатывается так

<?php
$inp=$_POST['title'];
$inp1=$_POST['title1'];
$inp2=$_POST['title2'];
        echo $inp;?>
<?php echo $inp1;?>
<?php echo $inp2;?>

Осталось решит вопрос, как
success: function(data) {
$('#title').html('Ваш заказ
'+data+'');
разделить на 3 части(т.к. на сервер приходит и обрабатывается 3 значения)

[Danny Arty]

bichukov, на сервере можете создать массив и отдавать json:

$inp = array();
$inp['s1']=$_POST['title'];
$inp['s2']=$_POST['title1'];
$inp['s3']=$_POST['title2'];
die(json_encode($inp));

и в js уже

success: function(data) {
 data = JSON.parse(data, true); 
//теперь варианты доступны как data.s1, data.s2, data.s3
//например
$('#title').html('Ваш заказ: '+data.s1+', '+data.s2+', '+data.s3+'');

[Siarhei]

Danny Arty,
Еще такой вопрос

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

он имеет value ="<?=$object['price']?>" и <?=$object['name']?>
и при ajax запросе он отправляет только value. как отправить именно <?=$object['name']?> ?

[Danny Arty]

bichukov, наверное вместо value ="<?=$object['price']?>" указать value ="<?=$object['name']?>"

[Siarhei]

Danny Arty,
А иначе никак?. просто в валуе указывается цена и она считается.

[Danny Arty]

bichukov, ну тогда получать еще и name каждого и отправлять закодированный json select1.find( "option:selected" ).text();
и тд. а как отправлять это решать вам. можно например отправить 3 массива с ключами name и value