Передать значение input radio в другой input
Имеется каталог товаров.
У каждого товара есть варианты выбора в виде input type="radio". Также у каждого товара есть кнопка "заказать" по нажатию на которую появляется форма обратной связи содержащая скрытый инпут. Форма обратной связи вызывается для всех товаров одна и та же. ID и label для инпутов генерируются скриптом
<script>
$(function getValue() {
$('input[type="radio"]').each(function(indx, el){
$(this).next().attr("for" , "radio"+indx)
this.id = "radio"+indx
var id = "radio"+indx
});
});
</script>
сами инпуты:
<div class="wrapper_all_radio">
<div class="radio_wrapper">
<input type="radio" id="radio" name="radio" />
<label for="radio"><span></span>23 см</label><span class="price_tovar_item">8.5 руб.</span>
</div>
<div style="clear: both"></div>
<div class="radio_wrapper">
<input type="radio" id="radio" name="radio" />
<label for="radio"><span></span>30 см</label><span class="price_tovar_item">30 руб.</span>
</div>
<div style="clear: both"></div>
<div class="radio_wrapper">
<input type="radio" id="radio" name="radio" />
<label for="radio"><span></span>36 см</label><span class="price_tovar_item">15 руб.</span>
</div>
</div>
кнопка заказать: <a class="tovar_item_link">заказать</a> Собственно вопрос - как передать значение выбранного инпута в форму? |
Цитата:
|
alex-tiesto, у тебя
id="radio" повторяется у многих элементов... ИД должно быть уникально на странице. |
Цитата:
Касаемо засекреченной информации - не понял Вас! Скидываю ссылку на страницу с товарами ссылка, возможно так понятней будет |
Цитата:
|
Цитата:
<input id="radio3" name="wrapper_all_radio1" type="radio">
<label for="radio3"><span></span>23 см</label><span class="price_tovar_item">8.5 руб.</span>
Я так понимаю, что в форму, которая тоже хрен знает чем оперирует, нужно взять не значение кнопки, ибо его и близко нет в них, а текст ее метки и это впялить в форму? Очередной магазин торгующий по принципы абы было? |
value там прописаны тестово только для первого товара.
Касаемо магазина торгующего абы чем.. там вообще-то пиццерия )) Буду рад за помощь! |
Цитата:
А проверять надо потому, что формой в магазине нормальном, а не торгующем абы как, и не важно чем, хоть кирпичами, никогда не станут принимать "Название пиццы 1" и подобное, а исключительно идентификатор товара или артикул, или еще что либо уникальное определяющее товар в базе. Ваша же форма вполне скушает от заказчика и "Хрень какая-то". Вот что значит абы как. |
Цитата:
Пример скрипта можете написать? |
Цитата:
То есть, если по уму, без глупостей "Название пиццы 1" и подобных, то не только серверу легче будет, но и клиенте, так как ему придется оперировать не с кучей абстрактных наборов ID и классов, а всего лишь с элементами текущей формы, коих немного и они конкретно определены. А значит "пример кода" будет базироваться совсем на ином. Код написанный требует отладки, и если бы вы такое делали, то в коде под jQuery 1.11.0 такого бы не было, сразу после первой же отладки:
$(".radio_wrapper").live("change", function() {
$("#value_product_2").val($(this).find("input[type=radio]:checked").attr("value"));
});
Так как метода .live() в этой версии JQ нет. Но даже если бы и был, или же как положено для этой версии использовался метод .on(), сама по себе задача описывающее это мягко выражаясь глупа для этого HTML:
<div class="wrapper_all_radio0">
<div class="radio_wrapper">
<input id="radio0" name="wrapper_all_radio0" value="23 см" type="radio">
<label for="radio0"><span></span>23 см</label><span class="price_tovar_item">8.5 руб.</span>
</div>
<div style="clear: both"></div>
<div class="radio_wrapper">
<input id="radio1" name="wrapper_all_radio0" value="30 см" type="radio">
<label for="radio1"><span></span>30 см</label><span class="price_tovar_item">30 руб.</span>
</div>
<div style="clear: both"></div>
<div class="radio_wrapper">
<input id="radio2" name="wrapper_all_radio0" value="36 см" type="radio">
<label for="radio2"><span></span>36 см</label><span class="price_tovar_item">15 руб.</span>
</div>
</div>
В данном случае нужно делегировать обработку изменения состояний кнопок их общему родителю wrapper_all_radio, убрав добавление к этим именам классов числовых значений, это пустое и не нужное. Назначать же обработчики как впрочем и описывать все остальное, нужно не кучей кусков <script></script>, а в одном скрипте, по событию $(function(). А помещать $(????).find("input[type=radio]:checked").attr("value"), только не attr, а .val(), ибо это не атрибут, а свойство, во что-то нужно в обработчике щелчка по кнопке заказать:
$(function() {
$('a.tovar_item_link').click(function() {
$(this).closest('tovar_desc').find('input:radio:checked').val(); //это выбранное значение в текущей группе кнопок
$("#value_product_2"). //а это что за хрень?
});
})
|
В общем всю эту хрень, имеется ввиду подход связывания элементов на странице с товарами на сервере, в помойку. У вас как разработчика вообще не должна болеть голова какую циферку приляпать к имени класса или идентификатора, и нужно ли вообще такой дурью маяться.
Товары на сервере должны храниться под уникальным значением, что это может быть уже говорилось. Товары на страницу сервер выводит в цикле, где сразу и связывает по этому уникальному значению необходимые для него и работы на клиенте элементы на странице. Название товара никак не может служить в качестве уникального значения, хотя бы уже потому, что нужно учитывать "человеческий фактор", то есть невольные и возможные ошибки со стороны администратора. Самое простое, это автоматическое формирование уникального ID непосредственно базой данных, начиная от 1. Элементы полей формы могут находится даже вне ее, но связаны с ней атрибутом form. Это означает, что группы радио кнопок при выводе сразу уже могут быть описаны как принадлежащие своей форме, которой даже не существует на странице, и которая добавляется на нее динамически. Пусть в базе имеется две пиццы под идентификаторами 23 и 17. Для того чтобы получить на сервере что выбрал клиент, нужно всего лишь связать по этим идентификаторам радио кнопки и их формы. Все, кучи абстрактных циферок втыкаемых везде по всей странице совсем не нужно.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
$('button.order').click(function() {
$('<form id=' +
$(this).data('form') + '><input value="' +
$(this).parent().find('h4').text() + '"><button>Заказать</button></form>').appendTo('body').submit(function(e) {
e.preventDefault();
alert(JSON.stringify($(this).serializeArray()))
$(this).remove()
})
})
});
</script>
</head>
<body>
<div>
<h4>Пицца с сыром</h4>
<label><input form="23" type="radio" name="size[23]" value="1" checked="" /> 23 см</label>
<label><input form="23" type="radio" name="size[23]" value="2" /> 30 см</label>
<label><input form="23" type="radio" name="size[23]" value="3" /> 36 см</label>
<button class="order" data-form="23">Заказать</button>
</div>
<div>
<h4>Пицца без сыра</h4>
<label><input form="17" type="radio" name="size[17]" value="1" checked="" /> 23 см</label>
<label><input form="17" type="radio" name="size[17]" value="2" /> 30 см</label>
<label><input form="17" type="radio" name="size[17]" value="3" /> 36 см</label>
<button class="order" data-form="17">Заказать</button>
</div>
</body>
</html>
Как видим наличия скрытых полей в форме для передачи выбора совсем не требуется, вся информация нужная серверу передается самими кнопками. Сервер получит массив size, в котором ключ будет идентификатором товара, по которому легко проверить действительно ли это товар, а значением его характеристика, которую также легко проверить. Если запрос в базу по этим параметрам вернул и название пиццы, и ее размер, значит заказ не фейковый, по крайней мере на 20%. А вот название пиццы в форме, если уж так хочется выводить, то полем без имени, только для информации пользователю. На сервер же оно не передается, ибо оно ему совсем не требуется. |
Спасибо за столь развернутый ответ ))
у меня заработал такой скрипт:
$(".radio_wrapper").on("change", function() {
$("#value_product_2").val($(this).find("input[type=radio]:checked").attr("value"));
});
|
Как об стену горохом.
|
| Часовой пояс GMT +3, время: 15:57. |