CODEWITHSUNDEEP
javascripthtmlformsradio-button
MC123
MC123

Reputation: 48

making certain inputs on a form required when a certain radio button is selected

I have an input form for my users which starts with 3 radio buttons. These radio buttons look like this:

<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>

I then have 7 different input fields, one of the inputs is:

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

I then have a "submit" button formatted as follows:

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

If for example a user selects 'Customer' then I want certain inputs to be set to a 'required' value (such as referenceno), so if those fields are not entered then the user cannot press login without entering the correct information.

Upvotes: 1

Views: 88

Answers (4)

gowtham rajan
gowtham rajan

Reputation: 322

<!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>

Upvotes: 0

kostik
kostik

Reputation: 1209

<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);
    });
  });

Upvotes: 0

Mamun
Mamun

Reputation: 68933

You can add class to the input elements by matching the id of the radio button. Then on clicking on the button add the required attribute with that class name:

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>

Upvotes: 1

ellipsis
ellipsis

Reputation: 12152

onchange of the radio button select the input using document.querySelector and using setAttribute set the required attribute to the elements

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'>

Upvotes: 1

Related Questions