делать определенные входные данные в форме, необходимой при выборе определенной радиокнопки - PullRequest
Новая
       13

делать определенные входные данные в форме, необходимой при выборе определенной радиокнопки

0 голосов
/ 13 марта 2019

У меня есть форма ввода для моих пользователей, которая начинается с 3 переключателей.Эти переключатели выглядят следующим образом: 

<input type="radio" name="customer" id="customer" value="A customer">Customer<br>
<input type="radio" name="customer" id="client" value="A client">Customer<br>
<input type="radio" name="customer" id="other" value="Other">Customer<br>

У меня тогда есть 7 различных полей ввода, одно из входов: 

<input type="text" placeholder="bla bla" name="referenceno">

Затем у меня есть кнопка «отправить», отформатированная следующим образом: 

<button type="submit">Login</button>

Если, например, пользователь выбирает «Клиент», то я хочу, чтобы для некоторых входов было задано «требуемое» значение (например, referenceno), поэтому, если эти поля не введены, пользователь не сможетнажмите логин без ввода правильной информации.

Ответы [ 4 ]

1 голос
/ 13 марта 2019

Вы можете добавить класс к элементам ввода, сопоставив идентификатор переключателя.Затем, нажав на кнопку, добавьте атрибут required с именем этого класса: 

var radio = [].slice.call(document.querySelectorAll('[name=customer]'));
radio.forEach(function(r){
  r.addEventListener('click', function(){
    var allInput = document.querySelectorAll('[type="text"]');
    [].slice.call(allInput).forEach(function(el){
      el.required = false;
    });
    document.querySelector('.'+this.id).required = true;
  });
});
<form>
  <input type="radio" name="customer" id="customer" value="A customer">Customer<br>
  <input type="radio" name="customer" id="client" value="A client">Customer<br>
  <input type="radio" name="customer" id="other" value="Other">Customer<br>

  <input type="text" placeholder="bla bla" name="referenceno" class="customer">
  <input type="text" placeholder="bla bla" name="referenceno" class="client">
  <input type="text" placeholder="bla bla" name="referenceno" class="other">

  <button type="submit">Login</button>
</form>
1 голос
/ 13 марта 2019

при переключении переключателя выберите вход с помощью document.querySelector и с помощью setAttribute установите требуемый атрибут для элементов 

function a()
{
document.querySelector('.one').setAttribute('required','required');
document.querySelector('.five').setAttribute('required','required');

}
<input type="radio" name="customer" id="customer" onchange='a()' value="A customer">Customer<br>
<input type="radio" name="customer" id="client" value="A client">Customer<br>
<input type="radio" name="customer" id="other" value="Other">Customer<br>


<input type="text" placeholder="bla bla" name="referenceno" class='one'>
<input type="text" placeholder="bla bla" name="referenceno" class='2'>
<input type="text" placeholder="bla bla" name="referenceno" class='3'>
<input type="text" placeholder="bla bla" name="referenceno" class='4'>
<input type="text" placeholder="bla bla" name="referenceno" class='five'>
<input type="text" placeholder="bla bla" name="referenceno" class='5'>
<input type="text" placeholder="bla bla" name="referenceno" class='7'>
0 голосов
/ 13 марта 2019 
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
  background-color: black;
  text-align: center;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body id="container_id">
<form>
    <input type="radio" name="customer" id="customer" value="A customer">Customer<br>
  <input type="radio" name="customer" id="client" value="A client">Customer<br>
  <input type="radio" name="customer" id="other" value="Other">Customer<br>

  <input type="text" placeholder="bla bla" name="referenceno" class="customer">
  <input type="text" placeholder="bla bla" name="referenceno" class="client">
  <input type="text" placeholder="bla bla" name="referenceno" class="other">

  <button type="submit">Login</button>
</form>
<script>
    var radio = document.querySelectorAll('[name=customer]');
  radio.forEach(function(r){
  r.addEventListener('click', function(){
    var x = document.querySelectorAll("input[type='text']");
    var i;
    for (i = 0; i < x.length; i++) {
      x[i].required = false;
    }
    document.querySelector('.'+this.id).required = true;
  });
});
</script>
</body>

</html>
0 голосов
/ 13 марта 2019 
<form id="my-form">
  <input type="radio" name="customer" id="customer" value="A customer">Customer<br>
  <input type="radio" name="customer" id="client" value="A client">Client<br>
  <input type="radio" name="customer" id="other" value="Other">Other<br>

  <input type="text" placeholder="reference no" name="referenceno">
  <input type="text" placeholder="other field" name="other-field">

  <button type="submit">Submit</button>
</form>

let selectedCustomer = null;

const onCustomerSelected = (value) => {
  if (selectedCustomer === value) {
    return;
  }
  selectedCustomer = value;
  updateOnCustomerChanged();
};

const updateOnCustomerChanged = () => {
  const referenceNoInputField = document.querySelector('input[name=referenceno]');
  referenceNoInputField.required = selectedCustomer === 'A customer';
};

document.querySelectorAll('[name=customer]')
  .forEach((el) => {
    el.addEventListener('change', () => {
      onCustomerSelected(el.value);
    });
  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...