How to uncheck checkboxes and remove validation - javascript

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>

Related

form submit button doesn't work after onsubmit return false

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.

Disable Multiple input fields using multiple radio boxes

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>

Hiding a form with javascript - Not defined

I'm trying to hide two fields on my form depending on the selection of the use on the radio field. This is the field HTML:
function show1() {
document.getElementByClass('extra').style.display = 'none';
}
function show2() {
document.getElementByClass('extra').style.display = 'block';
}
<div class="form-radio">
<div class="radio">
<label>
<input type="radio" name="radio" onclick="show1();" /><i class="helper"></i>
I can come
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" onclick="show2();" /><i class="helper"></i>
I cant come
</label>
</div>
</div>
<div class="form-group extra">
<input type="text" required="required" />
<label class="control-label" for="input">Dietary Requirements</label>
<i class="bar"></i>
</div>
<div class="form-group extra">
<input type="text" required="required" />
<label class="control-label" for="input">What song would you like played?</label>
<i class="bar"></i>
</div>
It should work by hiding the dietary requirements and what song fields when the user selects "I can't come" on the radio field. I get the following result:
Uncaught ReferenceError: show2 is not defined
at HTMLInputElement.onclick ((index):627)
Your code fails for two reasons:
There is no method of document called getElementByClass. The correct method to use is getElementsByClassName.
The methodgetElementsByClassName returns an HTMLCollection and not a single element, so setting style.display for the HTMLCollection won't have the desired effect, because you are not setting it for each individual element of it, but rather for the HTMLCollection object itself.
The correct code is:
function show() {
/* Cache the collection. */
var extra = document.getElementsByClassName('extra');
/* Iterate over every element in the collection. */
[].forEach.call(extra, function (element) {
element.style.display = 'block';
});
}
function hide() {
/* Cache the collection. */
var extra = document.getElementsByClassName('extra');
/* Iterate over every element in the collection. */
[].forEach.call(extra, function (element) {
element.style.display = 'none';
});
}
Snippet:
/* ----- JavaScript ----- */
function show() {
/* Cache the collection. */
var extra = document.getElementsByClassName('extra');
/* Iterate over every element in the collection. */
[].forEach.call(extra, function(element) {
element.style.display = 'block';
});
}
function hide() {
/* Cache the collection. */
var extra = document.getElementsByClassName('extra');
/* Iterate over every element in the collection. */
[].forEach.call(extra, function(element) {
element.style.display = 'none';
});
}
<!----- HTML ----->
<div class="form-radio">
<div class="radio">
<label>
<input type="radio" name="radio" onclick="show();" checked/>
<i class="helper"></i>
I can come
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" onclick="hide();"/>
<i class="helper"></i>
I cant come
</label>
</div>
</div>
<div class="form-group extra">
<input type="text" required="required" />
<label class="control-label" for="input">Dietary Requirements</label>
<i class="bar"></i>
</div>
<div class="form-group extra">
<input type="text" required="required" />
<label class="control-label" for="input">What song would you like played?</label>
<i class="bar"></i>
</div>
you can use jQuery instead of javascript.
jQuery(document).ready(function($){
$('input:radio[name="radio"]').change(function(){
if($(this).val() == 'hide'){
$('.extra').hide();
}
else {
$('.extra').show();
}
});
});
<div class="form-radio">
<div class="radio">
<label>
<input type="radio" name="radio" value="show" /><i class="helper"></i>
I can come
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" value="hide" /><i class="helper"></i>
I cant come
</label>
</div>
</div>
<div class="form-group extra">
<input type="text" required="required" />
<label class="control-label" for="input">Dietary Requirements</label>
<i class="bar"></i>
</div>
<div class="form-group extra">
<input type="text" required="required" />
<label class="control-label" for="input">What song would you like played?</label>
<i class="bar"></i>
</div>

create a textarea dynamically with javascript

I want create textarea with javascript when I click on the "yes" radio button in a appropriate div place with id?
<div class="controls">
<input type="radio" name="name" id="optionsRadios" value="no" checked><b>NO</b>
<input type="radio" name="name" id="optionsRadios" value="yes" ><b>YES</b>
</div>
<div id="positiontext"></div>
help me
Instead of creating & removing the textarea, I would set its display like
function nameChange(el) {
document.getElementById('positiontext').style.display = el.value == 'yes' ? '' : 'none';
}
<div class="controls">
<input type="radio" name="name" id="optionsRadios" value="no" onchange="nameChange(this)" checked /><b>NO</b>
<input type="radio" name="name" id="optionsRadios" value="yes" onchange="nameChange(this)" /><b>YES</b>
</div>
<div id="positiontext" style="display: none;">
<textarea name=""></textarea>
</div>
Try this by adding the onclick event to the yes radio button,
<input type="radio" name="name" id="optionsRadios" value="yes" onchange="addDIV()">
In javascript,
<script>
function addDIV() {
document.getElementById('positiontext').innerHTML = "<input type='textarea' name='myText' />"
}
</script>
FIDDLE DEMO
i think you should need to do this by using gome function which are specially made for this:
<div class="controls">
<input type="radio" name="name" id="optionsRadios" value="no" checked><b>NO</b>
<input type="radio" name="name" id="optionsRadios" value="yes" onclick="addtxt();" ><b>YES</b>
</div>
<div id="positiontext"></div>
javascript:
var addtxt = function(){
var positiontext(parent) = document.getElementById("positiontext");
var textarea(child) = document.createElement("textarea");
textarea(child).addAttribute("style", "(some properties)") //there are other ways also to add some attribute but for now use this
positiontext(parent) .appendChild("textarea(child)")
}

How do I get the label of the selected radio button using javascript

I have the following HTML
<div class="form-radios" id="edit-submitted-lunchset-lunch"><div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="1" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-1"> <label for="edit-submitted-lunchset-lunch-1" class="option">12:00 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="2" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-2"> <label for="edit-submitted-lunchset-lunch-2" class="option">12:30 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="3" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-3"> <label for="edit-submitted-lunchset-lunch-3" class="option">13:00 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="4" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-4"> <label for="edit-submitted-lunchset-lunch-4" class="option">13:30 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="5" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-5"> <label for="edit-submitted-lunchset-lunch-5" class="option">14:00 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" checked="checked" value="6" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-6"> <label for="edit-submitted-lunchset-lunch-6" class="option">14:30 </label>
</div>
</div>
I am trying to retrieve the label associated with the radio button instead of the value using the following javascript but the variable "chosentime" is still "unassigned". I checked my code by throwing in a few alerts the alert(radios[i].innerhtml); throws unassigned
var radios = document.getElementsByName('submitted[lunchset][lunch]');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
alert(i);
alert(radios[i].value);
alert(radios[i].innerhtml);
chosentime = radios[i].innerhtml;
}
}
window.alert(chosentime);
}
Would appreciate any help. Thanks in advance.
You have to access the corresponding label separately, since it resides in a separate tag. Because the labels' for attribute is equal to its option's id, you can get to the label easily:
for(var i=0; i<radios.length; i++) {
var selector = 'label[for=' + radios[i].id + ']';
var label = document.querySelector(selector);
var text = label.innerHTML;
// do stuff
}
Also check out this fiddle
Using modern Javascript and CSS this is easy now.
input.labels
Give your button an id, and then give the label a for='id' making sure it is the same id as the button.
Buttons can have multiple labels so it returns a NodeList, if you only have 1 label, just take the first item in the list.
radioButtonClicked.labels[0];
Docs here.
Here is an example of how you would setup the HTML:
<div class="controls">
<input type="radio" name="select" id="large" class="radioButtons" checked>
<input type="radio" name="select" id="medium" class="radioButtons">
<input type="radio" name="select" id="small" class="radioButtons">
<input type="radio" name="select" id="tiny" class="radioButtons">
<label for="large" class="option option-1 checked">
<span class="optionLabel">Large</span>
</label>
<label for="medium" class="option option-2">
<span class="optionLabel">Medium</span>
</label>
<label for="small" class="option option-3">
<span class="optionLabel">Small</span>
</label>
<label for="tiny" class="option option-4">
<span class="optionLabel">Tiny</span>
</label>
</div>
A radiobutton have no innerhtml. You need to target the label. If it's always directly after the radio-button, try something like radios[i].nextSibling.innerhtml.

Categories

Resources