使用下拉框和jquery更改多个隐藏的输入值

时间:2011-03-13 17:20:30

标签: ajax jquery

嘿,我遇到这个问题有些麻烦,我甚至不知道从哪里开始。 我正在为我的女朋友建设的电子商务网站使用foxycart,因此向“购物车”发送值仅限于foxycart正在寻找的输入名称。 IE浏览器;名称,价格,product_sku。

我有一个很小的CMS后端,允许您添加不同的尺寸,尺寸和尺寸的不同尺寸。

所以,由于我正在使用foxycart,我需要隐藏的输入来将值发送到购物车。

<input type="hidden" name="name" value="Test" />
<input type="hidden" id="price" name="price" value="19.99" />
<input type="hidden" id="product_sku" name="product_sku" value="sku3445" />
<input type="hidden" id="product_id" name="product_id" value="123" />

这很好用。将名称,价格和sku发送到购物车。

我已经制作了一个下拉框,其中列出了与该产品相关的不同尺寸/价格。我已经设置好了,所以选择不同的尺寸会改变价格:

<select id="single" name="options" />
<option name="option_price" value="19.99">Default - $19.99</option>
<option name="option_price" value="18.99">Test Size: 18.99</option>
</select>

function displayVals() {
var singleValues = $("#single").val();
("#item_price").html(singleValues);
$("#price").val(singleValues);
}
$("select").change(displayVals);
displayVals();

这也有效,将选择的价格发送到div并隐藏价格输入(这样您可以看到新的购买价格)和购物车(因此购物车显示您要购买的产品的价格)< / p>

现在问题是: 如何设置此选项以便选择不同的尺寸/价格将更改隐藏的输入,以便更新product_sku和尺寸名称以及价格?

我想我必须使用一些Jquery.ajax()调用,但不知道......

这会有用吗?:

Jquery的:

$(document).ready(function(){
    $("form#get_stuff").change(function() {
    var product_id= $('#product_id').attr('value');

        $.ajax({
            type: "POST",
            url: get_stuff.php,
            data: "product_id="+product_id,
            success: function(data){
$('#product_inputs').html(data);    
            }
        });
    return false;
    });
});

'数据'是: 从php页面?

这是我第一次涉足Jquery ajax,所以我真的不知道。

编辑:

对不起,我刚看过这个,这有点令人困惑.... 这是我正在努力完成的工作流程:

页面加载: 使用php,echo产品名称,价格,sku。 (这是默认值)

投递箱改变: 使用jquery,使用基于product_id的新信息动态更改隐藏的输入,以及从下拉框中选择的大小(基于选择菜单中一个值的值更新4个隐藏输入)

2 个答案:

答案 0 :(得分:1)

当选择框更改时,您还可以在加载页面时加载SKU和产品ID,并将其作为选项标签上的数据添加,而不是使用AJAX。一种方法是将它们添加为类似的类:

<select id="single" name="options">
    <option name="option_price" class="sku3445 id123" value="19.99">Default - $19.99</option>
    <option name="option_price" class="sku3554 id321" value="18.99">Test Size: 18.99</option>
</select>

然后使用一点RegEx,您可以从change()函数中的选定选项中提取这些值,并相应地更新隐藏的输入:

function displayVals() {
    var $single = $('#single'),
        singleValues = $single.val(),
        singleClasses = $single.find('option:selected').attr('class'),
        singleSKU = singleClasses.match(/\bsku\d+\b/)[0],
        singleID = singleClasses.match(/\bid\d+\b/)[0].replace('id','');

    $("#item_price").html(singleValues);
    $("#price").val(singleValues);
    $('#product_sku').val(singleSKU);
    $('#product_id').val(singleID);
}
$("select").change(displayVals);
displayVals();

Here is a working example →

答案 1 :(得分:0)

使用Ajax是可行的方法。当下拉值更改时,您将需要触发对PHP方法的Ajax调用,我假设它将使用下拉值作为参数查询后端数据库以获取必要信息,然后返回该信息以填充隐藏文件。所有这些步骤都应该在您的Ajax调用中发生。