Passing data from one page to another using ajax

Question

I have 2 pages called testing.php and submission.php. What I am looking to achieve is sending data from testing.php to display that data in submission.php. For example, if a user clicks on test1 they will get directed to submission.php and I would like to display test1 on that page. Here is my code:

testing.php:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>  
    <div class="col-xs-3">
        <ul id="choose">
            <li class="nav"><a href="submission.php">test1</a></li>
            <li class="nav"><a href="submission.php">test2</a></li>
            <li class="nav"><a href="submission.php">test3</a></li>
            <li class="nav"><a href="submission.php">test4</a></li>
            <li class="nav"><a href="submission.php">test5</a></li>
            <li class="nav"><a href="submission.php">test6</a></li> 
        </ul>
    </div>

    <script>
        $(document).ready(function() {    
            $("#choose").on('click', '.nav', function() {
                $.post("submission.php", { data: $(this).text() }, alert($(this).text()));               
            });
        });
    </script>
</body>

submission.php:

<?php
    $subcat = $_POST['data'];
    echo $subcat;
?>

At the moment submission.php is showing below error;

Notice: Undefined index: data in C:\xampp\htdocs\series\dynamics\admin\CleanURL\submission.php on line 2

Thanks in advance for looking into it, please suggest how could I get around this problem!

If you actually want to redirect the user to `submission.php` to show the data then you don't need AJAX, just use a standard `form` element — Rory McCrossan, May 11 '16 at 15:51

score 0 · Answer 1 · edited May 23 '17 at 11:44

This is what is happening:

You click the link
The event fires
The JavaScript runs
The Ajax request is prepped
The link is followed
The Ajax request is aborted because the page it lives it no longer exists

$_POST is empty because you are making a regular GET request by following a link.

First, be unobtrusive.

Replace the link with a form (alternatively design the system to use GET requests, it depends on what the system is doing). Put a hidden input in it to set the value of data.

Then, to make it Ajaxy:

Bind the event handler to the forms submit event
Capture the event object
Prevent the default behaviour

You also need to pass a function as the third argument to $.post.

Such:

$("#choose").on('submit','form', function(event){
  event.preventDefault();
  $.post(
      "submission.php",
      {data: this.form.data.value}, 
      function (response) { alert(response); }            
   );
});

score 0 · Answer 2 · answered May 11 '16 at 16:33

Easiest to achieve this is using GET and requires no javascript.

<ul id="choose">
    <li class="nav"><a href="submission.php?data=test1">test1</a></li>
    <li class="nav"><a href="submission.php?data=test2">test2</a></li>
    <li class="nav"><a href="submission.php?data=test3">test3</a></li>
    <li class="nav"><a href="submission.php?data=test4">test4</a></li>
    <li class="nav"><a href="submission.php?data=test5">test5</a></li>
    <li class="nav"><a href="submission.php?data=test6">test6</a></li> 
</ul>

Your submission.php.

<?php
$subcat = $_GET['data'];
echo $subcat;
?>

However if you really want/need to use POST then it's a bit more code and requires javascript. First wrap your ul in form and add radio inputs to each item and hide them:

<form action="submission.php" method="post">
    <ul id="choose">
        <li class="nav"><input type="radio" name="data" value="test1" style="display: none" /><a href="#">test1</a></li>
        <li class="nav"><input type="radio" name="data" value="test2" style="display: none" /><a href="#">test2</a></li>
        <li class="nav"><input type="radio" name="data" value="test3" style="display: none" /><a href="#">test3</a></li>
        <li class="nav"><input type="radio" name="data" value="test4" style="display: none" /><a href="#">test4</a></li>
        <li class="nav"><input type="radio" name="data" value="test5" style="display: none" /><a href="#">test5</a></li>
        <li class="nav"><input type="radio" name="data" value="test6" style="display: none" /><a href="#">test6</a></li> 
    </ul>
</form>

When you click on a link, use javascript to make the proper radio input checked and submit the form.

$("#choose").on('click', '.nav', function() {
    $(this).find('input').prop('checked', true);
    $('form').submit();               
});

Then you can use your submission.php code.

<?php
$subcat = $_POST['data'];
echo $subcat;
?>

score -1 · Answer 3 · answered May 11 '16 at 15:55

With Form

<form action="submission.php" method="post">
Name: <input type="text" name="name"><br>
<input type="submit">
</form>

With AJAX

   var data = (this).text();
    $.ajax({
      method: "POST",
      url: "submission.php",
      data: { li_selected: data}
    })
      .done(function( msg ) {
        alert( "Response: " + msg );
      });

I think that you want to use ajax ones.

Passing data from one page to another using ajax

3 Answers3