J'ai un formulaire de saisie pour mes utilisateurs qui commence par 3 boutons radio. Ces boutons radio ressemblent à ceci:
<button type="submit">Login</button>
J'ai alors 7 champs de saisie différents, une des entrées est:
<input type="text" placeholder="bla bla" name="referenceno">
J'ai alors un bouton "Soumettre" formaté comme suit:
<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>
Si, par exemple, un utilisateur sélectionne "Client", je souhaite que certaines entrées soient définies sur une valeur "obligatoire" (comme referenceno), donc si ces champs ne sont pas saisis, l'utilisateur ne peut pas appuyer sur login sans entrer les informations correctes.
4 Réponses :
lors du changement de bouton radio, sélectionnez l'entrée en utilisant document.querySelector et en utilisant setAttribute définissez l'attribut requis sur les éléments
<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'>
function a()
{
document.querySelector('.one').setAttribute('required','required');
document.querySelector('.five').setAttribute('required','required');
}
Vous pouvez ajouter une classe aux éléments d'entrée en faisant correspondre l'id du bouton radio. Puis en cliquant sur le bouton, ajoutez l'attribut obligatoire avec ce nom de classe:
<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>
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;
});
});
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);
});
});
<!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>
Même s'il ne s'agit pas d'une copie exacte, vous pouvez consulter cette réponse - et plus encore - car il a toutes les réponses dont vous avez besoin