Скрывать и делать необязательной часть формы при выборе вариантов
Сделал форму для выбора варианта доставки, где есть 2 инпута радио. Почта и Курьером.
При выборе варианта Почта, должны появится 2 поля: Город и Отделение. У самовывоза, соответственно 1 поле: Адрес доставки. Проблема: 1) Не могу реализовать, что бы формы скрывались при переключении между чекбоксами. Нашел решение только для одной. 2) Поля форм становились обязательными при выборе конкретного чекбокса. Сейчас либо все обязательны - форма не пропускает, либо все необязательны - тогда и заполнять не нужно. Просветите пожалуйста.
{foreach $deliveries as $delivery}
<div class="checkbox">
<input type="radio" id="deliveries_{$delivery->id}" {if $delivery->id==1} onChange="show()" {else} onChange="hide()">
</div>
<h3> <label for="deliveries_{$delivery->id}">{$delivery->name}</label></h3>
{if $delivery->id==1}
<div id="info">
<input placeholder="Город" type="text" value="{$city|escape}" required/>
<input placeholder="Отделение" type="text" value="{$address|escape}" required />
</div>
{/if}
{if $delivery->id==2}
<div id="info1">
<input placeholder="улица / дом / эт / кв." type="text" value="{$address1|escape}" required />
</div>
{/foreach}
<script>
function show() { document.getElementById('info').style.display='block';}
function hide() { document.getElementById('info').style.display='none';}
</script>
|
Smarty? Цикл дважды это все выведет.
|
Я бы примерно так сделал:
<div class="checkbox">
{foreach $deliveries as $delivery}
<input type="radio" *!*name="delivery_id"*/!* data-id="{$delivery->id}" data-title="{$delivery->name|urlencode}"/>
{/foreach}
</div>
<h3>
<label class="title-label"></label>
</h3>
<div class="fields">
<input placeholder="Город" type="text" value="{$city|escape}" data-delivery="1"/>
<input placeholder="Отделение" type="text" value="{$address|escape}" data-delivery="1"/>
<input placeholder="улица / дом / эт / кв." type="text" value="{$address1|escape}" data-delivery="2"/>
</div>
<script type="text/javascript">
$(function(){
$('.checkbox input[type="radio"]').change(function(){
var $t=$(this),
id=$t.attr('data-id'),
title=decodeURIComponent($t.attr('data-title'));
$('.fields input').each(function(){
var $el=$(this);
if($el.attr('data-delivery')!=id)
$el.hide().removeAttr('required');
else
$el.show().attr('required',true);
});
$('.title-label').text(title);
}).change();
});
</script>
|
Nexus,
а ничего, что у него кнопки не имеют имен, вместо них бесполезный id, а значит не будут зависимой группой? Да и для его верстки не так и сложен код будет:
<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() {
$('.checkbox').on('change', 'input', function() {
$('#info-'+this.value).show().find('input').prop('required', 1);
$('#info-'+(this.value^1)).hide().find('input').prop('required', 0);
});
});
</script>
</head>
<body>
<form autocomplete="off">
<div class="checkbox">
<label><input type="radio" name="as" checked="" value="0" /> Почта</label>
<label><input type="radio" name="as" value="1" /> Курьером</label>
</div>
<div id="info-0">
<input placeholder="Город" type="text" value="" required="" />
<input placeholder="Отделение" type="text" value="" required="" />
</div>
<div id="info-1" style="display:none">
<input placeholder="улица / дом / эт / кв." type="text" value="" />
</div>
<button>Send</button>
</form>
</body>
</html>
|
Цитата:
|
Цитата:
|
Цитата:
В итоге форма "подстроится" под последний измененный чекбокс. И да, я таки проморгал отсутствие атрибута) |
| Часовой пояс GMT +3, время: 13:43. |