我的php表单不会通过jQuery-Mobile提交

时间:2013-03-18 17:30:23

标签: php html forms jquery-mobile submit-button

我有一个完整的PHP,HTML代码,但是当我将它放入我使用jQuery Mobile设置的网站时,提交按钮将不会显示查询。有没有人知道如何解决这个问题,甚至知道为什么会发生这种情况

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>

请记住,此脚本在纯HTML网站上完全实现。我只是遇到了jQuery移动库的问题。

提前谢谢

1 个答案:

答案 0 :(得分:2)

让我给你一个答案,我发现你的代码中都有一切。

在index.php中:

  1. data-ajax =“false”应作为表单属性添加,它会阻止jQuery Mobile使用ajax提交数据。

  2. 在HEAD

  3. 中初始化了不正确的jQuery Mobile css
  4. 标记未关闭

  5. 但是,通过这个是精心构建的页面。