CODEWITHSUNDEEP
javascriptphpajax
user12897573
user12897573

Reputation:

Pass Javascript variable to another page via PHP Post

I am having two php pages:

page 1:

<form class="form-horizontal"  role="form" method="post" action="Page2.php">
      <button id="place-order" class="btn btn-lg btn-success">Place Order</button>
      <div id="ajax-loader" style="display:none;"><img src="images/ajax-loader.gif" /></div>
</form>
<script>
      var id = Math.random();
      $(document).ready(function() {
        $('#place-order').on('click', function() {
            $(this).hide();
            $('#ajax-loader').show();
        });
      });
</script>

As on form, it redirects to Page2.php, I want to pass the Javascript variable "id" from Page1 to receive it in Page2. I have tried using cookies, but need an alternative approach.

I am not understanding the transistion from PHP to JS and vice-versa. Help is appreciated. Thanks in advance

Upvotes: 1

Views: 653

Answers (3)

Luke
Luke

Reputation: 1181

You could use a query string to pass the value to the next page.

  1. Add an ID to the form
<form class="form-horizontal"  role="form" method="post" action="Page2.php" id="order-form">
  1. Update the action of the form to add this query string from our JS variable
var id = Math.random();
$('#order-form').attr('action', 'Page2.php?id=' + id);
  1. Get this variable in PHP (obviously you might wanna do more checks on it)
<? $id = $_GET['id'] ?>

We can now use $id anywhere in our PHP and we'll be using the ID generated from JS. Neat, right? What if we want it in JS again though? Simply add another script tag and echo it there!

<script type="text/javascript">
var id = <? echo $id ?>;
</script>

EDIT: Updated to add a little about how it works as you said you're not too sure about the transition between PHP and JS.

PHP runs on the server. It doesn't know much about the browser, and certainly doesn't know about JS. It runs everything and finishes executing before the web page is displayed. We can pass PHP variables to JS by creating script tags and creating a new javascript variable, echoing the PHP value.

JS (JavaScript) runs in the browser. It doesn't know about anything that happens on the server; all it knows about is the HTML file it is running in (hit CTRL+U to see raw HTML). As JS runs at a completely separate time to PHP there is no easy way to transfer variables (e.g. $phpVar = myJSVar). So, we have to use server methods like POST or GET.

We can create a GET or POST request in 2 main ways:

  1. Using a form
  2. Using an AJAX request

Forms work in the way I've outlined, or you can create a hidden field, set the value you want and then check for that. This involves redirecting to another page.

AJAX (Asynchronous Javascript And Xml) works slightly differently in that the user doesn't have to leave the page for the request to take place. I'll leave it to you to research how to actually program it (jQuery has a nice easy API for it!), but it basically works as a background request - an example would be displaying a loading spinner whilst loading order details from another page.

Hope this helps, let me know if something's not clear!

Upvotes: 1

user13651619
user13651619

Reputation:

You can use session storage or cookies. Example for session storage:

// First web page:
sessionStorage.setItem("myVariable", "myValue");
 
// Second web page:
var favoriteMovie = sessionStorage.getItem('myVariable');

Upvotes: 1

Sudhir kumar
Sudhir kumar

Reputation: 43

Dear you can do it very easily with ajax. Ajax has data attribute which helps you pass your data from javascript to another page.

This link will help you a lot https://api.jquery.com/jquery.ajax/

Upvotes: 1

Related Questions