CODEWITHSUNDEEP
javascriptphpjqueryajaxpass-data
imprisoned243
imprisoned243

Reputation: 39

How to pass data to PHP page through AJAX and then display that page in another's DIV?

I have 2 pages with which I am working with: test1.php and test2.php. test1.php contains 2 <DIV> tags, one named "SubmitDiv" and the other named "DisplayDiv". In SubmitDiv, there is a check box and a submit button. When the check box is checked and the submit button is clicked, I would like it to display test2.php in the DisplayDiv div tag. I have figured that much already.

However, now I want test2.php to receive data from test1.php and process that data. In this case, it is receiving the checkbox's name, "chk" and will be printing that with an echo command. This is where I am a bit stumped as to how to go about this. After searching a bit for an answer, this is what I have written so far:

test1.php:

<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<meta charset="utf-8">
<script type="text/javascript">
    function sendQuery() {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'test2.php',
            data: $('#SubmitForm').serialize(),
            success: function() {
                $('#DisplayDiv').load('test2.php');
            }
        });
        return false;
    }
</script>
<body>
    <form id="SubmitForm" action="" method="post">
        <div id="SubmitDiv" style="background-color:black;color:white;">
            <input type="checkbox" id="chk" name="chk" form="SubmitForm" value="chk">CHECK</input><br>
            <button name="submit" id="submit" type="submit" form="SubmitForm" onclick="return sendQuery();">Submit</button>
        </div>
    </form>
    <div id="DisplayDiv"></div>
</body>
</html>

test2.php:

<html>
<meta charset="utf-8">
<?php
    $chk = $_POST['chk'];
    echo $chk;
?>
</html>

When the submit button is clicked, however, all it does is refresh the page, rather than display the test2.php in the DisplayDiv like it's supposed to. Any ideas on how to pass the data to test2.php and then also display it within the DisplayDiv section?

Upvotes: 1

Views: 6602

Answers (5)

vivek
vivek

Reputation: 352

This works:

$.ajax({
    type: 'GET',
    url: 'data.php',
    data: {
        "id": 123,
        "name": "abc",
        "email": "[email protected]"
    },
    success: function (ccc) {
        alert(ccc);
        $("#result").html(ccc);
    }
});

Include jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Upvotes: 0

vivek
vivek

Reputation: 352

data.php

  echo $id = $_GET['id']; 
  echo $name = $_GET['name'];
  echo $email = $_GET['email'];

Upvotes: -1

jonsuh
jonsuh

Reputation: 2875

You must first remove e.preventDefault(); in the sendQuery function because that is failing to return false onclick.

Then change your AJAX call to as follows:

$.ajax({
    type: 'POST',
    url: 'test2.php',
    data: $('#SubmitForm').serialize(),
    success: function(data) {
        $("#DisplayDiv").html(data);
    }
});

Upvotes: 1

S&#233;bastien
S&#233;bastien

Reputation: 12139

If you want to use e.preventDefault(); you must pass the event to the function 

function sendQuery(e) {
        e.preventDefault();
  //...
}

Otherwise I assume your form is simply submitted on click.

Upvotes: 1

Kemal Dağ
Kemal Dağ

Reputation: 2763

Instead of .load function use the following

success: function(response) {
     $('#DisplayDiv').html(response);
}

Upvotes: 2

Related Questions