通过文本框输入商品信息点击按钮将商品信息列举出来点击加入购物车商品信息添加到表单中

Question

通过文本框输入商品信息点击按钮将商品信息列举出来点击加入购物车商品信息添加到表单中

Answer 1

引用 皆我百晓生 小程序回复内容作答：
你可以使用以下代码实现上述功能：

HTML代码：

<input type="text" id="productInput" placeholder="输入商品信息">
<button onclick="listProduct()">添加商品</button>

<div id="productList"></div>

<form id="cartForm">
  <button onclick="addToCart()">加入购物车</button>
</form>

JavaScript代码：

function listProduct() {
  var productInput = document.getElementById("productInput");
  var productList = document.getElementById("productList");
  var productInfo = productInput.value;
  var productItem = document.createElement("p");
  productItem.textContent = productInfo;
  productList.appendChild(productItem);
  productInput.value = "";
}

function addToCart() {
  var productList = document.getElementById("productList");
  var cartForm = document.getElementById("cartForm");
  var productItems = productList.getElementsByTagName("p");
  
  for (var i = 0; i < productItems.length; i++) {
    var productInfo = productItems[i].textContent;
    var productInput = document.createElement("input");
    productInput.type = "hidden";
    productInput.name = "cartItem";
    productInput.value = productInfo;
    cartForm.appendChild(productInput);
  }
}

上述代码中，首先通过listProduct函数将输入框中的商品信息添加到列表中。然后，通过addToCart函数将列表中的商品信息添加到表单中作为隐藏的表单项（input元素的type属性为hidden），这样在提交表单时就可以将购物车中选中的商品信息发送给服务器进行处理。