Send the selected items to the next page using a JavaScript onclick function

Question

Send the selected items to the next page using a JavaScript onclick function

I have created a 3-step restaurant menu items order form in HTML with JavaScript, but I am facing some issues with the functionality. The main problem lies in the order calculation.

Details of the 3 step form:

In menu.html :

The user can add menu items by clicking a button (image). The selected items will be displayed on the right side of the same page. Users can then click the checkout button.
In payment.html :

Here, only the selected items for the order are shown. Users can review them and then proceed to checkout.
In delivery.html :

Users will see their total order price and need to provide their name, address, city, etc., similar to a registration form. At the bottom, there is a "Place Order Now" button that, when clicked, notifies the site owner.

****** HTML code for menu.html ******

<li>
    <div class="row">
        <div class="col-xs-8">
            <p>Grilled Fish Fillet</p>

        </div>
        <div class="col-xs-2">
            <p>150 SR</p>
        </div>
        <div class="col-xs-2">
            <button onclick="addtoCard('grilledfishfillet','Grilled Fish Fillet', 150)" style="border:none; background:none;"><img src="images/plus.jpg" alt=""></button>

        </div>
</li>

****** Content for delivery.html******

<div id="OrderItem">
    <input name="order1" placeholder="" type="text" id="order1" size="30" value=""  class="form-control  input-lg"><br>
    <input name="order2"  placeholder=" " type="text" id="order2" size="30" value=""  class="form-control  input-lg"><br>
    <input name="order3" placeholder=" " type="text" id="order3" size="30" value=""  class="form-control  input-lg"><br>
    <input name="order4" placeholder="" type="text" id="order4" size="30" value=""  class="form-control  input-lg"><br>
</div>

***** Details for payment.html page****

<div class="row">
    <div class="col-sm-6">
    <label>First Name</label>
    <input name="name" type="text" id="name" size="30" value=""  class="form-control  input-lg">
    </div>
    <div class="col-sm-6">
    <label>Last Name</label>
    <input name="lname" type="text" id="lname" size="30" value=""  class="form-control input-lg">
    </div>
</div>

<div style="margin-top:40px;padding:5px 30px;" class="bg-color">
    <div class="row">
        <div class="col-xs-12">
            <h3 style="padding-top:10px; text-align:center; font-size:24px;">Total : 246.00 SAR</h3>
        </div>
        
    </div>
</div>

javascript jquery html css

Answer 1

Answer №1

One method for transferring data between pages is using localStorage. Here's a basic example of how to use it:

if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Unfortunately, Web Storage is not supported..
}

To set a value:

localStorage.setItem('myValue', 'My Value');

And to retrieve a value:

localStorage.getItem('myValue');

If localStorage isn't available, you can consider using cookies or URL rewriting as alternatives.

Answer 2

One method for transferring data between pages is using localStorage. Here's a basic example of how to use it:

if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Unfortunately, Web Storage is not supported..
}

To set a value:

localStorage.setItem('myValue', 'My Value');

And to retrieve a value:

localStorage.getItem('myValue');

If localStorage isn't available, you can consider using cookies or URL rewriting as alternatives.

Answer 3

Answer №2

Sending Data Between Two Web Pages using localStorage

var dataObject = { 'apple': 1, 'banana': 2, 'orange': 3 };

// Save the object in local storage
localStorage.setItem('dataObject', JSON.stringify(dataObject));

// Get the object from storage
var receivedObject = localStorage.getItem('dataObject');

console.log('receivedObject: ', JSON.parse(receivedObject));

Answer 4

Sending Data Between Two Web Pages using localStorage

var dataObject = { 'apple': 1, 'banana': 2, 'orange': 3 };

// Save the object in local storage
localStorage.setItem('dataObject', JSON.stringify(dataObject));

// Get the object from storage
var receivedObject = localStorage.getItem('dataObject');

console.log('receivedObject: ', JSON.parse(receivedObject));

Answer 5

Answer №3

Utilizing HTML's localStorage and/or sessionStorage can be beneficial for passing values between pages. While these features are built into HTML, they require JavaScript for manipulation.

localStorage will permanently store any value you assign to it, whereas sessionStorage will only hold the value for a session - similar to the concept of cookies versus sessions in PHP. The syntax for both is identical.

To store values, you can use this syntax:

localStorage.setItem(key, value);

Where 'key' is your identifier and 'value' is the data you want to store. To retrieve the stored value, you can use:

localStorage.getItem(key);

This allows you to store a value on one page using `setItem` and retrieve it on another page using `getItem`.

Here are a few important points to consider:

Consider the longevity of your data.
Since localStorage retains data indefinitely (unless manually deleted or cleared by the browser), consider whether sessionStorage would suffice in certain cases.
localStorage functions as a universal JavaScript object.
Rather than using getter and setter methods, you can directly access and modify properties if desired. For example, `localStorage.key = value;` (setter) or `var x = localStorage.key;` (getter).

Answer 6

Utilizing HTML's localStorage and/or sessionStorage can be beneficial for passing values between pages. While these features are built into HTML, they require JavaScript for manipulation.

localStorage will permanently store any value you assign to it, whereas sessionStorage will only hold the value for a session - similar to the concept of cookies versus sessions in PHP. The syntax for both is identical.

To store values, you can use this syntax:

localStorage.setItem(key, value);

Where 'key' is your identifier and 'value' is the data you want to store. To retrieve the stored value, you can use:

localStorage.getItem(key);

This allows you to store a value on one page using `setItem` and retrieve it on another page using `getItem`.

Here are a few important points to consider:

Consider the longevity of your data.
Since localStorage retains data indefinitely (unless manually deleted or cleared by the browser), consider whether sessionStorage would suffice in certain cases.
localStorage functions as a universal JavaScript object.
Rather than using getter and setter methods, you can directly access and modify properties if desired. For example, `localStorage.key = value;` (setter) or `var x = localStorage.key;` (getter).

Send the selected items to the next page using a JavaScript onclick function

Answer №1

Answer №2

Answer №3

Similar questions

When clicking initially, the default input value in an Angular 2 form does not get set

The filtering function stops working after the initial use

Enhancing the JQuery Dialog box by assigning an ID to the standard close button ("X") icon

What is the best way to capture any internal errors that may arise from external JavaScript code?

Selenium testing - Immediate disappearance of OK/Cancel popup

Upon first render, useSession from Next Auth does not retrieve the session

Pressing anywhere will close the MagnificPopup ajax box

What could be the reason for the ReferenceError that is being thrown in this code, indicating that '

Create a "load additional data" button

What is the best way to create a for loop that collects all the weekdays falling between two specific months?

properly referencing files

What is the best way to ensure that the same object is not selected multiple times when executing concurrent queries

What is the method for accessing the AG-Grid Grid API beyond the Vue component?

Tips for extracting a portion of a string in JavaScript:

Can the z-index of a div be altered by a checked checkbox?

Spacing between products in Woocommerce product list

Expanding Vue Tabs with Bootstrap: Manipulating tab-content to perfectly fill parent height

Arranging items by specific criteria in ng-repeat for a personalized sorting experience

What is the best way to save data in Next.js so that it can be accessed from any location

Error in JQUERY: Uncaught TypeError - Index Of Error