如何将用户输入字段添加到 URL

Question

我有一个 PHP 生成的产品链接列表，单击该列表会将产品添加到购物车中。目前，链接中有一定数量的“1”硬编码，例如

<a href="/shop/checkout?1[sku]=$sku&1[qty]=1"> Add To Cart </a>

我想为列表中的每个项目添加一个数量字段，以便客户可以将他们想要的数量添加到购物车中。

此列表不使用表单，那么如何引入用户输入数量字段并在每个链接中使用它？我的搜索一无所获，所以我认为它不能按照我现在设置的方式完成。无论我如何更改此列表，我都需要将一个数组传递给 /shop/checkout PHP 脚本。

我可能看错了，所以任何指针都将不胜感激。

谢谢！

编辑

这一定与我的产品列表在表格中这一事实有关。当我将您的示例更改为使用表格而不是 div 时，它会中断。这是一个示例：

<table class="products_list">
<tr class="product_list--item">
    <td> 12486XC4 </td>
    <td> Amount: <span class="item_display--1[qty]">1</span> &nbsp; </td>
    <td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> &nbsp; </td>
    <td> <a href="https://www.example.com/checkout/?1[sku]=12486XC4&1[qty]=1">Add to cart</a> </td>
</tr>
<tr class="product_list--item">
    <td> 13486XC5 </td>
    <td> Amount: <span class="item_display--1[qty]">1</span> &nbsp; </td>
    <td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> &nbsp; </td>
    <td> <a href="https://www.example.com/checkout/?1[sku]=13486XC5&1[qty]=1">Add to cart</a> </td>
</tr>
<tr class="product_list--item">
    <td> 14486XC6 </td>
    <td> Amount: <span class="item_display--1[qty]">1</span> &nbsp; </td>
    <td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> &nbsp; </td>
    <td> <a href="https://www.example.com/checkout/?1[sku]=14486XC6&1[qty]=1">Add to cart</a> </td>
</tr>
</table>

另外，1[sku] 和 1[qty] 在链接中是不变的。它们用于此页面上每个产品的目标 PHP 脚本。 唯一从产品到产品的变化是 sku 的价值。

Answer 1

您可以使用 javascript 来代替一个大表格和复杂的 php 代码。只需将每个链接放在带有<input type="number"/> 的包装器中，这将允许为您的产品添加数量。然后您可以更改URI 进行结帐。我在下面添加了如何使用 cmets 的工作示例。

希望这会有所帮助！

更新

因为您没有展示您的代码，所以很难理解哪些内容对您不利。所以告诉我们你做了什么，让我们找出问题而不是指出问题;)

我没有看到使用 php 呈现模板并将适当变量的值作为 html 属性值的任何问题。 您可以添加 name 属性，该属性可以等于您的 qty 数组名称以获得正确的 sku。示例

<input name="1[qty]" class="item_qty" type=number min="1" max="100" value="1" />.

在 php 中它看起来像这样（这只是一个示例，说明如何实现结果）

<input name="<?="1[qty]={$qty}";?>" class="item_qty" type=number min="<?=$qty;?>" max="100" value="1" />

<?=?> 是一个回显标签。你可以替换成<?php ?>

稍后您可以简单地使用 JS 获取属性的值并更新每个相应的结帐链接。此外，您的情况不起作用，因为在正则表达式中，[ 和 ] 之类的符号应该被转义-> \[ 和 \]。

function addSlashes(string, vowels) {
  let length = vowels.length;
  let finalString = "";
  let startOffset = 0;
  let endOffset = 0;
  for (let i = 0; i < length; i++) {
    if ((endOffset = string.indexOf(vowels[i])) !== -1) {
      finalString += string.substring(startOffset, endOffset) + "\\";
      if (endOffset === string.length - 1) {
        finalString += string[string.length - 1];
      }
      startOffset = endOffset;
    }
  }

  return finalString;
}

function updateQueryStringParameter(uri, key, value) {
  let escapedKey = addSlashes(key, ["[", "]"]);
  let re = new RegExp("([?&])" + escapedKey + "=.*?(&|$)", "i");
  let separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  } else {
    return uri + separator + key + "=" + value;
  }
}

function displayQuantityForProduct(element, text = "") {
  element.textContent = text;
}

const inputs = document.querySelectorAll(".product_list--item .item_qty");
const length = inputs.length;

for (let i = 0; i < length; i++) {
  inputs[i].addEventListener("input", function() {
    // also add check whenever input value is not an empty string and its an integer which is bigger or equal to 1
    if (this.value && parseInt(this.value) >= 1) {
      // selfName 
      let selfName = "1[qty]";
      let children = this.closest(".product_list--item").children;
      // children will consist of td elements from each tr with class product_list--item in your table
      // [0] first element of the array is sku (1) <td> 12486XC4 </td>
      // [1] second element of the array is amount with span (2)
      // [2] is input with qty (3)
      // [3] is Add to cart link (4) and so on...
      let displayQty = children[1].firstElementChild;
      let addToCartLink = children[3].firstElementChild;
      let newUri = updateQueryStringParameter(
        addToCartLink.getAttribute("href"),
        selfName,
        this.value
      );
      displayQuantityForProduct(displayQty, this.value);
      addToCartLink.setAttribute("href", newUri);
    }
  });
}

<table class="products_list">
  <tr class="product_list--item">
    <td> 12486XC4 </td>
    <td> Amount: <span class="item_display--1[qty]">1</span> &nbsp; </td>
    <td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> &nbsp; </td>
    <td> <a href="https://www.example.com/checkout/?1[sku]=12486XC4&1[qty]=1">Add to cart</a> </td>
  </tr>
  <tr class="product_list--item">
    <td> 13486XC5 </td>
    <td> Amount: <span class="item_display--1[qty]">1</span> &nbsp; </td>
    <td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> &nbsp; </td>
    <td> <a href="https://www.example.com/checkout/?1[sku]=13486XC5&1[qty]=1">Add to cart</a> </td>
  </tr>
  <tr class="product_list--item">
    <td> 14486XC6 </td>
    <td> Amount: <span class="item_display--1[qty]">1</span> &nbsp; </td>
    <td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> &nbsp; </td>
    <td> <a href="https://www.example.com/checkout/?1[sku]=14486XC6&1[qty]=1">Add to cart</a> </td>
  </tr>
</table>