Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как у невидимого input отключить require? (https://javascript.ru/forum/dom-window/53330-kak-u-nevidimogo-input-otklyuchit-require.html)

Павел Буланов 29.01.2015 19:55
Как у невидимого input отключить require?
 
Привет всем

Есть 3 радио кнопки, по клику на одну из кнопок появляется fieldset с полями для регистрации, но при нажатии на кнопку submit форма не обрабатывается, так как в невидимы input="text" стоит required

Помогите пожалуйста убрать required у невидимых полей

Код:
<style>
fieldset{
    display:none; padding:10px;
   
}
</style>
<script>
function toggleSet(rad)
{
var type = rad.value;
for(var k=0,elm;elm=rad.form.elements[k];k++)
if(elm.className=='item')
elm.style.display = elm.id==type? 'inline':'';
 

}  
</script>





<form method="post" action="confirm.php"  >
<section > 
<legend>Выберите способ доставки:</legend>

<input type="radio" name="dostavka[]" value="courier" onclick="toggleSet(this)">Курье по Минску
<br>
<input type="radio" name="dostavka[]" value="pochta" onclick="toggleSet(this)">Почтовое отправление
<br>
<input type="radio" name="dostavka[]" value="smz" onclick="toggleSet(this)">Самовывоз
<br><br>
Оплата:<br>
<input type="radio" name="oplata" checked> Оплата при получении<br>
</section>

<fieldset    id="courier" class="item">
<legend>Курьерская доставка</legend>
Имя:<br>
<input  type="text" name="fname" id="courier" value="2" required><br>  
Телефон:<br>
<input type="text" name="telefon" required ><br>
Адрес:  
  <br>
<textarea rows="2" cols="21" required >
</textarea><br>
Время доставки: <br>
<input type="radio" name="timed[]" value="до5" >До 5
 
<input type="radio" name="timed[]" value="posle6">После 6
 <br><br>
<input  type="submit" name="submit" value="ПОДТВЕРЖДАЮ">

</fieldset>


<fieldset   id="pochta" class="item">
<legend>Почтовое отправление</legend>
ФИО:<br>
  <input type="text" name="fname" id="text_field_1"  required   ><br>
Телефон:  
  <br>
  <input type="text" name="lname" id="text_field_1"  required  ><br>
Индекс:  
  <br>
  <input type="text" name="index" id="text_field_1"  required   ><br>
Адрес:  
  <br>
<textarea rows="2" cols="21" required>
</textarea>
 <br><br>
<input  type="submit" name="submit" value="ПОДТВЕРЖДАЮ">
</fieldset>



<fieldset   id="smz" class="item">
<legend>Самовывоз</legend>
Имя:<br>
<input type="text" name="fname" required ><br>
Телефон:<br>
<input type="text" name="tel"><br>
Когда вас ждать?<br>
<input type="datetime-local" name="vrema">
 <br>
 <span style="color:#666; font-size:8px"><pre>Внимание, телефон указывать не обязательно,
но заранее предупредите о своем визите,
чтобы ваш заказ был собран вовремя.<pre></span><br>
<input  type="submit" name="submit" value="ПОДТВЕРЖДАЮ">
</fieldset>
 
</form>

рони 29.01.2015 20:28
Павел Буланов,
Вариант не убирать атрибут, а подгружать необходимое ... :write:
id недолжно повторятся в пределах страницы!!!
id или class для div добавьте сами
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
fieldset{
     padding:10px;
     display: inline;
}
div{
   display:none;
}

</style>
<script>
	function toggleSet(rad)
	{
	  var type = rad.value,
          fieldsets = document.querySelectorAll('fieldset'),
          div = document.querySelector('div');
	  for(var k = 0, elm; elm = fieldsets[k]; k++)
	  (elm.id == type ? rad.form : div).appendChild(elm)
	}
</script>

</head>

<body>
<div><fieldset    id="courier" class="item">
<legend>Курьерская доставка</legend>
Имя:<br>
<input  type="text" name="fname"  value="2" required><br>
Телефон:<br>
<input type="text" name="telefon" required ><br>
Адрес:
  <br>
<textarea rows="2" cols="21" required >
</textarea><br>
Время доставки: <br>
<input type="radio" name="timed[]" value="до5" >До 5

<input type="radio" name="timed[]" value="posle6">После 6
 <br><br>
<input  type="submit" name="submit" value="ПОДТВЕРЖДАЮ">

</fieldset>


<fieldset   id="pochta" class="item">
<legend>Почтовое отправление</legend>
ФИО:<br>
  <input type="text" name="fname" id="text_field_1"  required   ><br>
Телефон:
  <br>
  <input type="text" name="lname" id="text_field_1"  required  ><br>
Индекс:
  <br>
  <input type="text" name="index" id="text_field_1"  required   ><br>
Адрес:
  <br>
<textarea rows="2" cols="21" required>
</textarea>
 <br><br>
<input  type="submit" name="submit" value="ПОДТВЕРЖДАЮ">
</fieldset>



<fieldset   id="smz" class="item">
<legend>Самовывоз</legend>
Имя:<br>
<input type="text" name="fname" required ><br>
Телефон:<br>
<input type="text" name="tel"><br>
Когда вас ждать?<br>
<input type="datetime-local" name="vrema">
 <br>
 <span style="color:#666; font-size:8px"><pre>Внимание, телефон указывать не обязательно,
но заранее предупредите о своем визите,
чтобы ваш заказ был собран вовремя.<pre></span><br>
<input  type="submit" name="submit" value="ПОДТВЕРЖДАЮ">
</fieldset></div>
  <form method="post" action="confirm.php"  >
<section >
<legend>Выберите способ доставки:</legend>

<input type="radio" name="dostavka[]" value="courier" onclick="toggleSet(this)">Курье по Минску
<br>
<input type="radio" name="dostavka[]" value="pochta" onclick="toggleSet(this)">Почтовое отправление
<br>
<input type="radio" name="dostavka[]" value="smz" onclick="toggleSet(this)">Самовывоз
<br><br>
Оплата:<br>
<input type="radio" name="oplata" checked> Оплата при получении<br>
</section>
</form>

</body>

</html>

Павел Буланов 29.01.2015 20:45
если бы я был телкой я бы вам дал :)

спасибо от души

danik.js 29.01.2015 23:10
У меня другой вариант: при скрытии fieldset'а выставлять ему disabled, при показе - убирать. Можно даже скрытие сделать чисто на основе атрибута disabled:

.item[disabled]{display:none}

danik.js 29.01.2015 23:19 
<!DOCTYPE HTML>
 
<html>
 
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
fieldset{
    padding:10px;
    display: inline;
}
fieldset[disabled]{
    display: none;
}
 
</style>
<script>
    function toggleSet(type)
    {
      var fieldsets = document.querySelectorAll('.item');
      for(var i = 0, elm; elm = fieldsets[i]; i++)
      elm.disabled = (elm.id != type);
    }
</script>
 
</head>
 
<body>
<form method="post" action="confirm.php"  >
<section >
<legend>Выберите способ доставки:</legend>
 
<input type="radio" name="dostavka[]" value="courier" onclick="toggleSet(this.value)">Курье по Минску
<br>
<input type="radio" name="dostavka[]" value="pochta" onclick="toggleSet(this.value)">Почтовое отправление
<br>
<input type="radio" name="dostavka[]" value="smz" onclick="toggleSet(this.value)">Самовывоз
<br><br>
Оплата:<br>
<input type="radio" name="oplata" checked> Оплата при получении<br>
</section>
 
<fieldset    id="courier" class="item" disabled>
<legend>Курьерская доставка</legend>
Имя:<br>
<input  type="text" name="fname" id="courier" value="2" required><br> 
Телефон:<br>
<input type="text" name="telefon" required ><br>
Адрес: 
  <br>
<textarea rows="2" cols="21" required >
</textarea><br>
Время доставки: <br>
<input type="radio" name="timed[]" value="до5" >До 5
  
<input type="radio" name="timed[]" value="posle6">После 6
 <br><br>
<input  type="submit" name="submit" value="ПОДТВЕРЖДАЮ">
 
</fieldset>
 
 
<fieldset   id="pochta" class="item" disabled>
<legend>Почтовое отправление</legend>
ФИО:<br>
  <input type="text" name="fname" id="text_field_1"  required   ><br>
Телефон: 
  <br>
  <input type="text" name="lname" id="text_field_1"  required  ><br>
Индекс: 
  <br>
  <input type="text" name="index" id="text_field_1"  required   ><br>
Адрес: 
  <br>
<textarea rows="2" cols="21" required>
</textarea>
 <br><br>
<input  type="submit" name="submit" value="ПОДТВЕРЖДАЮ">
</fieldset>
 
 
 
<fieldset   id="smz" class="item" disabled>
<legend>Самовывоз</legend>
Имя:<br>
<input type="text" name="fname" required ><br>
Телефон:<br>
<input type="text" name="tel"><br>
Когда вас ждать?<br>
<input type="datetime-local" name="vrema">
 <br>
 <span style="color:#666; font-size:8px"><pre>Внимание, телефон указывать не обязательно,
но заранее предупредите о своем визите,
чтобы ваш заказ был собран вовремя.<pre></span><br>
<input  type="submit" name="submit" value="ПОДТВЕРЖДАЮ">
</fieldset>
  
</form>
 
</body>
 
</html>

danik.js 29.01.2015 23:20
Обязательно подписи в <label> заключи, чтоб кликабельны были.

рони 29.01.2015 23:25
danik.js,
:victory:
Вариант с css 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
fieldset{
     padding:10px;
     display: inline;
}

.item[disabled]{display:none}
</style>
<script>
	function toggleSet(rad)
	{
	  var type = rad.value,
          fieldsets = document.querySelectorAll('fieldset');
	  for(var k = 0, elm; elm = fieldsets[k]; k++)
	  elm.id == type ? elm.removeAttribute('disabled')  : elm.setAttribute('disabled', 'disabled')
	}

   window.onload =  toggleSet //чтоб атрибут вручную не прописывать

</script>

</head>

<body>

  <form method="post" action="confirm.php"  >
<section >
<legend>Выберите способ доставки:</legend>

<input type="radio" name="dostavka[]" value="courier" onclick="toggleSet(this)">Курье по Минску
<br>
<input type="radio" name="dostavka[]" value="pochta" onclick="toggleSet(this)">Почтовое отправление
<br>
<input type="radio" name="dostavka[]" value="smz" onclick="toggleSet(this)">Самовывоз
<br><br>
Оплата:<br>
<input type="radio" name="oplata" checked> Оплата при получении<br>
</section>
<fieldset    id="courier" class="item">
<legend>Курьерская доставка</legend>
Имя:<br>
<input  type="text" name="fname"  value="2" required><br>
Телефон:<br>
<input type="text" name="telefon" required ><br>
Адрес:
  <br>
<textarea rows="2" cols="21" required >
</textarea><br>
Время доставки: <br>
<input type="radio" name="timed[]" value="до5" >До 5

<input type="radio" name="timed[]" value="posle6">После 6
 <br><br>
<input  type="submit" name="submit" value="ПОДТВЕРЖДАЮ">

</fieldset>


<fieldset   id="pochta" class="item">
<legend>Почтовое отправление</legend>
ФИО:<br>
  <input type="text" name="fname" id="text_field_1"  required   ><br>
Телефон:
  <br>
  <input type="text" name="lname" id="text_field_1"  required  ><br>
Индекс:
  <br>
  <input type="text" name="index" id="text_field_1"  required   ><br>
Адрес:
  <br>
<textarea rows="2" cols="21" required>
</textarea>
 <br><br>
<input  type="submit" name="submit" value="ПОДТВЕРЖДАЮ">
</fieldset>



<fieldset   id="smz" class="item">
<legend>Самовывоз</legend>
Имя:<br>
<input type="text" name="fname" required ><br>
Телефон:<br>
<input type="text" name="tel"><br>
Когда вас ждать?<br>
<input type="datetime-local" name="vrema">
 <br>
 <span style="color:#666; font-size:8px"><pre>Внимание, телефон указывать не обязательно,
но заранее предупредите о своем визите,
чтобы ваш заказ был собран вовремя.<pre></span><br>
<input  type="submit" name="submit" value="ПОДТВЕРЖДАЮ">
</fieldset>
</form>

</body>

</html>

danik.js 30.01.2015 00:41
К чему пляски с атрибутом? И вообще, ты опоздал )

рони 30.01.2015 00:52
Цитата:
Сообщение от danik.js
К чему пляски с атрибутом?
то тебе пляски нужны, то они лишние - обьяснил бы :-?


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