Menu
I have a fully working piece of PHP, HTML code but when I place it into my website that is styled using jQuery Mobile the submit button will not display the query. Does anybody know how to fix this or even why it is happening
SCRIPT
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The School of Computing and Mathematics</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="themes/project1.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
PHP
<body>
<div data-role="page">
<?php
// Create connection
$con=mysqli_connect('localhost', '', '', 'timetabledb');
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$course_dropdown ="";
$query_course = "SELECT * FROM course";
$result_course = mysqli_query($con,$query_course) or die(mysqli_error());
while($row = mysqli_fetch_assoc($result_course))
{
$course_dropdown .= "<option value='{$row['CourseName']}'>{$row['CourseName']}</option>";
}
$module_dropdown ="";
$query_module = "SELECT * FROM module";
$result_module = mysqli_query($con,$query_module) or die(mysqli_error());
while($row = mysqli_fetch_assoc($result_module))
{
$module_dropdown .= "<option value='{$row['ModuleName']}'>{$row['ModuleName']}</option>";
}
$day_dropdown ="";
$query_day = "SELECT * FROM days ";
$result_day = mysqli_query($con,$query_day) or die(mysqli_error());
while($row = mysqli_fetch_assoc($result_day))
{
$day_dropdown .= "<option value='{$row['Day']}'>{$row['Day']}</option>";
}
echo "<table border='1'>
<tr>
<th>Course Name</th>
<th>Module Name</th>
<th>Type of Class</th>
<th>Lecturer</th>
<th>Time</th>
<th>Day</th>
<th>Room</th>
</tr>";
if (isset($_POST['button']) && $_POST['button'] == 'Submit') {
$course = mysqli_real_escape_string($con, $_POST['Course']);
$module = mysqli_real_escape_string($con, $_POST['Module']);
$day = mysqli_real_escape_string($con, $_POST['Day']);
$query = "SELECT * FROM course_module WHERE CourseName = '$course' AND ModuleName = '$module' AND Day = '$day'";
$result = mysqli_query($con,$query);
while($row1 = mysqli_fetch_assoc($result)){
echo "<tr>";
echo "<td>" . $row1['CourseName'] . "</td>";
echo "<td>" . $row1['ModuleName'] . "</td>";
echo "<td>" . $row1['ClassType'] . "</td>";
echo "<td>" . $row1['Lecturer'] . "</td>";
echo "<td>" . $row1['Time'] . "</td>";
echo "<td>" . $row1['Day'] . "</td>";
echo "<td>" . $row1['Room'] . "</td>";
echo "</tr>";
}
}
?>
HTML
<h1>School of Computing and Mathematics</h1>
<h2>Mobile website<h2>
<h2>Current students</h2>
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Timetabling</h3>
<p>Select your Course</p>
<form action="current.php" method="post" data-ajax="false">
<select name="Course">
<option>Select Course</option>
<?php echo $course_dropdown; ?>
</select>
<select name="Module">
<option>Select Module</option>
<?php echo $module_dropdown; ?>
</select>
<select name="Day">
<option>Select Day</option>
<?php echo $day_dropdown; ?>
</select>
<input id ="button_timetable" name="button" value="Submit" type="submit">
</form>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="homepage.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li class="ui-btn-active ui-state-persist"><a href="current.html">Current students</a></li>
<li><a href="prospective.html">Prospective students</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
</body>
</html>
Please keep in mind that this script is fully implemented on a plain HTML site. I am only having issues with the jQuery mobile library.
Thank You in advance
808
asked Dec 07 '25 03:12
Let me give you an answer, I found everything going through your code.
Inside a index.php:
data-ajax="false" should be added as a form attribute, it prevents jQuery Mobile from using ajax to submit data.
Incorrect jQuery Mobile css was initialized in a HEAD
table tag was not closed
But, through and trough this is well built page.
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
