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

Question

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?

is the function `sendQuery` being executed at all? are you getting any response back? — gloomy.penguin, Oct 02 '13 at 20:29
Just FYI, there is no need for the following lines in your test2.php file: ``, `` and ``. The pure PHP is all you need. — cssyphus, Oct 02 '13 at 20:35

score 2 · Accepted Answer · answered Oct 02 '13 at 20:28

2

Instead of .load function use the following

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

answered Oct 02 '13 at 20:28

Kemal Dağ

2,743
21
27

Note to OP: The var name `response` must be the same on both lines. That is, you can change the var name to `fred`, but you must then use `fred` in both places. – cssyphus Oct 02 '13 at 20:36
1

@imprisoned243 Think of .load in this situation as .ajax({type: 'GET',url: 'test2.php'}). Also have a quick glance at the jquery docs: http://api.jquery.com/load/ and http://api.jquery.com/jQuery.ajax/ – DeeperID Oct 02 '13 at 20:51

score 1 · Answer 2 · answered Oct 02 '13 at 20:30

1

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.

answered Oct 02 '13 at 20:30

Sébastien

11,860
11
58
78

I suspect this is probably your first problem. Because e isn't passed and therefore not defined you receive an error and the default event is allowed to proceed. – DeeperID Oct 02 '13 at 20:38

score 1 · Answer 3 · answered Oct 02 '13 at 20:40

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

score 0 · Answer 4 · edited Oct 06 '16 at 06:30

0

This works:

$.ajax({
    type: 'GET',
    url: 'data.php',
    data: {
        "id": 123,
        "name": "abc",
        "email": "abc@gmail.com"
    },
    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>

edited Oct 06 '16 at 06:30

Al.G.

4,327
6
31
56

answered Oct 04 '16 at 22:08

vivek

354
2
9

score -1 · Answer 5 · answered Oct 04 '16 at 22:11

-1

data.php

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

answered Oct 04 '16 at 22:11

vivek

354
2
9

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

5 Answers5