使用 Onsubmit 从表单调用 Javascript

Question

我是PHP和AJAX的新手，遇到麻烦不知道怎么解决。我正在创建此页面，该页面显示查询产生的记录集。有 2 个页面：getdata.php 和 phpajax.php。 phpajax.php 通过 Javascript 调用 getdata.php。

我做了什么：

我设法通过使用按钮"Try it"（使用静态值）使其工作

我想要的：

如何通过单击"Submit"按钮正确显示数据（ATM，我点击两次提交后数据出现几秒钟，然后由于页面突然刷新而消失）？
如何使用提交按钮将 SELECT 和 TEXT 的值传递给 fshowdata()？
如何使用 "Try It" 按钮将 SELECT 和 TEXT 的值传递给 fshowdata()？

这是 phpajax.php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

    <html>
   <head>
  <script>

  function fshowdata(str1,date1) {
    //alert("The form was submitted");
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
   } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML =      xmlhttp.responseText;
        }
    }
    //document.getElementById("demo").innerHTML = str1 + " " + date1;
    xmlhttp.open("GET","getdata.php?q="+str1+"&"+"t="+date1,true);

    xmlhttp.send();
}
}
</script>

<style>
table {
width: 100%;
border-collapse: collapse;
}

table, td, th {
border: 1px solid black;
padding: 5px;
}

th {text-align: left;}
</style>
</head>
<body>

<p id="demo">Click the button to change the text in this paragraph.</p>

<?php


$con = mysql_connect('localhost','root','123');
if (!$con) {
die('Could not connect: ' . mysql_error());
}

mysql_select_db('mydb')or die('Could not select database');
$sql="SELECT DISTINCT(rides) FROM t_trx ORDER BY rides ";
$result = mysql_query($sql) or die('Query failed: ' . mysql_error());



echo "<form onsubmit='"."fshowdata(`some rides`,`a date`)"."' action='".""."'>";
echo "Choose Rides : "." "."<select id='"."rides"."' name='"."rides"."'>";
echo "<option value='"."ALL"."'>ALL</option>";
while($row = mysql_fetch_array($result)) {
echo "<option value='".$row["rides"]."'>".$row["rides"]."</option>";
}
mysql_free_result($result);
echo "</select>";
mysql_close($con);

echo "<input id='"."date2"."' type='"."TEXT"."' name = '"."date2"."'>";
echo "<input id='"."button1"."' type='"."SUBMIT"."' value = '"."SUBMIT"."'>";
echo "</form>";


echo "<button onclick='"."fshowdata(`ROLLER COASTER`,`18/07/2015`)"."'>";
echo "Try it";
echo "</button>";

?>
<br>
<div id="txtHint"><b>Data will be shown here...</b></div>

</body>
</html>

而对于 getdata.php：

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}

table, td, th {
border: 1px solid black;
padding: 5px;
}

th {text-align: left;}
</style>
</head>
<body>

<?php
$q = $_GET['q'];
echo $q;
$date_ = $_GET['t'];
echo $date_;
$con = mysql_connect('localhost','root','123');
if (!$con) {
die('Could not connect: ' . mysql_error());
}

mysql_select_db('mydb')or die('Could not select database');

$sql="SELECT * FROM t_trx WHERE rides = '".$q."' AND date1 = '".$date_."'     LIMIT 10";
echo $sql;
$result = mysql_query($sql) or die('Query failed: ' . mysql_error());

echo "<table>
<tr>
<th>Rides</th>
<th>Number</th>
<th>Date</th>
</tr>";
while($row = mysql_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['Rides'] . "</td>";
echo "<td>" . $row['Number'] . "</td>";
echo "<td>" . $row['Date'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
</body>
</html>

谢谢大家。感谢您的帮助...

Answer 1

使用下面的代码跳过刷新页面

onsubmit="return fshowdata(`some rides`,`a date`)"

在 fshowdata 函数中，你应该 return false。

使用 Onsubmit 从表单调用 Javascript

Calling Javascript from a Form using Onsubmit

javascript

php

mysql

ajax

onsubmit