PHP ajax not display any data from DB

Question

i'm trying coding some ajax coding that when user enter their name then click submit, all the data that related with them will be display without refreshing page. But my problem is my code doesn't work(don't show output). can i know what the problem is and maybe give me some solution/example thanks.

below is my code:

<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

  <script type="text/javascript">

  $(document).ready(function() {

  $("#display").click(function() {                

     $.ajax({    //create an ajax request to load_page.php
        type: "POST",
        url: "tesz2.php",             
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
        $("#responsecontainer").html(response); 
        //alert(response);
                 }

            });
       });
    });

   </script>

   <body>
   <form method = Post onclick="display">
   <input type ="text" id='name'><br>
   <input type='submit'>
   </form>


   <h3 align="center">Manage Student Details</h3>

   <div id="responsecontainer" align="center"></div>
   </body>

Php File:

  <?php
   include("co.php");
   mysql_select_db("testing",$con);
   $result=mysql_query("select * from Login where user_name='".$_POST['name']."'",$con);

  echo "<table border='1' >
        <tr>
         <td align=center> <b>user Id No</b></td>
         <td align=center><b>Name</b></td>
         <td align=center><b>Password</b></td>
         <td align=center><b>responsibility</b></td></td>";

            while($data = mysql_fetch_row($result))
   {   
         echo "<tr>";
         echo "<td align=center>$data[0]</td>";
         echo "<td align=center>$data[1]</td>";
         echo "<td align=center>$data[2]</td>";
         echo "<td align=center>$data[3]</td>";
              echo "</tr>";
   }
        echo "</table>";
      ?>

co.php is my config.file

You should try debugging and check what you're getting in the Network tab when you Inspect element (press F12). http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art034 — Indrasis Datta, Apr 04 '17 at 03:57
mysql is obsolete use [mysqli](http://php.net/manual/en/class.mysqli.php) or [pdo](http://php.net/manual/en/ref.pdo-mysql.php) for connecting to database — Rafiqul Islam, Apr 04 '17 at 03:59
@Rafiq are there any problem with my query, because the output only return blank table not the data. — Nexz, Apr 04 '17 at 04:16
to see that this `$_POST['name']` has any value when you post your data — Rafiqul Islam, Apr 04 '17 at 04:21

score 1 · Answer 1 · answered Apr 04 '17 at 03:58

1

in you form you are use onclick method and when call ajax you can use #display as id but it is method so remove your form code and put this code

<form method = Post id="display">
   <input type ="text" id='name'><br>
   <input type='submit'>
</form>

answered Apr 04 '17 at 03:58

Gohel Dhaval

820
1
8
12

thank you. i will try that. and also are there any problem in my php file? – Nexz Apr 04 '17 at 04:14

Joseph Beard · Answer 2 · 2017-04-04T04:08:05.597

You need to send the name variable to the php page. Your ajax request should look like this:

$.ajax({    //create an ajax request to load_page.php
        type: "POST",
        url: "tesz2.php",
        data: { name: $('#name').val() }, // set the naem variable
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
            $("#responsecontainer").html(response); 
            // alert(response);
        }

            });
       });
    });

Edit: You also need to use Dhaval Gohel's answer. There was more than one problem.

Edit: You also should change you .clcik to .submit. That's probably the behavior you're looking for.

Your javascript would look like this:

  <script type="text/javascript">

  $(document).ready(function() {

  $("#display").submit(function(e) {   
         e.preventDefault();

     $.ajax({    //create an ajax request to load_page.php
        type: "POST",
        url: "tesz2.php",
        data: { name: $('#name').val() }, // set the naem variable             
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
        $("#responsecontainer").html(response); 
        //alert(response);
                 }

            });
       });
    });

   </script>

thanks, but may i ask you some question. are there any problem with my php file. I mean at the query. because it only return blank table not the data. — Nexz, Apr 04 '17 at 04:13
I believe your query should look like this: `mysql_query("SELECT * from Login WHERE user_name='$_POST[name]'",$con);` However, I haven't tested it. Connecting the way you are though will leave you vulnerable to SQL Injection. You should read [this question](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) to fix that. — Joseph Beard, Apr 04 '17 at 04:20

PHP ajax not display any data from DB

2 Answers2