将选项值从 HTML 选择传递到 url

Question

我有一个 Bootstrap 模式，它允许用户选择他们想要完成的航班，然后重定向到一个表单。 但是，我不确定如何将他们选择的选项值 ( flight_id ) 传递或flight_id到表单中，使其看起来像/formpostflight.php?flight_id=23.html并且我可以使用GET从中检索 id URL 并使用它使用 SQL 正确插入表单数据。 是否可以使用 PHP 来实现这一点，或者是否需要 JavaScript/jQuery？ 任何帮助将不胜感激。

模态：

    <div id="SelectPreFlight" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">Select Tech Log</h4> </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <h5>Please select a pre-flight log to complete:</h5>
                                <div class="row">
<form method="get" action="/formpostflight.html" 
                                    <select class="form-control">
                                    <?php 
                                    include 'config.php'; 
                                    $conn=new mysqli($servername, $username, $password, $dbname); 
                                    if ($conn->connect_error) { 
                                    die("Connection failed: " . $conn->connect_error); 
                                    } 
                                    $sql = "SELECT flight_id, flight_date, duration, pilot_initial_pre, flight_nature FROM tbl_flights;"; 
                                    $result = mysqli_query($conn, $sql) or die("Error " . mysqli_error($conn)); ?>
                                        <?php while($row = mysqli_fetch_array($result)) { ?>
                                            <option value = <?php echo $row['flight_id']?> > <?php echo date("d/m/Y", strtotime($row['flight_date'])) . ", " . $row['pilot_initial_pre'] . ", " . $row['flight_nature'] . ", " . date("H:i:s", strtotime($row['auth_duration'])); ?></option>
                                        <?php } ?>
                                        </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
                    <a class="btn btn-info" type="submit" href="/formpostflight.html?flight_id=">Select</a>
                </div>
</form>
            </div>
        </div>
    </div>

Answer 1

您需要将要提交的任何输入包装在<form>标签中。

action参数是您希望表单也发送数据的目标页面。 method参数指定发送数据时要使用的get或post方法。

您还没有命名您的select参数。 给它一个 name 属性，这样它就会和表单一起发送。

你有按钮，我猜是用来提交表单的。 您将需要表单上的id标签和按钮上的同名form标签：

<form action='/page-to-direct-to/' method='get' id='form1'>
     <button type="submit" form="form1" value="Submit">Submit</button> 
</form>

我会改用输入：

<form action='/page-to-direct-to/' method='get'>

    <!-- other inputs -->

       <select class="form-control" name='flight_id'>
           <?php // php code ?>
       </select>

    <input type='submit' value='Submit' name='Submit' />
</form>

Answer 2

至于你想要什么，我已经了解了。 我做了一个简单的代码片段。 你可以试着让我知道。 在这里，我刚刚从Dropdown选取了一个值并将其分配给锚标记，在您的情况下为Select name。 现在，当您看到锚标记时，它将生成一个 url。

随着下拉菜单的每次更改，您的锚标记的 url 将变得类似。

/formpostflight.html?flight_id=1
/formpostflight.html?flight_id=2 //and so on...

 const change_url = () => { var id = $('#record option:selected').val(); var submit = $("#submit_url"); if (id != '') submit.attr('href', "/formpostflight.html?flight_id=" + id); else submit.attr('href', "#"); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="record" onchange="change_url()"> <option value="">Choose</option> <option value="1">First</option> <option value="2">Second</option> <option value="3">Third</option> <option value="4">Fourth</option> </select> <a href="#" id='submit_url'>Select</a>