How to include a dependent-dropdown list in a form tag?

How to include a dependent-dropdown list in a form tag?

I have a working dependent-dropdown list that works smoothly when it's not placed inside a form tag. As soon as I enclose it in a form tag, it stops working. How can I include this code in a form tag?

I have a working dependent-dropdown list that works smoothly when it's not placed inside a form tag. As soon as I enclose it in a form tag, it stops working. How can I include this code in a form tag?

I have simply tried running the code without using any form tag. It works perfectly fine. To pass the values to the next page I used the form tag and that's when I was getting a blank response(the drop-down list wasn't loading).

index.php

<?php
require_once("dbcontroller.php");
$query ="SELECT * FROM flat";
$results = mysqli_query($conn,$query); 
?>
<html>
<head>
<title></title>

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> <script> function floor(val) { $.ajax({ type: "POST", url: "get_info.php", data:'floor='+val, success: function(data){ $("#floor").html(data); } }); }

function flatno(val1) { $.ajax({ type: "POST", url: "get_info.php", data:'flatno='+val1, success: function(data){ $("#flatno").html(data); } }); }

</script> </head> <body>

<form method="post" action="a.php"><br>

Select Wing: <select name="wing" onChange="floor(this.value);"> <option value="">---------</option> <?php foreach($results as $row) { ?> <option value="<?php echo $row["wing"]; ?>"><?php echo $row["wing"]; ?>
</option> <?php } ?> </select>

<br><br> Select Floor: <select name="floor" id="floor" onChange="flatno(this.value);"> <option value="">---------</option> </select>

<br><br> Select Flat No: <select name="flatno" id="flatno"> <option value="">---------</option> </select>

<input type="submit">

</form>

</body> </html>

get_info.php

<?php
require_once("dbcontroller.php");

if(!empty($_POST["floor"])) { $query ="SELECT * FROM flat WHERE wing = '".$_POST["floor"]."'"; $results = mysqli_query($conn,$query); ?> <option value="">Select Floor</option> <?php foreach($results as $row) { ?> <option value="<?php echo $row["floor"]; ?>"><?php echo $row["floor"];
?></option> <?php } } ?>

<?php if(!empty($_POST["flatno"])) { $query ="SELECT * FROM flat WHERE floor = '".$_POST["flatno"]."'"; $results = mysqli_query($conn,$query); ?> <option value="">Select Flat no</option> <?php foreach($results as $row) { ?> <option value="<?php echo $row["flatno"]; ?>"><?php echo
$row["flatno"]; ?></option> <?php } } ?>

a.php

<?php

include_once 'dbcontroller.php';

$wing =mysqli_real_escape_string($conn,$_POST['wing']);
$floor =mysqli_real_escape_string($conn,$_POST['floor']);
$flatno=mysqli_real_escape_string($conn,$_POST['flatno']);

echo "<h2>Flat No : " . $flatno . "</h2>"; echo "<h2>Email : " . $floor . "</h2>"; echo "<h2>Email : " . $wing . "</h2>"; ?>

I expected all the 3 dropdown list to be functional, but only the 1st dropdown list loads and the other 2 are blank.

html html5 php javascript ajax forms

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

All You Need To Know About HTML Forms

This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.

How to Upload file using JavaScript and PHP

In this tutorial, I show how you can upload a file using JavaScript AJAX and PHP.

Know Everything About HTML With HTML Experts

HTML Assignment Help Australia @30% OFF from Sample Assignment, with Our Best HTML assignment help experts. Get HTML homework help online at affordable price. 100% Plag free assignment solution.

HTML JavaScript - Add Javascript File to HTML

Learn HTML and javascript, their uses & importance, html javascript function, javascript tags list, why add javascript file to html, HTML Events with JavaScript etc