javascript - 使用 Javascript/JQuery 将页面上的数据存储到变量

Question

因此，我尝试在单击按钮时将数据存储到页面上的变量，有多个按钮，并且需要存储该特定按钮的数据。这些按钮中的每一个都嵌套在 <form onsubmit></form> 内。我需要额外的所有数据都在不同的形式中 <input>和<div>标签。那么使用 javascript 或 jquery 如何选择特定的值和标签。因此，当单击按钮时，会将产品添加到购物车中，我想获取产品编号、价格和数量并将它们存储到我自己的变量中。单击按钮时，论坛会调用 onsubmit="ShoppingCartAddAJAX( this ); 所以我想将此数据存储在 ShoppingCartAddAJAX 函数中。

这是页面上的其中一个表单的样子。

<form method="post" name="addtocart-501" onsubmit="ShoppingCartAddAJAX( this ); return false;">
    <input type="hidden" name="formName" value="ShoppingCartAddAJAX" />
    <input type="hidden" name="productNumber" value="758201" />
    <input id="qtyproduct" type="hidden" class="hiddenqty" name="dmst_Qty_2805" value="1" />
                    <div class="price">  
                        <div class="pricenew singleprice">
                            $7.99
                        </div>
                    </div>
                </a>

            </div>
        </div>
    </li>
</form>

所以我一直在尝试通过这样做来获取这些数据。

var pn = $('input[name$="productNumber"]').val();
var qty = $('input[id$="qtyproduct"]').val();

在我的 javascript 文件中，该函数如下所示:

function ShoppingCartAddAJAX(formElement, productNumber) {

var pn = $('formElement.input[name$="productNumber"]').val();
var aa = $('formElement[name$="productNumber"]').val();
var qty = $('input[id$="qtyproduct"]').val();
}

但是还有更多代码...只是显示该函数正在传递 formElement 和 ProductNumber。

但这给了我页面上第一个产品的产品编号和数量，我需要用户决定单击哪个按钮的数据，并且页面上有多个按钮，而不仅仅是一个。我希望当单击按钮并触发该功能时，有一种方法可以查看它来自哪个论坛，然后提取该数据。我也希望能够获得价格，但它存储在 <div class="pricenew singleprice"> $7.99</div> 中.

非常感谢任何帮助。

Answer 1

您正在获取第一条记录的产品编号和数量，因为表单中有多个名称为 productNumber 的输入字段(根据您的描述)。所以这里基本上发生的是当你调用 $('input[name="productNumber"]').val() jquery 返回第一个输入字段的值。相反，请在您的 ShoppingCartAddAJAX 函数中执行类似的操作。

function ShoppingCartAddAJAX(form)
{
    // Find child an element inside our form with the id of "qtyproduct"
    // I used "find("#qtyproduct")" method so it searches anything nested inside your specific form element
    // You can use "children("#qtyproduct")" method also

    var qty = $(form).find("#qtyproduct").val();
    var pn  = $(form).find("input[name='productNumber']").val();
    var pp  = $(form).find(".pricenew.singleprice").text();
}