I have a select box in html and Ajax which calls a php page that returns the values of the selected option.
The problem is that when I want to send data to another php page the selection that I got from the ajax call does not get sent.
Index code:
<!DOCTYPE html>
<html>
<head>
<title>Booking - Online Belt</title>
</head>
<body>
<center><h3>Book Your Private Transfer</h3>
<form action="./elabora.php" method="POST" id="formregservizio">
<p>DATA
<input type="date" name="data"/>
HOURS <select name="ore">
<option value="00" selected>00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="vuoto"></option>
</select>
Minuti:<select name="minuti">
<option value="00" selected>00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
Passeggeri:<select name="pax">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
Large Bag<select name="large_bag">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
Small Bag<select name="small_bag">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select></p>
<!-- SEZIONE FROM -->
<p>FROM <select name="FROM" id="from">
<option value="vuoto">Select...</option>
<?php
include('./includedb.php');
$result = $conn->query("SELECT DISTINCT areak FROM weblocalita ORDER BY ordinamento ASC");
while($row = mysqli_fetch_array($result)) {
echo '<option value="'.$row['areak'].'">'.$row['areak'].'</option>';
}
?>
</select>
<!-- SEZIONE sub_FROM -->
<select name ="subfrom" id="subfrom">
<option value="vuoto">Select...</option>
</select>
</p>
<!-- SEZIONE TO -->
<p>FROM
<select name="to" id="to">
<option value="vuoto">Select...</option>
<?php
include('./includedb.php');
$result = $conn->query("SELECT DISTINCT areak FROM weblocalita ORDER BY ordinamento ASC");
while($row = mysqli_fetch_array($result)) {
echo '<option value="'.$row['areak'].'">'.$row['areak'].'</option>';
}
?>
</select>
<!-- SEZIONE sub_TO -->
<select name="subto" id="subto">
<option value="vuoto">Select...</option>
</select>
</p>
<input type="submit" name="submit" value="NEXT">
</form>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('#from').on('change',function(){
var scelta = $(this).val();
if(scelta){
$.ajax({
type:'POST',
url:'./update_status.php',
data:'scelta='+scelta,
success:function(html){
$('#subfrom').html(html);
}
});
}else{
$('#subfrom').html("<option>Errore</option>");
}
});
});
$(document).ready(function(){
$('#to').on('change',function(){
var sceltadestinazione = $(this).val();
var sceltadopo = $('#subfrom').val();
if(sceltadestinazione){
$.ajax({
type:'POST',
url:'./update_status.php',
data:'sceltadestinazione='+sceltadestinazione,
success:function(html){
$('#subTO').html(html);
}
});
}else{
$('#subto').html("<option>Errore</option>");
}
});
});
</script>
</center>
</body>
</html>
Then the PHP page that is called by the Ajax Request:
update_status.php
<?php
include('./includedb.php');
$area = $_POST['scelta'];
if($area == 'vuoto') {
echo '<option value="'."vuoto".'">'."Select...".'</option>';
}
$result = $conn->query("SELECT DISTINCT klocalita FROM weblocalita WHERE areak = '$area'");
while($row = mysqli_fetch_array($result)){
echo '<option value="'.$row['klocalita'].'">'.$row['klocalita'].'</option>';
}
$areadestinazione = $_POST['sceltadestinazione'];
$sceltadopo = $_POST['sceltadopo'];
if($areadestinazione == 'vuoto') {
echo '<option value="'."vuoto".'">'."Select...".'</option>';
}
$result = $conn->query("SELECT DISTINCT klocalita FROM weblocalita WHERE areak = '$areadestinazione'");
while($row = mysqli_fetch_array($result)){
echo '<option value="'.$row['klocalita'].'">'.$row['klocalita'].'</option>';
}
?>
And now from Index.php I want to send the data to another page in php called Elabora.php that should display all data sent.
Elabora.php
<center>
<h3>Configure Service</h3>
Dati Inseriti:<br>
Date: <?php echo $_POST['data']; ?>
Hours: <?php echo $_POST['ore']; ?>
Minutes: <?php echo $_POST['minuti']; ?>
Px: <?php echo $_POST['pax']; ?>
Large Bags: <?php echo $_POST['large_bag']; ?>
Small Bags: <?php echo $_POST['small_bag']; ?><br>
From: <?php echo $_POST['from'] . $_POST['subfrom'];?><br>
To: <?php echo $_POST['to'] . $_POST['subto'];?><br>
</center>
Now the problem is that the select boxes with the IDs: From and To are not sent to the elabora.php page.
