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

Question

我有一个 PHP 生成的产品列表 link，点击后会将产品添加到购物车。目前，在 link 中有一定数量的 '1' 硬编码，例如

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

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

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

我可能以错误的方式看待这个问题，因此不胜感激。

谢谢！

编辑

这一定与我的产品列表在 table 中有关。当我将您的示例更改为使用 table 而不是 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] 在 link 中是不变的。它们用于此页面上每个产品的目标 PHP 脚本。唯一产品之间变化的是 sku 的价值。

Answer 1

您可以为此使用 javascript 而不是一个大表格和复杂的 php 代码。只需将每个 link 放入带有 <input type="number"/> 的包装纸中，这样就可以增加您的产品数量。然后你可以更改 URI 进行结帐。我在下面添加了有关如何执行此操作的工作示例。

希望对您有所帮助！

更新

因为你没有展示你的代码，所以很难理解你这边有什么问题。所以向我们展示你做了什么，让我们找出问题而不是指出问题 ;)

我没有看到使用 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 简单地获取属性的值并更新每个相应的结帐 link。此外，您的案例不起作用，因为在 RegExp 中，[ 和 ] 等符号应该被转义 -> \[ 和 \].

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, '' + key + "=" + value + '');
  } 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>

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

How to add a user input field to a URL

php

forms

user-input