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
– Shailendra Sharma, Commented Sep 25, 2015 at 6: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
– MaK, Commented Sep 25, 2015 at 6: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
– Wesley Smith, Commented Sep 25, 2015 at 6: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
– fpierrat, Commented Sep 25, 2015 at 6:29

Community · Accepted Answer · 2020-06-20 09:12:55Z

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>

Damon Swayn · Accepted Answer · 2015-09-25 06:29:10Z

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>

Praful Rajput · Accepted Answer · 2015-09-25 06:44:01Z

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();
 }
 ?>

Collectives™ on Stack Overflow

PHP Display result on same page

3 Answers 3

Working demo

Working demo

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related