How to pass PHP variable with ajax?

LTMH38 · December 5, 2016

Hi. I've been learning ajax with jquery and I am struggling to work out how to pass PHP variable between two PHP pages.
I started with a simple form:

<!DOCTYPE HTML>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>FORM1</title>
</head>
<body>
<div class="container">
<?php for($a = 0; $a < 3; $a++): ?>
<form action="FORM2.php" method="post">
<input type="hidden" name="var" value="<?php echo $a; ?>">
<input type="submit" name="submit" value="Index <?php echo $a; ?>">
</form>   
<?php endfor; ?>
</div>
</body>
</html>

<?php
header('Content-Type: text/html; charset=utf-8');
$variable = $_POST['var'];  
echo $variable;
?>

How can I do the same without page refresh using ajax?
I have tried using json encoder but I haven't been successful.

<!DOCTYPE HTML>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>AXAX1</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
        $('form').submit(function(e) {
            e.preventDefault();
            $.ajax({
                url: "AJAX2.php",
                type: "POST",
                dataType: "json",
                success: function(result) {
                    alert(data);
                },
                error: function(jqXHR, data ) {        
                    alert ('Ajax request Failed.');    
                }
            });
        });
    });
    </script> 
</head>
<body>
<div class="container">
<?php for($a = 0; $a < 3; $a++): ?>
<form action="AJAX2.php" method="post">
<input type="hidden" name="var" value="<?php echo $a; ?>">
<input type="submit" name="submit" value="Index <?php echo $a; ?>">
</form>   
<?php endfor; ?>
</div>
</body>
</html>

<?php
header('Content-Type: text/html; charset=utf-8');
$variable = $_POST['var'];  
echo json_encode($variable);
?>

requinix · December 5, 2016

1. You need to send the form data to AJAX2.php.

data: $(this).serialize(),

2. Your code is confused about what variable to use in the success callback.

success: function(result) {
	alert(data);
},

3. The AJAX page needs to be consistent about whether it returns HTML or JSON.

<?php
header('Content-Type: application/json');
$variable = $_POST['var'];  
echo json_encode($variable);
?>

<?php
header('Content-Type: text/html; charset=utf-8');
$variable = $_POST['var'];  
echo '<p>' . htmlspecialchars($variable) . '</p>'; // for example
?>

(your AJAX code expects JSON so obviously you need to use the former)

LTMH38 · December 6, 2016

I've sent the form data to AJAX2.php properly indicating JSON data in this page and I've used the callback function to insert the data back in the page AJAX1.php with a jquery html method but the page display an alert with a failed request.

$.ajax({
    url: "AJAX2.php",
    type: "POST",
    data: $('form').serialize,
    dataType: "json",
    success: function(data) {
        $('#display').html(data);
    },
    error: function(jqXHR, data ) {        
        alert ('Ajax request Failed.');    
    }
});

<body>
...
<div id="display">
</div>    
</body>

<?php
header('Content-Type: application/json');
$variable = $_POST['var'];  
echo json_encode($variable);
?>

Why does this happen?

requinix · December 6, 2016

.serialize is a function. You have to actually, you know, call it.

And now your AJAX code and your PHP code don't agree. Are you working with JSON or HTML? Pick one.

Psycho · December 6, 2016

OK, there are two problems with this line

data: $('form').serialize,

As requinix said, serialize is a function not a property. Function are called with parens: e.g. serialize().

Also, you cannot call 'form' since you have three forms on your page. Even if you correct the serialize function it will always pick the last form (i.e. the 2 value). Fortunately, jquery gives you a way to use the data of the form that called the function. And, requinix gave the the proper way to call it in step #1 of his first response.

Edited December 6, 2016 by Psycho

LTMH38 · December 6, 2016

it works now... thanks a lot

Sign In

How to pass PHP variable with ajax?

Recommended Posts

LTMH38

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

LTMH38

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

LTMH38

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information