<div class="container">
<div class="row text-center">
<H1 class="mb-3">Заказ пиццы</H1>
<form method="post" name="ourf">
<div class="form-group">
<select id="single" class="form-control asd" name="search" >
<option value="888" style='display:none;' disabled selected>Выберите пиццу</option>
<option value ="111">111</option>
<option value ="1111">1111</option><option value ="11111">11111</option><option value ="111111">111111</option>
</select>
<select class="form asd" id="single1" name="search" >
<option value="" style='display:none;' disabled selected >Выберите размер</option>
<option value ="222">222</option>
<option value ="2222">2222</option>
<option value ="22222">22222</option>
<option value ="222222">222222</option>
</select>
<select id="single2" class="form asd" name="search" >
<option value="" style='display:none;' disabled selected>Выберите пиццу</option>
<option value ="333">333</option>
<option value ="3333">3333</option>
<option value ="33333">33333</option>
<option value ="333333">333333</option>
</select>
</div>
<br/>
<input type="hidden" name="order" id="order" value=""/>
<br/>
<b>Ваш заказ: </b><div id="result"></div><br/>
<input type="submit" id="target" value="Отправить" name="search1">
</form>
</div>
</div>
<div id="response"></div>
span{
margin:3px;
}
#result{
border-bottom: 1px #333 dashed;
max-width: 300px;
}
const result = document.querySelector('#result');
const form = document.querySelector('form');
const order = document.querySelector('#order');
form.addEventListener('submit',function(event){
event.preventDefault();
result.innerHTML ='';
let servResponse=document.querySelector('#response');
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);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.