making certain inputs on a form required when a certain radio button is selected
Question
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.
4 answers
solution1
1 ACCPTED 2019-03-13 09:41:49
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'>
solution2
1 2019-03-13 09:45:37
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>
solution3
0 2019-03-13 10:04:01
<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);
});
});
solution4
0 2019-03-13 10:48:54
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Make a TextBox required if a certain Radio button is selected
Form that shows specific text when certain dropdown option and certain radio button is selected
How to enable/disable X inputs when certain checkbox (radio button) is selected?
Make text area required when certain radio option is selected
Toggle Show and Enable Textfiled When Certain Radio Button is Selected
Checkbox appear when certain radio selected
Update variable when a certain radio is selected
Perform certain action when radio button is checked
Get the certain radio button
UPDATED: Only select certain item based on radio button and option selected
Related Tags