Форум

Colorado · #1 (**permalink**) 30.07.2017, 14:55

Сделал форму для выбора варианта доставки, где есть 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>

laimas · #2 (**permalink**) 30.07.2017, 15:30

Smarty? Цикл дважды это все выведет.

Nexus · #3 (**permalink**) 31.07.2017, 10:52

Я бы примерно так сделал:

<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>

laimas · #4 (**permalink**) 31.07.2017, 10:58

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>

Nexus · #5 (**permalink**) 31.07.2017, 11:04

Сообщение от laimas

Nexus,
а ничего, что у него кнопки не имеют имен, вместо них бесполезный id, а значит не будут зависимой группой?

Это не ко мне вопрос)

laimas · #6 (**permalink**) 31.07.2017, 11:07

Сообщение от Nexus

Это не ко мне вопрос)

Так тогда зачем Я бы примерно так сделал и тоже каждая из кнопок сама по себе?

Nexus · #7 (**permalink**) 31.07.2017, 11:10

Сообщение от laimas

Так тогда зачем Я бы примерно так сделал и тоже каждая из кнопок сама по себе?

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

И да, я таки проморгал отсутствие атрибута)

Форум

Справочник

Discord чат

Курсы javascript