PHP Display result on same page

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>

Dear friends i want my php code to display the value on the same page , so what i do here is get input(txt_jcid_no) from the user and process the query and display the value in table format . But when i use if isset() function it displays the value while the page loads i.e before clicking the submit button but my requirement is the value should be displayed in table after clicking the submit button.

have you seen browser confirm box asking about post data during page load — Shailendra Sharma, Sep 25 '15 at 06:22
The $_POST['submit'] will not be set until unless you post the form. Just refresh the page & have a check(Not the resubmitting the form). — MaK, Sep 25 '15 at 06:23
Keep in mind that once you submit the form, refreshing the page will **resubmit the form**. If you want to start over, youll need to click in the address bar and press enter, to actually navigate to the page fresh — Wesley Smith, Sep 25 '15 at 06:27
Use Ajax if the data processing needs to be done serverside (if you need to request a db for instance). Or just process your data clientside in js/jquery if it's only calculation (if no serverside hosted data is requested). — fpierrat, Sep 25 '15 at 06:29
http://stackoverflow.com/questions/8335828/how-to-delete-post-variable-upon-pressing-refresh-button-on-browser-with-php this may help you. — Subin Thomas, Sep 25 '15 at 06:32

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

It would really be best to do this with ajax. You can still have all your code in one page, and just have the ajax call a second copy of the page like so:

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>

If you really want to do it by posting the form, this will work:

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>

score 0 · Answer 2 · answered Sep 25 '15 at 06:29

You could go one of two ways.

The first would be to include some logic which would determine whether the form was submitted to itself like so:

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

or, you could set up an AJAX endpoint and have the form not perform a standard post and instead send and receive data from this AJAX endpoint and dynamically process the response in Javascript (this example uses 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>

score 0 · Answer 3 · answered Sep 25 '15 at 06:44

Generally once you submit the form and refreshing the page will resubmit the form. So you need to hit enter from address bar. You may put following code under </thead> tag. Either you don't want to go with Ajax or not include another page.

<?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 Display result on same page

3 Answers3

Working demo

Working demo