Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрывать и делать необязательной часть формы при выборе вариантов (https://javascript.ru/forum/dom-window/69949-skryvat-i-delat-neobyazatelnojj-chast-formy-pri-vybore-variantov.html)

Colorado 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 30.07.2017 15:30

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

Nexus 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 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 31.07.2017 11:04

Цитата:

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

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

laimas 31.07.2017 11:07

Цитата:

Сообщение от Nexus
Это не ко мне вопрос)

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

Nexus 31.07.2017 11:10

Цитата:

Сообщение от laimas (Сообщение 460186)
Так тогда зачем Я бы примерно так сделал и тоже каждая из кнопок сама по себе? :D

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

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


Часовой пояс GMT +3, время: 10:49.