I’m working on a web project where I have two form tags on the same page, each serving a different purpose. However, it seems like the inner form tag is not functioning correctly. I suspect it might be due to the nested structure of the forms.
Here’s the structure:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Cart | BeautySpot - HTML Template for Beauty Salons</title>
<link rel="shortcut icon" href="images/favicon.ico">
<!-- STYLESHEETS : begin -->
<link rel="stylesheet" type="text/css" href="assets/css/general.css"><!-- Default styles generated from assets/scss/general.scss (do not edit) -->
<link rel="stylesheet" type="text/css" href="assets/css/color-schemes/default.css"><!-- Default color scheme generated from assets/scss/color-schemes/default.scss (change to other pre-defined or custom color scheme) -->
<link rel="stylesheet" type="text/css" href="style.css"><!-- Place your own CSS into this file -->
<!-- STYLESHEETS : end -->
</head>
<body>
<!-- WRAPPER : begin -->
<div id="wrapper">
<!-- HEADER : begin -->
<%- html.header %>
<!-- HEADER : end -->
<!-- CORE : begin -->
<div id="core" class="core--narrow">
<div class="core__inner">
<!-- PAGE HEADER : begin -->
<div class="page-header">
<div class="page-header__inner">
<div class="lsvr-container">
<div class="page-header__content">
<h1 class="page-header__title">Your Cart</h1>
<!-- BREADCRUMBS : begin -->
<div class="breadcrumbs">
<div class="breadcrumbs__inner">
<ul class="breadcrumbs__list">
<li class="breadcrumbs__item">
<a href="index.html" class="breadcrumbs__link">Home</a>
</li>
<li class="breadcrumbs__item">
<a href="product-archive.html" class="breadcrumbs__link">Store</a>
</li>
</ul>
</div>
</div>
<!-- BREADCRUMBS : end -->
</div>
</div>
</div>
</div>
<!-- PAGE HEADER : end -->
<!-- CORE COLUMNS : begin -->
<div class="core__columns">
<div class="core__columns-inner">
<div class="lsvr-container">
<!-- MAIN : begin -->
<main id="main">
<div class="main__inner">
<!-- PAGE : begin -->
<div class="page product-post-page product-post-order product-post-order--cart">
<div class="page__content">
<!-- PRODUCT CART : begin -->
<form class="product-cart" method="post" action="http://localhost:4000/checkout">
<!-- CART LIST : begin -->
<ul class="product-cart__list">
<% products.forEach(product => { %>
<!-- CART ITEM : begin -->
<li class="product-cart__item">
<!-- ITEM ITEM COL : begin -->
<div class="product-cart__item-col product-cart__item-col--thumb">
<!-- ITEM THUMB : begin -->
<p class="product-cart__item-thumb">
<a href="product-single.html" class="product-cart__item-thumb-link">
<img src="<%= product.image %>" class="product-cart__item-thumb-img" alt="<%= product.name %>">
</a>
</p>
<!-- ITEM THUMB : end -->
</div>
<!-- ITEM ITEM COL : end -->
<!-- ITEM ITEM COL : begin -->
<div class="product-cart__item-col product-cart__item-col--title">
<!-- ITEM TITLE : begin -->
<h4 class="product-cart__item-title">
<a href="product-single.html" class="product-cart__item-title-link"><%= product.name %></a>
</h4>
<!-- ITEM TITLE : end -->
<!-- ITEM STATUS : begin -->
<p class="product-cart__item-status product-cart__item-status--in-stock"><!-- You can use "in-stock", "on-order" and "unavailable" modifiers -->
<%= product.status %>
</p>
<!-- ITEM STATUS : end -->
</div>
<!-- ITEM ITEM COL : end -->
<!-- ITEM ITEM COL : begin -->
<div class="product-cart__item-col product-cart__item-col--quantity">
<!-- ITEM QUANTITY : begin -->
<p class="product-cart__item-quantity quantity-field">
<input type="text" class="quantity-field__input" value="1">
<button type="button" class="quantity-field__btn quantity-field__btn--add" title="Add one">
<span class="quantity-field__btn-icon" aria-hidden="true"></span>
</button>
<button type="button" class="quantity-field__btn quantity-field__btn--remove" title="Remove one">
<span class="quantity-field__btn-icon" aria-hidden="true"></span>
</button>
</p>
<!-- ITEM QUANTITY : end -->
</div>
<!-- ITEM ITEM COL : end -->
<!-- ITEM ITEM COL : begin -->
<div class="product-cart__item-col product-cart__item-col--price">
<!-- ITEM PRICE : begin -->
<p class="product-cart__item-price">
<%= product.price %>
</p>
<!-- ITEM PRICE : end -->
</div>
<!-- ITEM ITEM COL : end -->
<!-- ITEM ITEM COL : begin -->
<div class="product-cart__item-col product-cart__item-col--remove">
<!-- ITEM REMOVE : begin -->
<div class="product-cart__item-col product-cart__item-col--remove">
<form action="/remove-from-cart" method="POST">
<input type="hidden" name="productName" value="<%= product.name %>">
<button type="submit" class="product-cart__item-remove-btn">
<span class="product-cart__item-remove-btn-icon" aria-hidden="true"></span>
</button>
</form>
</div>
<!-- ITEM REMOVE : end -->
</div>
<!-- ITEM ITEM COL : end -->
</li>
<!-- CART ITEM : end -->
<% }); %>
</ul>
<!-- CART LIST : end -->
<!-- CART SUMMARY : begin -->
<div class="product-cart__summary">
<!-- CART COUPON : begin -->
<p class="product-cart__coupon">
<input type="text" class="product-cart__coupon-input" placeholder="Coupon Code">
<button type="button" class="product-cart__coupon-btn lsvr-button lsvr-button--type-2">Apply Coupon</button>
</p>
<!-- CART COUPON : end -->
<!-- CART TOTAL : begin -->
<p class="product-cart__total">
<span class="product-cart__total-label">Total</span>
<strong class="product-cart__total-price">$121.60</strong>
</p>
<!-- CART TOTAL : end -->
</div>
<!-- CART SUMMARY : end -->
<!-- ORDER FOOTER : begin -->
<div class="product-order__footer">
<!-- FOOTER BACK : begin -->
<p class="product-order__footer-back">
<a href="product-archive.html" class="product-order__footer-back-link">Back to Store</a>
</p>
<!-- FOOTER BACK : end -->
<!-- FOOTER CHECKOUT : begin -->
<p class="product-order__footer-checkout">
<button type="submit" class="product-order__footer-checkout-btn lsvr-button">To Checkout</button>
</p>
<!-- FOOTER CHECKOUT : end -->
</div>
<!-- ORDER FOOTER : end -->
</form>
<!-- PRODUCT CART : end -->
</div>
</div>
<!-- PAGE : end -->
</div>
</main>
<!-- MAIN : end -->
</div>
</div>
</div>
<!-- CORE COLUMNS : end -->
</div>
</div>
<!-- CORE : end -->
<!-- FOOTER : begin -->
<%- html.footer %>
<!-- FOOTER : end -->
</div>
<!-- WRAPPER : end -->
<!-- SCRIPTS : begin -->
<script src="assets/js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="assets/js/third-party-scripts.min.js" type="text/javascript"></script>
<script src="assets/js/scripts.js" type="text/javascript"></script>
<!-- SCRIPTS : end -->
</body>
</html>
Despite setting different action attributes and ensuring proper method attributes, it seems like the inner form is not working as expected. How can I modify the HTML structure to ensure that both form tags work independently without interfering with each other’s functionality?
Any insights or suggestions would be greatly appreciated. Thank you!