I am trying to disable the 3 Input fields when 1st radio box selected, 2nd radio button enables SHIFT START and END input while the third enables all the three. I am able to disable or enable either all input fields or disable them. I am stuck here now. Cannot understand how to enable only two inputs.
Here is the code
<form name="contactForm">
<div class="form-group">
<label for="shiftdetails">Select the type of details.</label><br>
<input type="radio" id="pagerdetails" value="Pager" name="selection" (click)="toggleDiv()" > <label>Pager Details</label><br>
<input type="radio" id="shiftdetails" value="Shift"name="selection" (click)="toggleDiv(2)">
<label for="nonbusiness">Shift Details</label>
<br>
<input type="radio" id="additional" name="selection" value="additional" (click)="toggleDiv(1)">
<label for="additional">Additional/Extra Hours</label><br>
</div>
<div class="form-group">
<label for="StartTime">Shift Start Time</label>
<input type="time" class="form-control" id="StartTime" name="StartTime" required [(ngModel)]="StartTime"
value="{{StartTime}}" [disabled]="!isChecked">
</div>
<div class="form-group">
<label for="EndTime">Shift End Time</label>
<input type="time" class="form-control" id="EndTime" name="EndTime" aria-describedby="fullNameHelp"
required [(ngModel)]="EndTime" value="{{EndTime}}" [disabled]="!isChecked">
</div>
<div class="form-group">
<label for="Reason">Reason</label>
<input type="text" class="form-control" id="Reason" name="Reason" aria-describedby="Reason"
placeholder="Enter Reason" [(ngModel)]="Reason" value="{{Reason}}" required [disabled]="!isChecked">
</div>
TS CODE
toggleDiv(x) {
this.isChecked = (x === 1)
}
}
Do not use just 1 flag this.isChecked , you'll be left with only 2 values to play around with i.e true and false.
This is more of a logical problem , you can create a separate flag for each input like
EnableFirst , EnableSecond , etc.
Or even better have this.isChecked replaced with a character variable with multiple states a,b and c and check in your html for this variable and its corresponding state to toggle fields appropriately.
The problem with your code is that you are using a single variable isChecked to enable or disable all the inputs.
It is better to have 3 boolean variables. One for each input and modify the values in those variables based on the value of the selected radio button.
Add these lines to your .ts file:
export class MyComponent {
enableReasonInput: boolean;
enableShiftEndTimeInput: boolean;
enableShiftStartTimeInput: boolean;
...
onTypeOfDetailsChange(newValue) {
if (newValue === 'Pager') {
this.enableReasonInput = false;
this.enableShiftEndTimeInput = false;
this.enableShiftStartTimeInput = false;
} else if (newValue === 'Shift') {
this.enableReasonInput = false;
this.enableShiftEndTimeInput = true;
this.enableShiftStartTimeInput = true;
} else if (newValue === 'additional') {
this.enableReasonInput = true;
this.enableShiftEndTimeInput = true;
this.enableShiftStartTimeInput = true;
}
}
}
Update the .html to below:
<form name="contactForm">
<div class="form-group">
<label>Select the type of details.</label>
<br />
<input type="radio" id="pagerdetails" value="Pager" name="selection" (click)="onTypeOfDetailsChange('Pager')">
<label for="pagerdetails">Pager Details</label>
<br />
<input type="radio" id="shiftdetails" value="Shift" name="selection" (click)="onTypeOfDetailsChange('Shift')">
<label for="shiftdetails">Shift Details</label>
<br />
<input type="radio" id="additional" name="selection" value="additional"
(click)="onTypeOfDetailsChange('additional')">
<label for="additional">Additional/Extra Hours</label>
<br />
</div>
<div class="form-group">
<label for="StartTime">Shift Start Time</label>
<input type="time" class="form-control" id="StartTime" name="StartTime" required [(ngModel)]="StartTime"
value="{{StartTime}}" [disabled]="!enableShiftStartTimeInput">
</div>
<div class="form-group">
<label for="EndTime">Shift End Time</label>
<input type="time" class="form-control" id="EndTime" name="EndTime" aria-describedby="fullNameHelp" required
[(ngModel)]="EndTime" value="{{EndTime}}" [disabled]="!enableShiftEndTimeInput">
</div>
<div class="form-group">
<label for="Reason">Reason</label>
<input type="text" class="form-control" id="Reason" name="Reason" aria-describedby="Reason"
placeholder="Enter Reason" [(ngModel)]="Reason" value="{{Reason}}" required [disabled]="!enableReasonInput">
</div>
</form>
Related
I have a simple form where I am using a vanilla JS library (https://pristine.js.org/) for form validation. The form validation is successful (mostly) but then the form doesn't submit. For the life of me I can't figure out what's going wrong.The form is supposed to post to a PHP file where I can get the posted variable values.
My HTML page with the form and necessary JS and CSS are in the jsfiddle here. In case JSFiddle is acting up, the actual code's below.
I'd appreciate it if someone can help me out with this.
Thanks a ton!
Dexxterr
P.S.: I've beginner level knowledge about JS.
My HTML Code:
<div style="width: 50%; margin: auto;">
<form class="fv-stacked-form" id="inquiry" method="POST" action="form.php">
<div class="fv-row form-group">
<label>Which industry does your organization belong to?</label>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Manufacturing" id="indManufacturing" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indManufacturing">Manufacturing</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Education" id="indEducation" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indEducation">Education</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="Real Estate" id="indRealestate" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indRealestate">Real Estate</label>
</div>
<div>
<input class="form-control" type="checkbox" name="industry[]" value="" id="indOther" min="1" required data-pristine-min-message="Select at least 1" />
<label class="label-inline" for="indOther">Other</label>
<input style="display: none;" class="label-inline" type="text" name="indOtherValue" id="indOtherValue" value="" minlength="3" class="form-control" data-pristine-min-message="Please enter your industry" />
</div>
</div>
<div class="fv-row form-group">
<label>What is your budget? (In USD)</label>
<input class="form-control" type="number" min="100" required name="budget" data-pristine-min-message="Enter at least 100" />
</div>
<div class="fv-row form-group">
<label>How soon do you want to get started??</label>
<div>
<input class="form-control" type="radio" name="timeline[]" value="Immediately" id="immediately" required />
<label class="label-inline" for="immediately">Immediately</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="3Months" id="3months" required />
<label class="label-inline" for="3months">In the next 3 months</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="6Months" id="6months" required />
<label class="label-inline" for="6months">In the next 6 months</label>
</div>
<div>
<input class="form-control" type="radio" name="timeline[]" value="NoIdea" id="noidea" required />
<label class="label-inline" for="noidea">I don't have a timeline yet</label>
</div>
</div>
<div class="fv-row form-group">
<label>First Name</label>
<input class="form-control" type="text" name="fname" required />
</div>
<div class="fv-row form-group">
<label>Last Name</label>
<input class="form-control" type="text" name="lname" required />
</div>
<div class="fv-row form-group">
<label>Company Email</label>
<input class="form-control" type="email" name="email" required />
</div>
<div class="fv-row form-group">
<label>No. of Employees</label>
<select class="form-control" id="ageRangeField" required>
<option value=""></option>
<option value="1-100">1-100</option>
<option value="100-500">100-500</option>
<option value="500-2500">500-2500</option>
<option value="2500+">2500+</option>
</select>
</div>
<div class="fv-row form-group">
<input name="formsubmit" id="formsubmit" type="submit" class="" value="Submit" />
</div>
</form>
<p id="confmsg" style="display: none;">Thank you for submitting the form.</p>
</div>
My JS Code:
window.onload = function ()
{
var form = document.getElementById("inquiry");
var pristine = new Pristine(form);
form.addEventListener('submit', function (e)
{
e.preventDefault();
var valid = pristine.validate();
// alert('Form is valid: ' + valid);
if(valid === true)
{
// alert("This works");
return true;
}
else
{
// alert("This doesn't work");
}
});
};
var sb = document.getElementById('formsubmit'); // Submit button
var cbother = document.getElementById('indOther'); // Checkbox
var txtother = document.getElementById('indOtherValue'); // Other Textbox
cbother.addEventListener('click',function(e){
if(cbother.checked){
cbother.value=txtother.value;
txtother.style.display = 'block';
}else{
txtother.value='';
txtother.style.display = 'none';
}
},false);
e.preventDefault();
is preventing the form from being submitted. If you simply remove it the form will be submitted even if the pristine check fails. So what you want to do is only prevent the default behaviour (which is the form to be submitted) if the pristine check fails:
form.addEventListener('submit', function (e)
{
var valid = pristine.validate();
// alert('Form is valid: ' + valid);
if(valid === true)
{
// alert("This works");
return true;
}
else
{
e.preventDefault();
// alert("This doesn't work");
}
});
to simplify that a little you could simply write:
form.addEventListener('submit', function (e)
{
//if the pristine check fails, prevent the form from being submitted
if(!pristine.validate()){
e.preventDefault();
}
});
before submit i'm checking 2 fields if one of two fields is checked i return true else false. the problem is that if false is return , ido check one of two checkboxes but the submit button doesn't seem to work(i do console.log()) on click it shows customvalidity message
gif that shows the problem gif
here is code :
function validateForm() {
var checkcapelli = $('#TaglioCapelli').is(':checked');
var checkcolore = $('#checkcolore').is(':checked');
console.log(checkcapelli);
console.log(checkcolore);
console.log("hello");
if (checkcapelli || checkcolore){
return true;
}else{
document.getElementById('TaglioCapelli').setCustomValidity("Selezionare almeno una opzione");
return false;
}
}
form (i removed some fields): I do check two checkboxes:
<form id="userForm" action="php/userForm.php" onsubmit="return validateForm()" method="post">
<div class="modal-body">
<div class="form-group">
<input class="form-check-input" type="checkbox" name ="TaglioCapelli" id="TaglioCapelli" >
<label class="form-check-label" for="TaglioCapelli">
Taglio Capelli
</label>
<input class="form-check-input" type="number" readonly value ="30" name ="tempTaglioCapelli" id="tempTaglioCapelli" >
<label class="form-check-label" for="tempTaglioCapelli">
Tempo in minuti
</label>
</div>
<div class="form-group">
<input class="form-check-input" type="checkbox" name ="checkcolore" id="checkcolore" >
<label class="form-check-label" for="checkcolore">
Colore Capelli
</label>
<input class="form-check-input" type="number" readonly name ="tempcheckcolore" value ="40" id="tempcheckcolore" >
<label class="form-check-label" for="tempcheckcolore">
Tempo in minuti
</label>
</div>
<div class="form-group">
<label for="noteUser">Note</label>
<input type="text" name ="noteUser" class="form-control" id="noteUser" placeholder="Opzionale">
</div>
<div class="form-group">
<label for="finalTime">Tempo finale stimato</label>
<input type="text" name ="finalTime" class="form-control" readonly id="finalTime" placeholder="">
</div>
</div>
<div class="modal-footer">
<div class="form-check mb-2 mr-sm-2 tratdati">
<input class="form-check-input" type="checkbox" required name ="CheckDati" id="CheckDati" checked>
<label class="form-check-label" for="CheckDati">
Autorizzo il trattamento dei dati
</label>
</div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Chiudi</button>
<button type="submit" id="sendUserForm" class="btn btn-primary">Prenota</button>
</div>
</form>
Because when you first submit the form, it puts the form in an 'invalid' state. The form will not submit until the fields are changed to put the form in a valid state.
Two options:
$('input[name="myinput"]').on("blur", () => {
// Do your checks and setCustomValidity depending on if is valid or not
});
Or you can change your submit button to a
type="button" onclick="submitForm()"
function submitForm() {
...do my validation checks
call form.submit() if validation passes.
}
Changing the check box html from
<input class="form-check-input" type="checkbox" name ="TaglioCapelli" id="TaglioCapelli" >
to
<input onClick="this.setCustomValidity('')" class="form-check-input" type="checkbox" name ="TaglioCapelli" id="TaglioCapelli" >
here on click we are nullifying the custom validation added.
Note: in this case even you tried to check other checkbox and try to submit, it will still not submit the form as per the validation logic you have set.
I am working in meteor and am trying to display a block of code when a checkbox is checked. I am new to JS and jquery, but I have research different ways of writing the JS. This is what I came up with:
<div class="recipient">
<div class="toRecipient-container">
<label class="toRecipient">TO:</label>
<input class="toRecipient" type="text" size="45">
</div>
<br>
<div id="checkbox-container" class="checkbox-container">
<label for="newClient">New Client
<input id="newClient" class="newInfo" type="checkbox" onclick="toggle()"></label>
<label for="newBilling" style="padding-left: 20px;">New Billing
<input id="newBilling" class="newInfo" type="checkbox"></label>
</div>
</div>
<div id="billingDetails-container" class="billingDetails-container">
<div class="billingDetails">
<label>Billing Contact:</label>
<input class="billingContact" type="text" size="45">
<label>Billing Phone:</label>
<input class="billingPhone" type="text" size="45">
<div>
<label>Billing Address:</label>
<input class="billingAddress" type="text" placeholder="Street Address" size="45">
<input class="billingAddress" type="text" placeholder="City" size="45">
<input class="billingAddress" type="text" placeholder="State" size="45">
<input class="billingAddress" type="text" placeholder="Zip Code" size="45">
</div>
<label>Billing Email:</label>
<input class="billingEmail" type="text" size="45">
</div>
</div>
And my JS:
Template.InvoicePage.onCreated(function () {
this.state = new ReactiveVar();
});
Template.InvoicePage.helpers({
toggle: ()=>{
var checkBox = document.getElementById("newClient");
var displayBlock = document.getElementById("billingDetails-container");
if (checkBox.checked == true) {
displayBlock.style.display = "block";
} else {
displayBlock.style.display = "none";
}
},
});
Template.InvoicePage.events({
'change #newClient'(event, instance) {
instance.state.set('newClient', event.target.checked)
},
});
When I check the box, I get an error that 'toggle' is undefined. Should this be a template event instead of a helper? What am I missing?
I've never done anything with meteor. There is a lot of different frameworks listed on the website. I'm not sure which one you use (if any). You can't possibly use angular, react and vuejs all at the same time.
Unless I'm wrong and there is a particular reason for the whole
Template.InvoicePage.helpers({...});
simply do
function toggle() {
var checkBox = document.getElementById("newClient");
var displayBlock = document.getElementById("billingDetails-container");
if (checkBox.checked == true) {
displayBlock.style.display = "block";
} else {
displayBlock.style.display = "none";
}
}
It has nothing to do with a framework. Just vanilla javascript and html.
I believe you are trying to show the billingDetails-container when the user selects the New-Client check-box. If that is correct, the below should work
HTML
<div class="recipient">
<div class="toRecipient-container">
<label class="toRecipient">TO:</label>
<input class="toRecipient" type="text" size="45">
</div>
<br>
<div id="checkbox-container" class="checkbox-container">
<label for="newClient">New Client
<input id="newClient" class="newInfo" type="checkbox"></label>
<label for="newBilling" style="padding-left: 20px;">New Billing
<input id="newBilling" class="newInfo" type="checkbox"></label>
</div>
</div>
{{#if showBillingDetails}}
<div id="billingDetails-container" class="billingDetails-container">
<div class="billingDetails">
<label>Billing Contact:</label>
<input class="billingContact" type="text" size="45">
<label>Billing Phone:</label>
<input class="billingPhone" type="text" size="45">
<div>
<label>Billing Address:</label>
<input class="billingAddress" type="text" placeholder="Street Address" size="45">
<input class="billingAddress" type="text" placeholder="City" size="45">
<input class="billingAddress" type="text" placeholder="State" size="45">
<input class="billingAddress" type="text" placeholder="Zip Code" size="45">
</div>
<label>Billing Email:</label>
<input class="billingEmail" type="text" size="45">
</div>
</div>
{{/if}}
JS
Template.InvoicePage.events({
'change #newClient'(event, instance) {
instance.state.set({
'newClient': event.target.checked //Here, we are set the newclient property of state object based on client's selection.
});
}
});
Template.InvoicePage.helpers({
showBillingDetails() {
const state = Template.instance().state.get();
return state && state.newClient; //Here, we use the newclient property of state to decide whether or not to display the billingDetails-container
}
});
I have HTML that looks like this:
<div class="form-group">
<div class="input-group">
<label for="daterange-vacancy" class="input-group-addon">Van</label>
<input type="text" id="daterange-vacancy" class="form-control" name="daterange-vacancy" placeholder="dd/mm/yyyy" data-class="daterangepicker" required="required" />
<label for="daterange-vacancy" class="input-group-addon">
<span class="fa fa-calendar"></span>
</label>
</div>
</div>
<div class="form-group">
<input class="custom-radio" type="radio" id="temp" name="time" value="1" checked="checked" required/><label for="temp" class="bold-sm">Bepaalde dag(en)</label><br/>
<input class="custom-radio" type="radio" id="project" name="time" value="2" required/><label for="project" class="bold-sm">Bepaalde periode</label><br/>
<input class="custom-radio" type="radio" id="struct" name="time" value="3" required/><label for="struct" class="bold-sm">Terugkerend</label>
</div>
<div class="form-group">
<div class="input-checkbox text-left">
<input class="form-checkbox" type="checkbox" id="other" name="other" />
<label for="other">Af te spreken</label>
</div>
</div>
This creates a calendar, 3 radio buttons and a checkbox.
The calendar and 3 radio buttons should be looked at as one, they have to be filled in together or the validation should not let it pass to the next step.
The only exception is when the checkbox is checked. This will disable the calendar and the radiobuttons (and remove the validation on them). Upon unchecking the checkbox again, I want the calendar and the radiobuttons to be required again.
My javascript looks like this:
var other = document.getElementById('other');
if (other) {
other.onchange = function () {
document.getElementById('daterange-vacancy').value = "";
document.getElementById('daterange-vacancy').disabled = this.checked;
$('input[name=other]').change(function(){
if($(this).is(':checked')) {
$('input[name=time]').attr('checked',false);
}
});
}
}
The problem is that the radiobuttons do not uncheck when checking the checkbox. And it does not remove the validation on it.
Here might be a start. And for your own sanity, comment the heck out of your code. It'll help with debugging.
// Create my references
var other = document.getElementById('other');
var vanEl = document.getElementById("daterange-vacancy");
var timeBtnEls = document.getElementsByName("time");
// This will handle the checkbox
if (other) {
other.addEventListener("click", handleOtherClick)
}
// and this will handle all the radio buttons
for (var i = 0; i<timeBtnEls.length; i++) {
timeBtnEls[i].addEventListener("click", handleTimeClick);
}
function handleOtherClick(evt){
// if the box is checked, set the text el to
// disabled.
vanEl.disabled = other.checked;
// set the check status of all radio els to
// the OPPOSITE of the checkbox. End result?
// either NO buttons selected (if the check box
// is selected), or the LAST radio selected (if
// the checkbox is de-selected).
for (var i = 0; i<timeBtnEls.length; i++){
timeBtnEls[i].checked = !other.checked;
}
}
function handleTimeClick(evt){
// The following line will set the checked
// to the OPPOSITE of the currently-clicked
// radio button. I could have simply set it to
// false, but this also works.
other.checked = !evt.target.checked;
// and we re-enabled the text box.
vanEl.disabled = false;
}
<div class="form-group">
<div class="input-group">
<label for="daterange-vacancy" class="input-group-addon">Van</label>
<input type="text" id="daterange-vacancy" class="form-control" name="daterange-vacancy" placeholder="dd/mm/yyyy" data-class="daterangepicker" required="required" />
<label for="daterange-vacancy" class="input-group-addon">
<span class="fa fa-calendar"></span>
</label>
</div>
</div>
<div class="form-group">
<input class="custom-radio" type="radio" id="temp" name="time" value="1" checked="checked" required/>
<label for="temp" class="bold-sm">Bepaalde dag(en)</label>
<br/>
<input class="custom-radio" type="radio" id="project" name="time" value="2" required/>
<label for="project" class="bold-sm">Bepaalde periode</label>
<br/>
<input class="custom-radio" type="radio" id="struct" name="time" value="3" required/>
<label for="struct" class="bold-sm">Terugkerend</label>
</div>
<div class="form-group">
<div class="input-checkbox text-left">
<input class="form-checkbox" type="checkbox" id="other" name="other" />
<label for="other">Af te spreken</label>
</div>
</div>
In my HTML I have 4 fieldsets.
In the second fieldset there are 2 radio buttons. The first one needs to show the thirth fieldset and the second one needs to show the 4th fieldset.
Now the problem is that the second radio button does it's job. It shows the right fieldset and it hides when the first radio button is selected. But the first radio button does nothing anymore.
It won't show the thirth fieldset. This is since I added the classList.remove for the fieldset2 var.
I don't know why this line of code permanently hides the thirth fieldset.
I just found out that the first var gets declined completely. Only the last var will be executed.
Even if I put them in different files or different functions and even if I make different classes for them in css the var will overwrite the first one...
function form
<form>
<fieldset>
<legend>Contactgegevens</legend>
<label for="naam">Naam</label>
<input type="text" id="naam" required/>
<label for="bedrijf">Naam bedrijf</label>
<input type="email" id="bedrijf" required/>
<label for="adres">Adres</label>
<input type="text" id="adres" required/>
<label for="postcode">Postcode</label>
<input type="text" pattern="[1-9][0-9]{3}\s?[a-zA-Z]{2}" id="postcode" placeholder="1234AB" required/>
<label for="plaats">Plaatsnaam</label>
<input type="number" id="plaats" required/>
<label for="telefoon">Telefoon</label>
<input type="tel" id="telefoon" />
<label for="land">E-mail</label>
<input type="text" id="land" placeholder="voorbeeld#email.com" required/>
</fieldset>
<fieldset>
<legend>Ik wil mij aanmelden voor:</legend>
<label for="project">Een project</label>
<input type="radio" name="aanmelden" id="project"/>
<label for="stage">Een stage</label>
<input type="radio" name="aanmelden" id="stage"/>
</fieldset>
<fieldset>
<legend>Project</legend>
<label for="titel">Titel project</label>
<input type="text" id="titel" />
<label for="omschrijving">Opdrachtomschrijving</label>
<textarea id="omschrijving" rows="6" cols="25"></textarea>
<label for="doelgroep">Doelgroepomschrijving</label>
<textarea id="doelgroep" rows="6" cols="25"></textarea>
<label for="intentie">Intentie van het project</label>
<textarea id="intentie" rows="6" cols="25"></textarea>
<label for="looptijd">Looptijd</label>
<input type="text" id="looptijd" placeholder="Bijv: 10 weken"/>
<label for="deadline">Deadline</label>
<input type="text" id="deadline" placeholder="dd-mm-jjjj"/>
<label for="geschikt">Geschikt voor</label>
<select id="geschikt">
<option>Eerstejaar studenten</option>
<option>Tweedejaars studenten</option>
<option>Derdejaars studenten</option>
<option>Afstudeer studenten</option>
<option>Onbekend</option>
</select>
</fieldset>
<fieldset>
<legend>Stage</legend>
<label for="geschikt2">Geschikt voor</label>
<select id="geschikt2">
<option>Tweedejaars studenten</option>
<option>Afstudeer studenten</option>
<option>Onbekend</option>
</select>
<label for="hoelang">Hoelang is de stage?</label>
<select id="hoelang">
<option>10 weken</option>
<option>20 weken</option>
</select>
<label for="begindatum">Begindatum</label>
<input type="text" id="begindatum" placeholder="dd-mm-jjjj"/>
<label for="werkzaamheden">Omschrijving stagewerkzaamheden</label>
<textarea id="werkzaamheden" rows="6" cols="25"></textarea>
</fieldset>
</form>
Keuze(){
console.log("hoi")
var fieldset = document.querySelector('fieldset:nth-of-type(3)');
fieldset.classList.add('hidefield');
document.querySelector('input[type="radio"]:first-of-type').onclick = function() {
fieldset.classList.add('showfield');
}
document.querySelector('input[type="radio"]:last-of-type').onclick = function() {
fieldset.classList.remove('showfield');
}
var fieldset2 = document.querySelector('fieldset:nth-of-type(4)');
fieldset2.classList.add('hidefield');
document.querySelector('input[type="radio"]:last-of-type').onclick = function() {
fieldset2.classList.add('showfield');
}
document.querySelector('input[type="radio"]:first-of-type').onclick = function() {
fieldset2.classList.remove('showfield');
}
}
window.onload=formKeuze;