使用Onsubmit

时间:2015-07-31 08:50:33

标签: javascript php mysql ajax onsubmit

我是PHP和AJAX的新手,我遇到了麻烦,不知道如何解决它。 我正在创建此页面,显示由查询产生的记录集。 共有2页:getdata.php和phpajax.php。 phpajax.php通过Javascript调用getdata.php。

我做了什么:

  • 我设法通过使用按钮"尝试它" (使用静态值)

我想要的是什么:

  • 如何使用"提交"正确显示数据单击一下按钮(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>

谢谢你们。我感谢你的帮助...

1 个答案:

答案 0 :(得分:0)

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

onsubmit="return fshowdata(`some rides`,`a date`)"
在fshowdata函数中,你应该返回false。