I have a form that does not allow "conditions" to be created. The first radio input selects "yes" or "no," then it can choose "other" and a free text field appears. The problem is that if I fill in the first radio button and then choose the second one it resets everything. I would like it to reset only the fields inherent to si or no and other.
const $rads = $("input[type='radio']").on("change", function() {
let siClicked = this.id === 'documentazione_Sì';
let noClicked = this.id === 'documentazione_No';
const showAltro = this.id === 'documentazione_nono_altro' || this.id === 'documentazione_ok_altro';
if (siClicked || noClicked) {
$rads.each(function() { // uncheck all rads
this.checked = false;
});
this.checked = true; // check the clicked rad
}
let si = $('#documentazione_Sì').is(":checked");
let no = $('#documentazione_No').is(":checked");
$("#documentazione_ok")
.toggle(si)
.prop('required', si);
$('#documentazione_nono')
.toggle(no)
.prop('required', no);
// showAltro could also be set using the altro checked prop
$("#altro-manuali").toggle(showAltro);
$("#altro-manuali").prop('required', showAltro);
});#documentazione_ok {
display:none;
}
#documentazione_nono {
display:none;
}
#altro-manuali {
display:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.19.1/css/uikit-core.min.css" integrity="sha512-61ZZY3YIjr821vHbtfOTRIGYiRSPE6nA5IVt8ndGZcXa2iRfAcuWPAdt7HyQC23AGo1+dwAd+DOPUzz64K6GsA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<h1 class="uk-h3 uk-margin-remove-top uk-margin-remove-bottom" data-id="page#1-0-1-7" data-element=""> Title
</h1>
<div data-id="page#1-0-1-2" data-element="" class="rate2 uk-margin">
<fieldset data-yooessentials-form-field="tempi" style="border-width: 0; margin: 0; padding: 0;"><div class="uk-form-controls">
<div class="uk-margin uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
<label class="uk-flex uk-margin-right uk-first-column"> <div><input id="star1" type="radio" name="tempi" class="uk-radio" value="1" data-id="page#1-0-1-2-0"></div>
<div class="uk-margin-small-left">1</div>
</label>
<label class="uk-flex uk-margin-right"> <div><input id="star2" type="radio" name="tempi" class="uk-radio" value="2" data-id="page#1-0-1-2-1"></div>
<div class="uk-margin-small-left">2</div>
</label>
<label class="uk-flex uk-margin-right"> <div><input id="star3" type="radio" name="tempi" class="uk-radio" value="3" data-id="page#1-0-1-2-2"></div>
<div class="uk-margin-small-left">3</div>
</label>
<label class="uk-flex uk-margin-right"> <div><input id="star4" type="radio" name="tempi" class="uk-radio" value="4" data-id="page#1-0-1-2-3"></div>
<div class="uk-margin-small-left">4</div>
</label>
<label class="uk-flex uk-margin-right"> <div><input id="star5" type="radio" name="tempi" class="uk-radio" value="5" data-id="page#1-0-1-2-4"></div>
<div class="uk-margin-small-left">5</div>
</label>
</div>
</div><div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div></fieldset>
</div>
<div data-id="page#1-0-1-8" data-element="" class="uk-margin" id="sino">
<fieldset data-yooessentials-form-field="documentazione" style="border-width: 0; margin: 0; padding: 0;">
<div class="uk-form-controls">
<div class="uk-margin uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
<label class="uk-flex uk-margin-right uk-first-column">
<div><input id="documentazione_Sì" type="radio" name="documentazionetest" class="uk-radio domanda" value="Sì" data-id="page#1-0-1-8-0"></div>
<div class="uk-margin-small-left">Sì </div>
</label>
<label class="uk-flex uk-margin-right">
<div><input id="documentazione_No" type="radio" name="documentazionetest" class="uk-radio domanda" value="No" data-id="page#1-0-1-8-1"></div>
<div class="uk-margin-small-left">No </div>
</label>
</div>
</div>
<div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
</fieldset>
</div>
<div data-id="page#1-0-1-9" data-element="" id="documentazione_ok" class="uk-margin" style="display: none;">
<fieldset data-yooessentials-form-field="documentazione_ok" style="border-width: 0; margin: 0; padding: 0;">
<div class="uk-form-controls">
<div class="uk-margin uk-grid-small uk-child-width-auto uk-grid uk-grid-stack" uk-grid="">
<label class="uk-flex uk-margin-right uk-first-column">
<div><input id="documentazione_ok_Il manuale non trattava il caso specifico" type="radio" name="documentazione_ok" class="uk-radio" value="Il manuale non trattava il caso specifico" data-id="page#1-0-1-9-0"></div>
<div class="uk-margin-small-left">1</div>
</label>
<label class="uk-flex uk-margin-right">
<div><input id="documentazione_ok_Il manuale non era chiaro" type="radio" name="documentazione_ok" class="uk-radio" value="Il manuale non era chiaro" data-id="page#1-0-1-9-1"></div>
<div class="uk-margin-small-left">2</div>
</label>
<label class="uk-flex uk-margin-right">
<div><input id="documentazione_ok_altro" type="radio" name="documentazione_ok" class="uk-radio" value="altro" data-id="page#1-0-1-9-2"></div>
<div class="uk-margin-small-left">Altro</div>
</label>
</div>
</div>
<div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
</fieldset>
</div>
<div data-id="page#1-0-1-10" data-element="" id="documentazione_nono" class="uk-margin">
<fieldset data-yooessentials-form-field="documentazione_nono" style="border-width: 0; margin: 0; padding: 0;">
<div class="uk-form-controls">
<div class="uk-margin uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
<label class="uk-flex uk-margin-right uk-first-column">
<div><input id="documentazione_nono_Il manuale cartaceo non era presente" type="radio" name="documentazione_nono" class="uk-radio" value="Il manuale cartaceo non era presente" data-id="page#1-0-1-10-0"></div>
<div class="uk-margin-small-left">3</div>
</label>
<label class="uk-flex uk-margin-right">
<div><input id="documentazione_nono_Non ho accesso all’area riservata del sito" type="radio" name="documentazione_nono" class="uk-radio" value="Non ho accesso all’area riservata del sito" data-id="page#1-0-1-10-1"></div>
<div class="uk-margin-small-left">4</div>
</label>
<label class="uk-flex uk-margin-right">
<div><input id="documentazione_nono_Non sapevo dove reperirli" type="radio" name="documentazione_nono" class="uk-radio" value="Non sapevo dove reperirli" data-id="page#1-0-1-10-2"></div>
<div class="uk-margin-small-left">5</div>
</label>
<label class="uk-flex uk-margin-right">
<div><input id="documentazione_nono_altro" type="radio" name="documentazione_nono" class="uk-radio" value="altro" data-id="page#1-0-1-10-3"></div>
<div class="uk-margin-small-left">Altro</div>
</label>
</div>
</div>
<div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
</fieldset>
</div>
<div data-id="page#1-0-1-11" data-element="" id="altro-manuali" class="uk-margin" style="display: none;">
<div data-yooessentials-form-field="altromanuali">
<div class="uk-form-controls">
<textarea class="uk-textarea" id="altromanuali" name="altromanuali"></textarea>
</div>
<div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
</div>
</div>I simplified the script.
Clear all rads EXCEPT if their ID starts with star when clicking Sí or No, and then toggle relevant divs
const $rads = $("input[type='radio']").not("[id^=star]").on("change", function() {
let siClicked = this.id === 'documentazione_Sì';
let noClicked = this.id === 'documentazione_No';
const showAltro = this.id === 'documentazione_nono_altro' || this.id === 'documentazione_ok_altro';
if (siClicked || noClicked) {
$rads.each(function() { // uncheck all rads
this.checked = false;
});
this.checked = true; // check the clicked rad
}
let si = $('#documentazione_Sì').is(":checked");
let no = $('#documentazione_No').is(":checked");
$("#documentazione_ok")
.toggle(si)
.prop('required', si);
$('#documentazione_nono')
.toggle(no)
.prop('required', no);
// showAltro could also be set using the altro checked prop
$("#altro-manuali").toggle(showAltro);
$("#altro-manuali").prop('required', showAltro);
});#documentazione_ok {
display: none;
}
#documentazione_nono {
display: none;
}
#altro-manuali {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.19.1/css/uikit-core.min.css" integrity="sha512-61ZZY3YIjr821vHbtfOTRIGYiRSPE6nA5IVt8ndGZcXa2iRfAcuWPAdt7HyQC23AGo1+dwAd+DOPUzz64K6GsA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<h1 class="uk-h3 uk-margin-remove-top uk-margin-remove-bottom" data-id="page#1-0-1-7" data-element=""> Title
</h1>
<div data-id="page#1-0-1-2" data-element="" class="rate2 uk-margin">
<fieldset data-yooessentials-form-field="tempi" style="border-width: 0; margin: 0; padding: 0;"><div class="uk-form-controls">
<div class="uk-margin uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
<label class="uk-flex uk-margin-right uk-first-column"> <div><input id="star1" type="radio" name="tempi" class="uk-radio" value="1" data-id="page#1-0-1-2-0"></div>
<div class="uk-margin-small-left">1</div>
</label>
<label class="uk-flex uk-margin-right"> <div><input id="star2" type="radio" name="tempi" class="uk-radio" value="2" data-id="page#1-0-1-2-1"></div>
<div class="uk-margin-small-left">2</div>
</label>
<label class="uk-flex uk-margin-right"> <div><input id="star3" type="radio" name="tempi" class="uk-radio" value="3" data-id="page#1-0-1-2-2"></div>
<div class="uk-margin-small-left">3</div>
</label>
<label class="uk-flex uk-margin-right"> <div><input id="star4" type="radio" name="tempi" class="uk-radio" value="4" data-id="page#1-0-1-2-3"></div>
<div class="uk-margin-small-left">4</div>
</label>
<label class="uk-flex uk-margin-right"> <div><input id="star5" type="radio" name="tempi" class="uk-radio" value="5" data-id="page#1-0-1-2-4"></div>
<div class="uk-margin-small-left">5</div>
</label>
</div>
</div><div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div></fieldset>
</div>
<div data-id="page#1-0-1-8" data-element="" class="uk-margin" id="sino">
<fieldset data-yooessentials-form-field="documentazione" style="border-width: 0; margin: 0; padding: 0;">
<div class="uk-form-controls">
<div class="uk-margin uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
<label class="uk-flex uk-margin-right uk-first-column">
<div><input id="documentazione_Sì" type="radio" name="documentazionetest" class="uk-radio domanda" value="Sì" data-id="page#1-0-1-8-0"></div>
<div class="uk-margin-small-left">Sì </div>
</label>
<label class="uk-flex uk-margin-right">
<div><input id="documentazione_No" type="radio" name="documentazionetest" class="uk-radio domanda" value="No" data-id="page#1-0-1-8-1"></div>
<div class="uk-margin-small-left">No </div>
</label>
</div>
</div>
<div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
</fieldset>
</div>
<div data-id="page#1-0-1-9" data-element="" id="documentazione_ok" class="uk-margin" style="display: none;">
<fieldset data-yooessentials-form-field="documentazione_ok" style="border-width: 0; margin: 0; padding: 0;">
<div class="uk-form-controls">
<div class="uk-margin uk-grid-small uk-child-width-auto uk-grid uk-grid-stack" uk-grid="">
<label class="uk-flex uk-margin-right uk-first-column">
<div><input id="documentazione_ok_Il manuale non trattava il caso specifico" type="radio" name="documentazione_ok" class="uk-radio" value="Il manuale non trattava il caso specifico" data-id="page#1-0-1-9-0"></div>
<div class="uk-margin-small-left">1</div>
</label>
<label class="uk-flex uk-margin-right">
<div><input id="documentazione_ok_Il manuale non era chiaro" type="radio" name="documentazione_ok" class="uk-radio" value="Il manuale non era chiaro" data-id="page#1-0-1-9-1"></div>
<div class="uk-margin-small-left">2</div>
</label>
<label class="uk-flex uk-margin-right">
<div><input id="documentazione_ok_altro" type="radio" name="documentazione_ok" class="uk-radio" value="altro" data-id="page#1-0-1-9-2"></div>
<div class="uk-margin-small-left">Altro</div>
</label>
</div>
</div>
<div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
</fieldset>
</div>
<div data-id="page#1-0-1-10" data-element="" id="documentazione_nono" class="uk-margin">
<fieldset data-yooessentials-form-field="documentazione_nono" style="border-width: 0; margin: 0; padding: 0;">
<div class="uk-form-controls">
<div class="uk-margin uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
<label class="uk-flex uk-margin-right uk-first-column">
<div><input id="documentazione_nono_Il manuale cartaceo non era presente" type="radio" name="documentazione_nono" class="uk-radio" value="Il manuale cartaceo non era presente" data-id="page#1-0-1-10-0"></div>
<div class="uk-margin-small-left">3</div>
</label>
<label class="uk-flex uk-margin-right">
<div><input id="documentazione_nono_Non ho accesso all’area riservata del sito" type="radio" name="documentazione_nono" class="uk-radio" value="Non ho accesso all’area riservata del sito" data-id="page#1-0-1-10-1"></div>
<div class="uk-margin-small-left">4</div>
</label>
<label class="uk-flex uk-margin-right">
<div><input id="documentazione_nono_Non sapevo dove reperirli" type="radio" name="documentazione_nono" class="uk-radio" value="Non sapevo dove reperirli" data-id="page#1-0-1-10-2"></div>
<div class="uk-margin-small-left">5</div>
</label>
<label class="uk-flex uk-margin-right">
<div><input id="documentazione_nono_altro" type="radio" name="documentazione_nono" class="uk-radio" value="altro" data-id="page#1-0-1-10-3"></div>
<div class="uk-margin-small-left">Altro</div>
</label>
</div>
</div>
<div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
</fieldset>
</div>
<div data-id="page#1-0-1-11" data-element="" id="altro-manuali" class="uk-margin" style="display: none;">
<div data-yooessentials-form-field="altromanuali">
<div class="uk-form-controls">
<textarea class="uk-textarea" id="altromanuali" name="altromanuali"></textarea>
</div>
<div class="uk-text-danger uk-text-small" data-yooessentials-form-field-errors=""></div>
</div>
</div>