Jquery Ajax Post data on multiple pages running on background

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>
javascript php jquery html ajax
kishan patel

Answers 1

Submit Answer
  • kishan patel

    There are several ways you can solve your problem.

    1. 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>

    2. 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>

    3. 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.

Related Articles