从选择框中获取数据

时间:2018-03-07 14:01:17

标签: javascript php html ajax

我在html和Ajax中有一个选择框,它调用一个返回所选选项值的php页面。

问题在于,当我想将数据发送到另一个php页面时,我从ajax调用中获得的选择不会被发送。

索引代码:

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

然后是Ajax请求调用的PHP页面:

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>';
        }


?>

现在从Index.php我想将数据发送到另一个名为Elabora.php的页面,该页面应该显示所有已发送的数据。

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>

现在问题是带有ID:From和To的选择框不会发送到elabora.php页面。

1 个答案:

答案 0 :(得分:-1)

如果你想通过POST获得它,你的选择需要一个名字属性。

<select id="subTO">
<option value="vuoto">Select...</option>
</select>

应该是:

<select id="subTO" name="subTo">
<option value="vuoto">Select...</option>
</select>

我也注意到了:

<select name=TO id=to>

你错过了&#34;&#34;这里。