javascript – Pass option value from HTML select to url-ThrowExceptions

Exception or error:

I have a Bootstrap modal that allows the user to select a flight they want to complete and is then redirected to a form. I’m not sure however how I can pass or POST the option value (flight_id) that they select to the form so that it appears something like /formpostflight.php?flight_id=23.html and I can use GET to retrieve the id from the URL and use it to correctly insert the form data using SQL. Is it possible to use PHP to achieve this or is JavaScript/jQuery needed? Any help would be greatly appreciated.

Modal:

    <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>
How to solve:

You need to wrap any inputs you would like to be submitted in <form> tags.

The action param is the target page you want the form to send data too.
The method param specifies either the get or post method to be used when sending the data.

You also havent named your select param. Give it a name attribute, so it will be sent with the form.

You have buttons which I guess are meant to submit the form. You will need an id tag on the form and a form tag with the same name on the button:

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

I would use an input instead:

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

As far as, I have understood of what you want. I have done a simple code snippet. You can try and let know me. Here I have just picked up a value from Dropdown and assign it to the anchor tag which is in your case Select name. And now when you see the anchor tag it will have a generated url.

With each change in dropdown the url of your anchor tag will become something like.

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

Leave a Reply

Your email address will not be published. Required fields are marked *