Question

 <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按钮之前，但我的要求是在单击提交按钮后应该在表格中显示该值。

Answer 1

用ajax做这个真的是最好的。您仍然可以将所有代码放在一个页面中，只需将ajax调用为页面的第二个副本，如下所示：

Working demo

<?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>

如果您真的想通过发布表单来实现，那么这将有效：

Working demo

<!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>

Answer 2

你可以采取两种方式之一。

第一个是包含一些逻辑，以确定表单是否像这样提交给自己：

<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>

Answer 3

通常，一旦您提交表单并刷新页面，将重新提交表单。所以你需要从地址栏点击输入。您可以在</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();
 }
 ?>

PHP在同一页面上显示结果

3 个答案:

Working demo

Working demo