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). commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art034 — Indrasis Datta
– Indrasis Datta, Commented Apr 4, 2017 at 3:57
mysql is obsolete use mysqli or pdo for connecting to database — Rafiqul Islam
– Rafiqul Islam, Commented Apr 4, 2017 at 3:59
@Rafiq are there any problem with my query, because the output only return blank table not the data. — Nexz
– Nexz, Commented Apr 4, 2017 at 4:16
to see that this $_POST['name'] has any value when you post your data — Rafiqul Islam
– Rafiqul Islam, Commented Apr 4, 2017 at 4:21

Gohel Dhaval · Accepted Answer · 2017-04-04 03:58:12Z

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 4, 2017 at 3:58

Gohel Dhaval

8301 gold badge8 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nexz Over a year ago

thank you. i will try that. and also are there any problem in my php file?

Joseph Beard · Accepted Answer · 2017-04-04 04:08:05Z

1

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>

edited Apr 4, 2017 at 4:08

answered Apr 4, 2017 at 4:00

Joseph Beard

1773 silver badges13 bronze badges

2 Comments

Nexz Over a year ago

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.

Joseph Beard Over a year ago

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 to fix that.

Collectives™ on Stack Overflow

PHP ajax not display any data from DB

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related