Jquery Ajax Post data on multiple pages running on background

Question

How to execute Jquery Ajax post data on multiple pages.

For Example, I am using three pages named Page1,Page2,Page3. I need to post data from Page 1 -> Page2 and,from Page2 -> Page 3. User initiates only on Page1, all other function should performed in background. Is that possible?

This is the code used.

Page1.php:

<html>
<head><title>Page1</title></head>
<script src="/path to/jquery.min.js"></script>
<body>
<button  type="button" class="btn" id="bt">SEND</button>
<script>
var a1="Hello";
var b1="Testing Ajax";
$(function(){
$('#bt').click(function(){
 $.ajax({
      url: 'Page2.php',
        type: 'POST', 
       data: {'w1': a1,'w2':b1}, 
     alert("Data Sent...");     
        }, 
       error: function() {
         alert("Unable to send data now.");
        } 
   });}); }); 
</script>
</body>
</html>

Page2.php:

<html>
<head><title>Page 2 </title></head>
<body>
<?
 $r1 = $_POST['w1'];
 $r2 = $_POST['w2'];
?>
<div id="dom1" style="display: none;">
<?php 
    $r1 = $_POST['w1'];
    echo htmlspecialchars($r1); 
?>
</div>
<div id="dom2" style="display: none;">
<?php 
   $r2= $_POST['w2'];
    echo htmlspecialchars($r2); 
?>
</div>  
<script>
var div1 = document.getElementById("dom1");
var m1 = div1.textContent;
//alert(m1);
var div2 = document.getElementById("dom2");
var m2 = div2.textContent;
//alert(m2);

 $.ajax({
      url: 'Page3.php',
        type: 'POST', 
       data: {'x1': m1,'x2':m2}, 
     alert("Data Sent...");     
        }, 
       error: function() {
         alert("Unable to send data now.");
        } 
   });

</script>
</body>
</html>

Page3.php:

<html>
<head>
<title>Page3</title></head>
<body>
<div id="dom3">
<?php 
    $r1 = $_POST['x1'];
    echo htmlspecialchars($r1); 
?>
</div>
<div id="dom2">
<?php 
   $r2 = $_POST['x2'];
    echo htmlspecialchars($r2); 
?>
</div>
</body>
</html>

Well if you can then set the data from page1 to session the u can use it in page2 as well as page 3... — Sushant Yadav
@SushantYadav User is not switching from page1 to the last page3. User only initiates button click on Page1, and the data should reach the Page3. — Rahul Gopi
Thats what i meant to say on Page1 when the action has to be initiated set the data in your session. and on Page3 if the required data session is set show the data or do you functionality on Page3.. — Sushant Yadav

Marcel Marcel · Accepted Answer · 2016-04-02T12:04:11

There are several ways you can solve your problem.

PHP Sessions You can easily start a session in every of your pages and post

<?php
// every page needs to start the session
session_start();

// after submission or posting
$_SESSION['data'] = $your_data;
?>

So on your next page you can easily access your data via session.

<div>
    <?= $_SESSION['data']['var1'] ?>
</div>

Use Forms and send them via jQuery ajax requests and put the form values on the next page into hidden input elements.

<!-- example for page 2 -->
<form id="your_form" method="post" action="">
    <input type="hidden" name="var1" value="<?= $var1 ?>">
    <input type="hidden" name="var2" value="<?= $var2 ?>">
    <input type="submit" id="submit" name="submit" value="submit">
</form>
<script type="text/javascript">
    $('#submit').on('click', function( event ) {
        event.preventDefault();
        $.ajax({
            url : your_url,
            type : 'POST',
            data : $('#your_form').serialize();
         });
    });
</script>

Just don 't use ajax. You really don 't need it, wenn you jump from page to page. Look the example below.

<!-- on page1.php just a quick form -->
<form id="form1" method="post" action="page2.php">
    <label for="var1">Var 1</label>
    <input type="text" name="var1" id="var1" value="">
    <input type="submit" name="submit" value="submit">
</form>

<!-- on page2.php just another quick form with hidden elements -->
<form id="form2" method="post" action="page3.php">
    <label for="var2">Var 2</label>
    <input type="text" name="var2" id="var2" value="">

    <input type="hidden" name="var1" value="<?= $_POST['var1'] ?>">
    <input type="submit" name="submit" value="submit">
</form>

In every 3 given examples you should consider the securty stuff like escaping post vars, etc.

Jquery Ajax Post data on multiple pages running on background

1 Answers