Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.07.2017, 15:55
Новичок на форуме
Отправить личное сообщение для Colorado Посмотреть профиль Найти все сообщения от Colorado
 
Регистрация: 30.07.2017
Сообщений: 1

Скрывать и делать необязательной часть формы при выборе вариантов
Сделал форму для выбора варианта доставки, где есть 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>
Ответить с цитированием
  #2 (permalink)  
Старый 30.07.2017, 16:30
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,622

Smarty? Цикл дважды это все выведет.
Ответить с цитированием
  #3 (permalink)  
Старый 31.07.2017, 11:52
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,983

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

<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, 31.07.2017 в 12:14.
Ответить с цитированием
  #4 (permalink)  
Старый 31.07.2017, 11:58
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,622

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>
Ответить с цитированием
  #5 (permalink)  
Старый 31.07.2017, 12:04
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,983

Сообщение от laimas Посмотреть сообщение
Nexus,
а ничего, что у него кнопки не имеют имен, вместо них бесполезный id, а значит не будут зависимой группой?
Это не ко мне вопрос)
Ответить с цитированием
  #6 (permalink)  
Старый 31.07.2017, 12:07
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,622

Сообщение от Nexus
Это не ко мне вопрос)
Так тогда зачем Я бы примерно так сделал и тоже каждая из кнопок сама по себе?
Ответить с цитированием
  #7 (permalink)  
Старый 31.07.2017, 12:10
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,983

Сообщение от laimas Посмотреть сообщение
Так тогда зачем Я бы примерно так сделал и тоже каждая из кнопок сама по себе?
Эта хрень один фиг будет работать, правда не так, как задумывалось)
В итоге форма "подстроится" под последний измененный чекбокс.

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод select'а при выборе нужного option'a из другого select'a CoRviN88 Элементы интерфейса 2 07.05.2013 13:24
$.ajax работает без success но при этом часть кода перезагружается!? saturn Элементы интерфейса 0 16.10.2011 10:09
Отменить submit формы при нажатии enter MaxStoun Events/DOM/Window 5 07.04.2011 19:00
Открытие полей формы при выборе определенного radio rolph Events/DOM/Window 4 15.06.2010 18:32
при выборе в 1-ом select соот.-щая инф. отображается в другом select celencer Общие вопросы Javascript 1 24.05.2009 20:38