1. Duel function Data export and Import from item card page to and in Order Form page :

2. Create Selected Items Table

3. Create Order Table

4. Form submit button onclick open the table iframe and data live transfer in Selected Items Table with auto row adding

Conditions:

Data expert from item card to order form:
Data import in order form from item card:

1. When opened Item Card and select the item, export data into order from, item match and select through card data-id, item price Data send through card data-price-id and order form will open with auto Selected the item and Rate input box auto filleded with card data-price-id value. Form will open in iframe

2. When opened a order Form by clicking a button or link, form will open through iframe in button source page

Then, after Select an item Rate input box will auto filled with the card data-price-id value

This Page Link:

Output Link

( https://new-kitchen-king-ii.blogspot.com/2025/08/duel-function-data-export-and-import.html )

Edit Link

( https://www.blogger.com/blog/post/edit/2406582915508979292/1751292846044589998 )

A. Item Card Page

Output Link

( https://kitchen-king-ii.blogspot.com/2025/08/item-card-green-salad.html )

Edit Link

( https://www.blogger.com/blog/post/edit/2135215566803965942/7872225224260752073 )

B. Order Form Page

Output Link

( https://kitchen-king-ii.blogspot.com/2025/08/order-form.html )

Edit Link

( https://www.blogger.com/blog/post/edit/2135215566803965942/6624103534153605058 )

C. Button Page

Output Link

( https://kitchen-king-ii.blogspot.com/2025/08/home_7.html )

Edit Link

( https://www.blogger.com/blog/post/edit/2135215566803965942/2115690488522448911 )

D. Selected Items Table Page

Output Link

( https://kitchen-king-ii.blogspot.com/2025/08/d-selected-items-table.html )

Edit Link

( https://www.blogger.com/blog/post/edit/2135215566803965942/6158944135920736112 )

E. Coustomer Order Table

Output Link

( https://kitchen-king-ii.blogspot.com/2025/08/e-coustomer-order-table.html )

Edit Link

( https://www.blogger.com/blog/post/edit/2135215566803965942/8456635571499946092 )

F. Coustomer-Table Form

Output Link

( https://kitchen-king-ii.blogspot.com/2025/08/f-coustomer-table-form.html )

Edit Link

( https://www.blogger.com/blog/post/edit/2135215566803965942/4904168281798747529 )

Need code for the page:

A. Item card page

(address: https://kitchen-king-ii.blogspot.com/2025/08/item-card-green-salad.html )

B. Order form page

(address: https://kitchen-king-ii.blogspot.com/2025/08/items-order-form-selected-items-select.html )

C. Button/Link

(address: )

Code:

A. Item Card Page:

Code:

❌❌❌ Applying Page header less minimal iframe

<style>

/* Hide Blogger layout elements */

header, footer, .header, .footer, .sidebar, .post-footer, .post-header, .breadcrumbs, .blog-title, .post-title, h1.post-title {

display: none !important;

}

/* Reset background and padding */

body {

margin: 0;

background: #f9f9f9;

}

/* Table container styling */

#itemTableOuter {

max-width: 100%;

margin: 20px auto;

padding: 15px;

background: white;

border-radius: 10px;

box-shadow: 0px 3px 10px rgba(0,0,0,0.1);

}

h2 {

text-align: center;

margin-bottom: 15px;

}

/* Scroll container */

.scroll-container {

overflow-x: auto; /* enable left-right scroll */

overflow-y: hidden; /* hide vertical scroll */

white-space: nowrap; /* prevent wrapping */

-webkit-overflow-scrolling: touch; /* smooth on mobile */

}

table {

min-width: 800px; /* force horizontal scroll if smaller screen */

border-collapse: collapse;

width: 100%;

}

th, td {

padding: 8px;

text-align: center;

border: 1px solid #ddd;

}

th {

background-color: deepskyblue;

color: white;

}

button {

padding: 5px 10px;

border-radius: 5px;

border: none;

cursor: pointer;

color: white;

}

.minus-btn {

background-color: #f44336;

color: white;

}

.plus-btn {

background-color: #4CAF50;

color: white;

}

.remove-btn {

background-color: orange;

color: white;

}

/* Footer buttons */

.action-buttons {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

margin-top: 15px;

gap: 10px;

}

.action-buttons button {

flex: 1;

min-width: 100px;

font-size: 16px;

padding: 8px;

}

</style>

<h2>Your Selected Items</h2>

<thead>

<tr>

<th>Items</th>

<th>Quantity</th>

<th>Remove</th>

<th>Amount Rs.</th>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="7" style="text-align: right;"><strong>Total Amount Rs.:</strong></td>

</tr>

</tfoot>

</table>

</div>

<button onclick="window.close()" style="background-color: orange;">Close</button>

<button style="background-color: green;">Send to Order</button>

</div>

let selectedItems = JSON.parse(localStorage.getItem("selectedItems")) || [];

window.addEventListener("DOMContentLoaded", renderTable);

function renderTable() {

const tbody = document.getElementById("selectedItemsBody");

tbody.innerHTML = "";

selectedItems.forEach((item, index) => {

const row = tbody.insertRow();

row.innerHTML = `

<td>${index + 1}</td>

<td><button class="remove-btn" onclick="removeItem(${index})">Remove</button></td>

<td>${(item.qty * item.rate).toFixed(2)}</td>

});

updateTotal();

}

function changeQty(index, delta) {

selectedItems[index].qty = Math.max(1, selectedItems[index].qty + delta);

localStorage.setItem("selectedItems", JSON.stringify(selectedItems));

renderTable();

}

function removeItem(index) {

selectedItems.splice(index, 1);

localStorage.setItem("selectedItems", JSON.stringify(selectedItems));

renderTable();

}

function updateTotal() {

const total = selectedItems.reduce((sum, item) => sum + item.qty * item.rate, 0);

document.getElementById("totalAmount").textContent = total.toFixed(2);

}

</script>

❌❌❌ Applying Page header less minimal iframe

❌ Previous Working Table ok data

<h2>Your Selected Items</h2>

<thead>

<th>Items</th>

<th>Quantity</th>

<th>Remove</th>

<th>Amount Rs.</th>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="7" style="text-align: right;"><strong>Total Amount Rs.:</strong></td>

</tr>

</tfoot>

</table>

</div>

<button style="background-color: orange; color: white; border: none; border-radius: 7px; padding: 5px 15px; font-size: 18px;">Close</button>

<button style="background-color: green; color: white; border: none; border-radius: 7px; padding: 5px 15px; font-size: 18px;">Send to Order</button>

Add Item

</button>

</div>

let selectedItems = JSON.parse(localStorage.getItem("selectedItems")) || [];

window.addEventListener("DOMContentLoaded", renderTable);

function renderTable() {

const tbody = document.getElementById("selectedItemsBody");

tbody.innerHTML = "";

selectedItems.forEach((item, index) => {

const row = tbody.insertRow();

row.innerHTML = `

<td>${index + 1}</td>

<td><button onclick="removeItem(${index})">Remove</button></td>

<td class="amount">${(item.qty * item.rate).toFixed(2)}</td>

});

updateTotal();

}

function changeQty(index, delta) {

selectedItems[index].qty = Math.max(1, selectedItems[index].qty + delta);

localStorage.setItem("selectedItems", JSON.stringify(selectedItems));

renderTable();

}

function removeItem(index) {

selectedItems.splice(index, 1);

localStorage.setItem("selectedItems", JSON.stringify(selectedItems));

renderTable();

}

function updateTotal() {

const total = selectedItems.reduce((sum, item) => sum + item.qty * item.rate, 0);

document.getElementById("totalAmount").textContent = total.toFixed(2);

}

</script>

❌ Previous Working Table ok data

<h3>Green Salad</h3>

<p>Price: Rs. <span class="item-price">100</span></p>

</div>

<h3>Onion Salad</h3>

<p>Price: Rs. <span class="item-price">90</span></p>

</div>

<h3>Mixed Salad</h3>

<p>Price: Rs. <span class="item-price">120</span></p>

</div>

<h3>Fruit Salad</h3>

<p>Price: Rs. <span class="item-price">130</span></p>

</div>

* Function: openOrderForm

* Purpose:

* - Triggered when a user clicks on an item card.

* - Retrieves item details (ID, Name, Price) from the clicked card's data attributes.

* - Saves the item details in localStorage so they can be accessed in the order form page.

* - Redirects the user to the order form page (order-form.html).

function openOrderForm(card) {

// 🔹 1. Get item details from the clicked card's HTML data attributes

const itemId = card.dataset.id; // Unique ID for the item

const itemName = card.dataset.name; // Item name

const priceValue = card.dataset.price; // Item price

// 🔹 2. Store the selected item's details in localStorage

// This allows the order form page to retrieve them later

localStorage.setItem("selectedItemId", itemId);

localStorage.setItem("selectedItemName", itemName);

localStorage.setItem("selectedItemPrice", priceValue);

// 🔹 3. Redirect to the order form page

// This page will load and display the selected item info

window.location.href = "order-form.html";

}

</script>

(❌❌) match -1. Redirect to order form data transferring

(❌❌) Open order form in iframe on click item "Select Item" button/ open selected Items Table in iframe onclick form "submit" button

<h3>Green Salad</h3>

<p>Price: Rs. <span class="item-price">100</span></p>

<button onclick="openOrderForm(this)">Select Item</button>

</div>

<h3>Onion Salad</h3>

<p>Price: Rs. <span class="item-price">90</span></p>

<button onclick="openOrderForm(this)">Select Item</button>

</div>

<h3>Mixed Salad</h3>

<p>Price: Rs. <span class="item-price">120</span></p>

<button onclick="openOrderForm(this)">Select Item</button>

</div>

<h3>Fruit Salad</h3>

<p>Price: Rs. <span class="item-price">130</span></p>

<button onclick="openOrderForm(this)">Select Item</button>

</div>

<div id="formModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%;

background:rgba(0,0,0,0.7); justify-content:center; align-items:center; z-index:9999;">

</div>

function openOrderForm(btn) {

const card = btn.closest('.item-card');

const itemId = card.dataset.id;

const itemName = card.dataset.name;

const priceValue = card.dataset.price;

// Save item details in localStorage for the iframe page

localStorage.setItem("selectedItemId", itemId);

localStorage.setItem("selectedItemName", itemName);

localStorage.setItem("selectedItemPrice", priceValue);

// Open form in iframe inside modal

document.getElementById('orderFormIframe').src = "order-form.html";

document.getElementById('formModal').style.display = 'flex';

}

function closeModal() {

document.getElementById('formModal').style.display = 'none';

}

// ✅ Inside order-form.html, after clicking "Submit"

// you can open the selected items table in another iframe modal

function openItemsTable() {

document.getElementById('orderFormIframe').src = "selected-items-table.html";

}

</script>

(❌❌) Testing iframe

(❌❌) Item Auto Select iframe item card

<h3>Green Salad</h3>

<p>Price: Rs. <span class="item-price">100</span></p>

<button class="select-btn" onclick="selectItem(this)">Select Item</button>

</div>

<h3>Onion Salad</h3>

<p>Price: Rs. <span class="item-price">90</span></p>

<button class="select-btn" onclick="selectItem(this)">Select Item</button>

</div>

<h3>Mixed Salad</h3>

<p>Price: Rs. <span class="item-price">120</span></p>

<button class="select-btn" onclick="selectItem(this)">Select Item</button>

</div>

<h3>Fruit Salad</h3>

<p>Price: Rs. <span class="item-price">130</span></p>

<button class="select-btn" onclick="selectItem(this)">Select Item</button>

</div>

<style>

/* Small styling for selected effect */

.item-card {

border: 2px solid transparent;

padding: 10px;

margin: 8px;

border-radius: 8px;

display: inline-block;

background: #f9f9f9;

}

.item-card.selected {

border-color: green;

background: #eaffea;

}

.select-btn {

padding: 5px 10px;

margin-top: 5px;

background: green;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

}

</style>

function selectItem(button) {

// Remove "selected" class from all cards

document.querySelectorAll('.item-card').forEach(card => card.classList.remove('selected'));

// Mark the clicked card as selected

const card = button.closest('.item-card');

card.classList.add('selected');

// Auto open order form with the clicked card's data

openOrderForm(card);

}

function openOrderForm(card) {

const itemId = card.dataset.id;

const itemName = card.dataset.name;

const priceValue = card.dataset.price;

// Save in localStorage

localStorage.setItem("selectedItemId", itemId);

localStorage.setItem("selectedItemName", itemName);

localStorage.setItem("selectedItemPrice", priceValue);

// Redirect or load form in iframe

window.location.href = "order-form.html";

}

</script>

(❌❌) Item Auto Select iframe item card

(❌❌) match -2. Item code data redirect

<h3>Green Salad</h3>

<p>Price: Rs. <span class="item-price">100</span></p>

<button onclick="openOrderForm(this)">Select Item</button>

</div>

<h3>Onion Salad</h3>

<p>Price: Rs. <span class="item-price">90</span></p>

<button onclick="openOrderForm(this)">Select Item</button>

</div>

<h3>Mixed Salad</h3>

<p>Price: Rs. <span class="item-price">120</span></p>

<button onclick="openOrderForm(this)">Select Item</button>

</div>

<h3>Fruit Salad</h3>

<p>Price: Rs. <span class="item-price">130</span></p>

<button onclick="openOrderForm(this)">Select Item</button>

</div>

* Function: openOrderForm

* Purpose:

* - Triggered when "Select Item" button is clicked.

* - Finds the parent card's details (ID, Name, Price).

* - Saves them to localStorage for retrieval in the order form.

* - Loads the order form inside the iframe instead of redirecting.

function openOrderForm(button) {

// 1. Get the parent card element

const card = button.closest('.item-card');

// 2. Extract item details

const itemId = card.dataset.id;

const itemName = card.dataset.name;

const priceValue = card.dataset.price;

// 3. Store in localStorage so order form can use them

localStorage.setItem("selectedItemId", itemId);

localStorage.setItem("selectedItemName", itemName);

localStorage.setItem("selectedItemPrice", priceValue);

// 4. Load order form in iframe

document.getElementById("orderFormIframe").src = "order-form.html";

}

</script>

(❌❌) match -2. Item code data redirect

B. Order Form Page:

Code:

❌❌❌ Applying Page header less minimal iframe item Data received and send to table ❌ cancel

<style>

/* Hide Blogger layout elements */

header, footer, .header, .footer, .sidebar, .post-footer, .post-header, .blog-posts h1, .breadcrumbs {

display: none !important;

}

/* Remove background clutter */

body {

margin: 0;

background: #f9f9f9;

}

/* Center the form nicely */

#orderFormOuter {

max-width: 500px;

margin: 30px auto;

padding: 20px;

background: #fff;

border-radius: 10px;

box-shadow: 0px 3px 10px rgba(0,0,0,0.1);

}

#orderFormOuter h2 {

text-align: center;

margin-bottom: 20px;

}

label {

font-weight: bold;

display: block;

margin-top: 10px;

}

select, input, button {

width: 100%;

padding: 8px;

margin-top: 5px;

border: 1px solid #ccc;

border-radius: 5px;

}

button {

margin-top: 15px;

cursor: pointer;

font-weight: bold;

}

button:first-of-type {

background-color: deepskyblue;

color: white;

border: none;

}

button:last-of-type {

background-color: orange;

color: white;

border: none;

}

</style>

<h2>Order Form</h2>

<label>Select Item:</label>

<option data-price="" value="">-- Choose an item --</option>

<option data-price="120" value="Green Salad">Green Salad</option>

<option data-price="80" value="Onion Salad">Onion Salad</option>

<option data-price="250" value="Chicken Curry">Chicken Curry</option>

<option data-price="200" value="Paneer Butter Masala">Paneer Butter Masala</option>

</select>

<label>Quantity:</label>

<button onclick="handleSubmit()" type="button">Submit</button>

<button onclick="openSelectedItems()" type="button">Open Selected Items</button>

</form>

</div>

window.addEventListener("DOMContentLoaded", () => {

const selectedName = localStorage.getItem("selectedItemName") || "";

const selectedPrice = localStorage.getItem("selectedItemPrice") || "";

if (selectedName) {

document.querySelector(`#itemSelect option[value="${selectedName}"]`)?.setAttribute("selected", "selected");

document.getElementById("rateInput").value = selectedPrice;

}

});

function updateRate() {

const select = document.getElementById("itemSelect");

const price = select.options[select.selectedIndex].dataset.price || "";

document.getElementById("rateInput").value = price;

localStorage.setItem("selectedItemName", select.value);

localStorage.setItem("selectedItemPrice", price);

}

function handleSubmit() {

const select = document.getElementById("itemSelect");

const name = select.value.trim();

const rate = parseFloat(document.getElementById("rateInput").value) || 0;

const qty = parseInt(document.getElementById("quantity").value) || 0;

if (!name || rate <= 0 || qty <= 0) {

alert("Please select an item with a valid rate and quantity.");

return;

}

let selectedItems = JSON.parse(localStorage.getItem("selectedItems")) || [];

let existing = selectedItems.find(item => item.name === name);

if (existing) {

existing.qty += qty;

} else {

selectedItems.push({ name, rate, qty });

}

localStorage.setItem("selectedItems", JSON.stringify(selectedItems));

window.location.href = "https://kitchen-king-ii.blogspot.com/2025/08/d-selected-items-table.html#itemTableOuter";

}

function openSelectedItems() {

window.location.href = "https://kitchen-king-ii.blogspot.com/2025/08/d-selected-items-table.html#itemTableOuter";

}

</script>

❌❌❌ Applying Page header less minimal iframe item Data received and send to table

❌ Item Data received and send to table ok

<h2>Order Form</h2>

<label>Select Item:</label>

<option data-price="" value="">-- Choose an item --</option>

<option data-price="120" value="Green Salad">Green Salad</option>

<option data-price="80" value="Onion Salad">Onion Salad</option>

<option data-price="250" value="Chicken Curry">Chicken Curry</option>

<option data-price="200" value="Paneer Butter Masala">Paneer Butter Masala</option>

</select>

<label>Quantity:</label>

<button onclick="handleSubmit()" type="button">Submit</button>

<button onclick="openSelectedItems()" type="button">Open Selected Items</button>

</form>

</div>

window.addEventListener("DOMContentLoaded", () => {

// Restore previous selection if available

const selectedName = localStorage.getItem("selectedItemName") || "";

const selectedPrice = localStorage.getItem("selectedItemPrice") || "";

if (selectedName) {

document.querySelector(`#itemSelect option[value="${selectedName}"]`)?.setAttribute("selected", "selected");

document.getElementById("rateInput").value = selectedPrice;

}

});

function updateRate() {

const select = document.getElementById("itemSelect");

const price = select.options[select.selectedIndex].dataset.price || "";

document.getElementById("rateInput").value = price;

localStorage.setItem("selectedItemName", select.value);

localStorage.setItem("selectedItemPrice", price);

}

function handleSubmit() {

const select = document.getElementById("itemSelect");

const name = select.value.trim();

const rate = parseFloat(document.getElementById("rateInput").value) || 0;

const qty = parseInt(document.getElementById("quantity").value) || 0;

if (!name || rate <= 0 || qty <= 0) {

alert("Please select an item with a valid rate and quantity.");

return;

}

// Save to localStorage

let selectedItems = JSON.parse(localStorage.getItem("selectedItems")) || [];

let existing = selectedItems.find(item => item.name === name);

if (existing) {

existing.qty += qty;

} else {

selectedItems.push({ name, rate, qty });

}

localStorage.setItem("selectedItems", JSON.stringify(selectedItems));

// Redirect to your Blogger "post page"

window.location.href = "https://kitchen-king-ii.blogspot.com/2025/08/d-selected-items-table.html#itemTableOuter";

}

function openSelectedItems() {

window.location.href = "https://kitchen-king-ii.blogspot.com/2025/08/d-selected-items-table.html#itemTableOuter";

}

</script>

❌ Data received and send to table ok

(❌❌) match -1. Item code data transferring redirect

<h2>Order Form</h2>

<label>Select Item:</label>

<option value="" data-price="">-- Choose an item --</option>

<option value="Green Salad" data-price="120">Green Salad</option>

<option value="Onion Salad" data-price="80">Onion Salad</option>

<option value="Chicken Curry" data-price="250">Chicken Curry</option>

<option value="Paneer Butter Masala" data-price="200">Paneer Butter Masala</option>

</select>

<label>Quantity:</label>

<button type="button" onclick="handleSubmit()">Submit</button>

<button type="button" onclick="openSelectedItems()">Open Selected Items</button>

</form>

window.addEventListener("DOMContentLoaded", () => {

// Restore previous selection if available

const selectedName = localStorage.getItem("selectedItemName") || "";

const selectedPrice = localStorage.getItem("selectedItemPrice") || "";

if (selectedName) {

document.querySelector(`#itemSelect option[value="${selectedName}"]`)?.setAttribute("selected", "selected");

document.getElementById("rateInput").value = selectedPrice;

}

});

function updateRate() {

const select = document.getElementById("itemSelect");

const price = select.options[select.selectedIndex].dataset.price || "";

document.getElementById("rateInput").value = price;

localStorage.setItem("selectedItemName", select.value);

localStorage.setItem("selectedItemPrice", price);

}

function handleSubmit() {

const select = document.getElementById("itemSelect");

const name = select.value.trim();

const rate = parseFloat(document.getElementById("rateInput").value) || 0;

const qty = parseInt(document.getElementById("quantity").value) || 0;

if (!name || rate <= 0 || qty <= 0) {

alert("Please select an item with a valid rate and quantity.");

return;

}

// Save to localStorage

let selectedItems = JSON.parse(localStorage.getItem("selectedItems")) || [];

let existing = selectedItems.find(item => item.name === name);

if (existing) {

existing.qty += qty;

} else {

selectedItems.push({ name, rate, qty });

}

localStorage.setItem("selectedItems", JSON.stringify(selectedItems));

// Redirect to your Blogger "post page"

window.location.href = "https://kitchen-king-ii.blogspot.com/2025/08/d-selected-items-table.html";

}

function openSelectedItems() {

window.location.href = "https://kitchen-king-ii.blogspot.com/2025/08/d-selected-items-table.html";

}

</script>

❌❌ match -1. Item code data transferring redirect

❌❌ match -2. Item code data redirect

❌❌ Fast:

<form>

<option value="NVonionSalad102" data-price-id="VOSPrice">Onion Salad</option>

<option value="NVgreenSalad101" data-price-id="VGSPrice">Green Salad</option>

</select>

</form>

window.addEventListener("DOMContentLoaded", () => {

const selectedItemId = localStorage.getItem("selectedItemId");

const selectedPriceId = localStorage.getItem("selectedPriceId");

if (selectedItemId && selectedPriceId) {

const dropdown = document.getElementById("itemDropdown");

const rateInput = document.getElementById("rateInput");

// Auto-select item

const optionToSelect = [...dropdown.options].find(

opt => opt.value === selectedItemId

);

if (optionToSelect) {

optionToSelect.selected = true;

rateInput.value = optionToSelect.dataset.priceId;

}

// Clear localStorage to avoid reuse

localStorage.removeItem("selectedItemId");

localStorage.removeItem("selectedPriceId");

}

// Also allow manual item change

document.getElementById("itemDropdown").addEventListener("change", function () {

const selectedOption = this.options[this.selectedIndex];

const newPriceId = selectedOption.dataset.priceId;

document.getElementById("rateInput").value = newPriceId;

});

</script>

❌❌

❌❌ Last :

<option value="NVonionSalad102" data-price-id="120">Onion Salad</option>

<option value="NVgreenSalad101" data-price-id="100">Green Salad</option>

</select><br><br>

<button type="button" onclick="handleSubmit()">Submit</button>

<button type="button" onclick="openSelectedItems()">Open Selected Items</button>

<button type="button" onclick="location.reload()">Refresh</button>

<button type="button" onclick="closeForm()">Close</button>

</form>

window.addEventListener("DOMContentLoaded", () => {

const dropdown = document.getElementById("itemDropdown");

const rateInput = document.getElementById("rateInput");

dropdown.addEventListener("change", () => {

const option = dropdown.options[dropdown.selectedIndex];

rateInput.value = option.dataset.priceId;

});

function handleSubmit() {

const dropdown = document.getElementById("itemDropdown");

const option = dropdown.options[dropdown.selectedIndex];

const data = {

itemName: option.text,

rate: parseFloat(option.dataset.priceId),

quantity: 1

};

window.localStorage.setItem("latestSelection", JSON.stringify(data));

openSelectedItems();

}

function openSelectedItems() {

window.open("https://kitchen-king-ii.blogspot.com/2025/08/d-selected-items-table.html", "_blank", "width=800,height=600");

}

function closeForm() {

window.close();

}

</script>

C. Home/Button Page

Code:

<button onclick="openForm()">Open Order Form</button>

style="width: 100%; height: 500px; border: 1px solid #ccc;"

src=""></iframe>

</div>

function openForm() {

const iframe = document.getElementById("orderFormIframe");

// Load form in iframe

iframe.src = "https://kitchen-king-ii.blogspot.com/2025/08/order-form.html";

// Optional: Reset previous selection

localStorage.removeItem("selectedItemId");

localStorage.removeItem("selectedPriceId");

}

</script>

D. Selected Items Table Page:

Code:

<button onclick="addItemDirect('Green Salad', 120)">Add Green Salad</button>

<button onclick="addItemDirect('Paneer Tikka', 180)">Add Paneer Tikka</button>

<button onclick="addItemDirect('Veg Biryani', 150)">Add Veg Biryani</button>

<hr />

<h2>Your Selected Items</h2>

<thead>

<th>Items</th>

<th>Quantity</th>

<th>Remove</th>

<th>Amount Rs.</th>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="7" style="text-align: right; white-space: normal;"><strong>Total Amount Rs.:</strong></td>

</tr>

</tfoot>

</table>

</div>

<br />

<button onclick="closePopup()">Close</button>

</div> ❌❌ Last

❌❌ Last

let selectedItems = JSON.parse(localStorage.getItem("selectedItems")) || [];

window.addEventListener("DOMContentLoaded", () => {

renderTable();

});

// ✅ Function to add items directly

function addItemDirect(itemName, rate) {

// Check if item already exists

let existing = selectedItems.find(item => item.name === itemName);

if (existing) {

existing.qty++;

} else {

selectedItems.push({ name: itemName, rate: Number(rate), qty: 1 });

}

localStorage.setItem("selectedItems", JSON.stringify(selectedItems));

renderTable();

}

// ✅ Render table

function renderTable() {

const tbody = document.getElementById("selectedItemsBody");

tbody.innerHTML = "";

selectedItems.forEach((item, index) => {

const row = tbody.insertRow();

row.innerHTML = `

<td>${index + 1}</td>

<td><button onclick="removeRow(this)">Remove</button></td>

<td class="amount">${(item.qty * item.rate).toFixed(2)}</td>

});

updateTotal();

}

// 🔄 Change quantity

function changeQty(btn, delta) {

const row = btn.closest('tr');

const qtyCell = row.querySelector('.qty');

const rate = Number(row.querySelector('.rate').textContent);

let qty = Number(qtyCell.textContent);

qty = Math.max(1, qty + delta);

qtyCell.textContent = qty;

const index = row.rowIndex - 1;

selectedItems[index].qty = qty;

localStorage.setItem("selectedItems", JSON.stringify(selectedItems));

row.querySelector('.amount').textContent = (qty * rate).toFixed(2);

updateTotal();

}

// ❌ Remove item

function removeRow(btn) {

const row = btn.closest('tr');

const index = row.rowIndex - 1;

selectedItems.splice(index, 1);

localStorage.setItem("selectedItems", JSON.stringify(selectedItems));

row.remove();

updateSerials();

updateTotal();

}

// 🔢 Update serial numbers

function updateSerials() {

document.querySelectorAll("#selectedItemsBody tr").forEach((row, i) => {

row.cells[0].textContent = i + 1;

});

}

// 💰 Update total

function updateTotal() {

const sum = Array.from(document.querySelectorAll("#selectedItemsBody .amount"))

.reduce((acc, td) => acc + parseFloat(td.textContent), 0);

document.getElementById("totalAmount").textContent = sum.toFixed(2);

}

// ❌ Close popup (you can replace this with display:none if needed)

function closePopup() {

document.getElementById('selectedItemsPopup').style.display = 'none';

}

</script>

E. Coustomer Order Table Page:

Code:

F. Coustomer-Table Form

Code:

Search This Blog

New Kitchen King (II) form, Table, Select with code

✅✅ Duel function Data export and Import from item card page to and in Order Form page :

1. Duel function Data export and Import from item card page to and in Order Form page :

2. Create Selected Items Table

3. Create Order Table

4. Form submit button onclick open the table iframe and data live transfer in Selected Items Table with auto row adding

Conditions:

Data expert from item card to order form:
Data import in order form from item card:

F. Coustomer-Table Form

Code:

A. Item Card Page:

Code:

B. Order Form Page:

Code:

C. Home/Button Page

Code:

D. Selected Items Table Page:

Code:

E. Coustomer Order Table Page:

F. Coustomer-Table Form

Comments

Post a Comment

Popular posts from this blog

Form For Table no. And Coustomer Details:

Kitchen Order Table:

Selected Items Table: Demo

✅✅ Duel function Data export and Import from item card page to and in Order Form page :

1. Duel function Data export and Import from item card page to and in Order Form page :

2. Create Selected Items Table

3. Create Order Table

4. Form submit button onclick open the table iframe and data live transfer in Selected Items Table with auto row adding

Conditions:

Data expert from item card to order form:Data import in order form from item card:

F. Coustomer-Table Form

Code:

A. Item Card Page:

Code:

B. Order Form Page:

Code:

C. Home/Button Page

Code:

D. Selected Items Table Page:

Code:

E. Coustomer Order Table Page:

F. Coustomer-Table Form

Comments

Post a Comment

Popular posts from this blog

Form For Table no. And Coustomer Details:

Kitchen Order Table:

Selected Items Table: Demo

Data expert from item card to order form:
Data import in order form from item card: