CODEWITHSUNDEEP
phpjquerymysql
user2854563
user2854563

Reputation: 268

Post Data and Show it in a div using jQuery

I've searched through google and all I find a bit complex tutorials on this subject. These are very complex for a newbie like me, so I'm asking a question from a community like here on which I trust.

What's the simplest code I need to post a data inputs to PHP (without refreshing the page) and gets or fetch the result data from PHP file (without refresh) and show this data in a <div> Please give me examples.

Thank you and regards

Upvotes: 1

Views: 5074

Answers (3)

gloomy.penguin
gloomy.penguin

Reputation: 5911

This is a simple AJAX post with JQuery (since you listed it as a tag).

It posts to my_page.php with some data passed ({ "any_params_to_send" : "in json format" } that will be received in $_POST. When the response is received, it is put into a div with an ID of my_div.

this is in your main page... index.html

<script type='text/javascript' src='/where_ever_you_saved_it/jquery.js'></script>

<div id="my_div"></div>

<script>
$(document).ready(function(){

$.ajax({
    type: "POST", 
    url: "my_page.php",
    dataType: "html",
    data: { "any_params_to_send" : "in json format" }
    success: function( response) {
      $('#my_div').html(response);
    } 
  });

});
</script>

this is in my_page.php

<?php
$any_params_to_send = $_POST['any_params_to_send'];  ?>

<div style="border:1px solid black; display:inline-block">

any_params_to_send<br/>

<?php echo $any_params_to_send; ?>

</div>

Other SO Post about this topic...

Upvotes: 3

Sonya Krishna
Sonya Krishna

Reputation: 269

Try this code.It gives some basic idea.Please feel free to ask any doubt in this code.

HTML CODE

  <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#btn").click(function(){
var id=$("#id").val();
$.ajax({

                    type:"post",
                    url:"action.php",
                    datatype:"html",
                    cache:false,
                    data:"id="+id,
success:function (response){
      // alert(response);
var data=response;
$("#id").val(" ");
$('#result').html(data); 

}

});
}); 

</script>

</head>
    <body>
    <form>
    <input type="hidden" name="id" id="id">
    </form>
    <button  id="btn">Click here/button>
<div id="result"></div>
    </body>
    </html>

action.php

<?php
$id=$_POST['id'];
 $user_name = "root";
             $password = "root";
               $database = "mydb";
                $server = "localhost";
            $con = mysql_connect($server,$user_name,$password);
           mysql_select_db($database,  $con) ;
$sql="select * from mytable where id='$id'";
$result=mysql_query($sql);
$var=mysql_fetch_row($result)
{
echo '$var['name'];
}
?>

Working of code

On clicking the button,the hidden value in the form is sent to the action.php file with out page refreshment.And the response from the action.php is collected in the variable data and is displayed in the div having id as result.

Upvotes: 1

JxAxMxIxN
JxAxMxIxN

Reputation: 1731

You could use jQuery.

You add it to your page like this...

<script type='text/javascript' src='http://exaple.com/jquery.js'></script>

Then you learn about jQuery...

http://jquery.com

And implement Ajax...

http://api.jquery.com/jQuery.ajax/

Upvotes: 1

Related Questions