изменить несколько скрытых входных значений, используя раскрывающийся список и jquery

Question

Эй, у меня проблемы с этой проблемой, и я даже не знаю, с чего начать.Я использую foxycart для сайта электронной коммерции, который создаю для своей подруги, поэтому отправка значений в «корзину» ограничена теми именами ввода, которые ищет foxycart.IE;имя, цена, product_sku.

У меня есть крошечный бэкэнд CMS, который позволяет вам добавлять разные размеры, sku для этих размеров и другую цену для этого размера.

Итак, яЯ использую 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" />

Это хорошо работает.отправляет имя, цену и номер в корзину.

Я сделал выпадающий список, в котором перечислены различные размеры / цены, связанные с этим продуктом.Я настроил это так, что выбор другого размера изменяет цену:

<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 и скрытый ввод цены (чтобы вы могли видеть новую цену покупки) и в корзину (таким образом, в корзине отображается цена продукта, который вы хотите приобрести)

А теперь вопрос: как мне установить это так, чтобы выбор другого размера / цены изменилскрытые входные данные, так что 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, название продукта, цена, sku.(Это значение по умолчанию)

Изменение в раскрывающемся окне: с помощью jquery динамически меняйте скрытые входные данные, добавляя новую информацию, основанную на product_id, и размер, выбранный в раскрывающемся окне (Обновите 4 скрытых входных данных на основезначение из одного значения в меню выбора)

Answer 1

Вместо использования AJAX при изменении поля выбора можно также загрузить SKU и идентификатор продукта при загрузке страницы и добавить их в качестве данных в теги параметров. Один из способов сделать это - добавить их в виде классов, например:

<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();

Вот рабочий пример & # x2192;

Answer 2

Использование Ajax - путь.Когда значение раскрывающегося списка изменится, вы захотите вызвать Ajax-вызов метода PHP, который, как я полагаю, запросит базу данных бэкэнда для получения необходимой информации, используя значение раскрывающегося списка в качестве параметра, а затем вернет эту информацию для заполнения скрытых полей.Все эти шаги должны произойти в вашем вызове Ajax.