Javascript-форум - Передать значение input radio в другой input

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

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

Название товара никак не может служить в качестве уникального значения, хотя бы уже потому, что нужно учитывать "человеческий фактор", то есть невольные и возможные ошибки со стороны администратора.

Самое простое, это автоматическое формирование уникального 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%.

А вот название пиццы в форме, если уж так хочется выводить, то полем без имени, только для информации пользователю. На сервер же оно не передается, ибо оно ему совсем не требуется.