[英]PHP Display result on same page
<form action="" method="post">
<div id="wrapper">
<p>
<label> Please Enter the JCID No </label>
<input type="text" name="txt_jcid_no" id="txt_jcid_no"/>
<input type="submit" name="submit" value="Search" class="bg-primary"/>
</p>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th style="display: none"></th>
<th style="display: none"> </th>
<th style="display: none"></th>
</tr>
</thead>
<?php
if (isset($_POST['submit'])) {
echo 'Hi';
echo '<tbody>';
echo '</tbody>';
}
?>
</table>
<!-- /#page-content-wrapper -->
</div>
</form>
親愛的朋友們,我希望我的php代碼在同一頁面上顯示該值,所以我在這里所做的就是從用戶那里獲取input(txt_jcid_no)
並處理查詢並以表格格式顯示該值。 但是當我使用if isset()
函數時,它會在頁面加載時顯示該值,即在單擊submit
按鈕之前,但我的要求是,在單擊提交按鈕后,該值應顯示在表中。
真的最好用ajax做到這一點。 您仍然可以將所有代碼都放在一個頁面中,只是讓ajax調用該頁面的第二個副本,如下所示:
<?php
// at the top of your file have your response logic
if (isset($_POST['txt_jcid_no'])){
echo '<tbody><tr><td colspan="6">I was echoed here because you submitted the form</td></tr></tbody>';
exit; // dont load the rest of the page if this was hit, we just want the above to be returned
}
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<form action="index.php" method="post">
<div id="wrapper">
<p>
<label> Please Enter the JCID No </label>
<input type="text" name="txt_jcid_no" id="txt_jcid_no">
</p>
</form>
<input type="button" value="Search" id="submit" class="bg-primary">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<script>
$(function(){
$('#submit').click(function(){
var dataString = 'txt_jcid_no=' + $('#txt_jcid_no').val();;
$.ajax({
type: "POST",
url: "withajax.php",
data: dataString,
success: function(result) {
$('#result').html(result);
},
error: function() {
}
});
});
});
</script>
</body>
</html>
如果您真的想通過發布表單來做到這一點,那么它將起作用:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<form action="index.php" method="post">
<div id="wrapper">
<p>
<label> Please Enter the JCID No </label>
<input type="text" name="txt_jcid_no" id="txt_jcid_no">
<input type="submit" name="submit" value="Search" class="bg-primary">
</p>
</form>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th style="display: none"></th>
<th style="display: none"> </th>
<th style="display: none"></th>
</tr>
</thead>
<?php
if (isset($_POST['submit']))
{
echo '<tbody><tr><td colspan="6">I was echoed here because you submitted the form</td></tr></tbody>';
}
?>
</table>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
</body>
</html>
您可以采用以下兩種方法之一。
首先是要包含一些邏輯,這些邏輯將確定表單是否已提交給自己,如下所示:
<body>
<?php if($receivedResult): ?>
<form action="" method="post">
<div id="wrapper">
<p> <label> Please Enter the JCID No </label>
<input type="text" name="txt_jcid_no" id="txt_jcid_no">
<input type="submit" name="submit" value="Search" class="bg-primary">
</p>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th style="display: none"></th>
<th style="display: none"> </th>
<th style="display: none"></th>
</tr>
</thead>
</table>
</div>
<?php else; ?>
<h1>you submitted a result</h1>
...
<?php endif; ?>
</div>
<!-- /#page-content-wrapper -->
</div>
</body>
</form>
或者,您可以設置一個AJAX終結點,使表格不執行標准發布,而是從該AJAX終結點發送和接收數據,並以Javascript動態處理響應(此示例使用jquery)。
<body>
<form action="" method="post">
<div id="wrapper">
<label> Please Enter the JCID No </label>
<input type="text" name="txt_jcid_no" id="txt_jcid_no">
<input type="submit" name="submit" value="Search" class="bg-primary">
</div>
</form>
<script>
$('input[type=submit]').submit(function (ev) {
ev.preventDefault();
.ajax({
url: 'some/end/point',
type: 'post',
contentType: 'application/x-www-form-urlencoded',
success: function( data, textStatus, jQxhr ){
alert(data);
},
error: function( jqXhr, textStatus, errorThrown ){
console.log( errorThrown );
}
});
});
</script>
</body>
</form>
通常,一旦您提交表單並刷新頁面,便會重新提交表單。 因此,您需要從地址欄點擊回車。 您可以將以下代碼放在</thead>
標簽下。 您要么不想使用Ajax,要么不包括其他頁面。
<?php
if (isset($_POST['submit']))
{
$con = mysql_connect('localhost','username','password') or die(mysql_error());;
mysql_select_db('db',$con) or die(mysql_error());
//process your query here
//e.g. $sql = "selelct * FROM tablename WHERE columnname = ". $_POST['txt_jcid_no'];
//fetch query as per your choice
//and print outpout here..
echo '<tbody>';
foreach($result as $_value){
echo "<tr>";
echo "<td>". $_value['name'] . "</td>";
echo "<td>". $_value['position'] . "</td>";
echo "<td>". $_value['office'] . "</td>";
echo "</tr>";
}
echo '</tbody>';
mysql_close();
}
?>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.