How to add a user input field to a URL - php

Question

I have a PHP generated list of product links that, when clicked, adds a product to a shopping cart. At present, there's a quantity of '1' hard-coded in the links, e.g.
Add To Cart
I'd like to add a quantity field to each item in the list, so a customer can add the quantity they want to the cart.
This list doesn't use a form, so how could I introduce a user input qty field and use it in each link? My searches have turned up nothing, so I take it that it can't be done the way I have it set up now. No matter how I change this list, I need to pass an array to the /shop/checkout PHP script.
I'm probably looking at this the wrong way, so any pointers would be appreciated.
Thanks!
EDIT
It must have something to do with the fact that my product list is in a table. When I change your example to use a table instead of divs, it breaks. Here's a sample:
<table class="products_list">
<tr class="product_list--item">
<td> 12486XC4 </td>
<td> Amount: <span class="item_display--1[qty]">1</span> </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> </td>
<td> Add to cart </td>
</tr>
<tr class="product_list--item">
<td> 13486XC5 </td>
<td> Amount: <span class="item_display--1[qty]">1</span> </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> </td>
<td> Add to cart </td>
</tr>
<tr class="product_list--item">
<td> 14486XC6 </td>
<td> Amount: <span class="item_display--1[qty]">1</span> </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> </td>
<td> Add to cart </td>
</tr>
</table>
Also, 1[sku] and 1[qty] are invariable in the links. They are used in the destination PHP script for each product on this page. The only thing that changes from product to product is the value of the sku.

Answer 1

You can use javascript for this instead of one big form and complex php code. Simply put each link in the wrapper with <input type="number"/> that will allow to add quantity to your product. Then you can change URI for checkout. Working example with comments of how to do this i have add below.
Hope that this will help!
Update
Because you are not showing your code its hard to understand what is not working on your side. So show us what you did and lets find out the issues instead of pin pointing the problem ;)
I don't see any issues with rendering your template using php and putting values of proper variables as a values of html attributes.
You can add name attribute which can be equal to your qty array name for proper sku. Example
<input name="1[qty]" class="item_qty" type=number min="1" max="100" value="1" />.
In php it will look like this (and again this is just an example of how you can achieve your result)
<input name="<?="1[qty]={$qty}";?>" class="item_qty" type=number min="<?=$qty;?>" max="100" value="1" />
<?=?> is an echo tag. You can replace with <?php ?>
Later you can simply grab the value of the attribute using JS and update each corresponding checkout link. Moreover your case didn't work because in RegExp symbols like [ and ] should be escaped -> \[ and \].
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> </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> </td>
<td> Add to cart </td>
</tr>
<tr class="product_list--item">
<td> 13486XC5 </td>
<td> Amount: <span class="item_display--1[qty]">1</span> </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> </td>
<td> Add to cart </td>
</tr>
<tr class="product_list--item">
<td> 14486XC6 </td>
<td> Amount: <span class="item_display--1[qty]">1</span> </td>
<td> <input class="item_qty" id="itm_qty" type="number" min="1" max="100" value="1" size="5" /> </td>
<td> Add to cart </td>
</tr>
</table>