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

StackOverflow https://stackoverflow.com/questions/19146228

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?

Was it helpful?

Solution

Instead of .load function use the following

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

OTHER TIPS

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.

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

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>

data.php

  echo $id = $_GET['id']; 
  echo $name = $_GET['name'];
  echo $email = $_GET['email'];
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top