I would like to know how it is possible to save the data of an input in a PHP variable to be able to show it in a following page.
I have a web page that does a calculation in JavaScript and at the end one of the fields returns the total. After doing the calculation the only field I'm interested in saving is the total field, since I want to show it on the next page.
The relevant HTML code is as follows:
<p class="auto-style4">
<span class="auto-style5">Tu pago total es de</span>
</p>
<div class="auto-style6">
<input type="text" id="valor5" value="0.00" disabled value="0" size="23" >
<span class="auto-style7">dólares</span>
</div>
How can I make it so that I can save that data and display it respectively on the other page?
I leave here several options to pass data from one page to another. They all have their advantages and disadvantages and it will depend on the particular case to opt for one or the other:
In the case you present in the question, I would personally choose the
SessionStorage
(within the Local Storage option) or directly pass the value as part of the URL.Forms
To pass data from page A to page B you can use forms (either all at once in a single field or formatted in multiple fields), then submit the form. For example:
If you already have a form to do this, then consider adding a hidden field with the value you want to pass to the second page.
Advantage:
Disadvantages:
For your particular case : This could be an option, it is simple and easy to implement. Note that if the fields are disabled they will not be submitted with the rest of the form.
Parameter in the URL
Alternatively, without the need for a form, you could pass the information in the URL of the new page (this would be equivalent to having a form with a GET, but without creating the form).
When you go to redirect to your second page, include a parameter in the link to the new page:
Advantage:
Disadvantages:
For your particular case : This could be an option, it's simple and easy to implement (it's basically a simplified version of forms with GET)
LocalStorage
In HTML5, the Web Storage API was introduced, which includes two methods to store information in the user's browser: LocalStorage and SessionStorage . The difference between the two methods is how information is persisted, with LocalStorage it is saved from session to session (and from tab to tab), with SessionStorage it is cleared when the window is closed.
The code to use it is simple:
Advantage:
Disadvantages:
For your particular case : If you don't have to send the information to the server (to store it in a database or process it in some way), I would choose this option.
cookies
Similar to LocalStorage, cookies are a classic. They can be implemented on the client side (JavaScript) or on the server side (eg: PHP) and the result would be similar. An example of what it would look like in PHP:
Advantage:
Disadvantages:
For your particular case : Before going with this option, I'd stick with LocalStorage.
IndexedDB
Another feature that was introduced in HTML5 was IndexedDB , which allows you to create an object-oriented database locally. So you can store and retrieve objects using a key.
Advantage:
Disadvantages:
For your particular case : I wouldn't go for this method because you want to pass little information and using something like this would be shooting flies to death. If you had a lot of information, that would be another story.
You can pass the value of variables from javascript to PHP as follows.
Having the js script in which you do the calculations:
From php you can retrieve it like this: