Форум

Павел Буланов · #1 (**permalink**) 29.01.2015, 19:55

Привет всем

Есть 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>

рони · #2 (**permalink**) 29.01.2015, 20:28

Павел Буланов,
Вариант не убирать атрибут, а подгружать необходимое ...

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>

Павел Буланов · #3 (**permalink**) 29.01.2015, 20:45

если бы я был телкой я бы вам дал

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

danik.js · #4 (**permalink**) 29.01.2015, 23:10

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

.item[disabled]{display:none}

danik.js · #5 (**permalink**) 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 · #6 (**permalink**) 29.01.2015, 23:20

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

рони · #7 (**permalink**) 29.01.2015, 23:25

danik.js,

Вариант с 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 · #8 (**permalink**) 30.01.2015, 00:41

К чему пляски с атрибутом? И вообще, ты опоздал )

рони · #9 (**permalink**) 30.01.2015, 00:52

Сообщение от danik.js

К чему пляски с атрибутом?

то тебе пляски нужны, то они лишние - обьяснил бы

Форум

Справочник

Discord чат

Курсы javascript