Develop Reference

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>

How to get focusin for all textbox? using javascript event not using jquery

Hello Guys, I need help a little bit. Can anyone help me, how to use
this keyword in my case?
<form>
<div class="form-group">
<label for="txtFirstName">Your name</label>
<input id="txtFirstName" name="txtFirstName" type="text" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<label for="txtEmail">Email address</label>
<input id="txtEmail" name="txtEmail" type="email" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<select id="drpPosition" name="drpPosition">
<option>I would describe my user type as </option>
<option>Web developer </option>
<option>Web designer </option>
</select>
</div>
<div class="form-group">
<label for="txtPassword">Password</label>
<input id="txtPassword" type="password" class="cool" autocomplete="off" class="inputBox" />
<small>Minimum 8 characters</small>
</div>
<div class="form-group">
<input type="submit" name="btnSubmit" id="btnSubmit" value="Next" />
</div>
</form>
This is my JavaScript Code:
var inputFirstName = document.querySelector('.inputBox');
console.log(inputFirstName);
this.addEventListener('focusin', inputAddClassFunc);
this.addEventListener('focusout', inputRemoveClassFunc);
function inputAddClassFunc(event){
console.log(this);
this.previousElementSibling.classList.add('active');
}
function inputRemoveClassFunc(event){
var hasValue = this.value;
if(!hasValue) {
this.previousElementSibling.classList.remove('active');
}
}
When I focusin into the textbox, active class will be added to it's
sibling's lable And in my case, It only works in first textbox but not
for all textbox. How can I use "this" to works for all textbox?

I'd use event delegation instead - add focusin and focusout listeners to the form, and when the event fires, if the target of the event is one of the .inputBoxes, carry out the logic to change the class of the event.target.previousElementSibling:
const form = document.querySelector('form');
form.addEventListener('focusin', inputAddClassFunc);
form.addEventListener('focusout', inputRemoveClassFunc);
function inputAddClassFunc(event) {
if (event.target.matches('.inputBox')) {
event.target.previousElementSibling.classList.add('active');
}
}
function inputRemoveClassFunc(event) {
if (event.target.matches('.inputBox')) {
var hasValue = event.target.value;
if (!hasValue) {
event.target.previousElementSibling.classList.remove('active');
}
}
}
.active {
background-color: yellow;
}
<form>
<div class="form-group">
<label for="txtFirstName">Your name</label>
<input id="txtFirstName" name="txtFirstName" type="text" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<label for="txtEmail">Email address</label>
<input id="txtEmail" name="txtEmail" type="email" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<select id="drpPosition" name="drpPosition">
<option>I would describe my user type as </option>
<option>Web developer </option>
<option>Web designer </option>
</select>
</div>
<div class="form-group">
<label for="txtPassword">Password</label>
<input id="txtPassword" type="password" autocomplete="off" class="inputBox" />
<small>Minimum 8 characters</small>
</div>
<div class="form-group">
<input type="submit" name="btnSubmit" id="btnSubmit" value="Next" />
</div>
</form>
Also note that if you want the txtPassword element to have the inputBox class, you should change
<input id="txtPassword" type="password" class="cool" autocomplete="off" class="inputBox" />
to
<input id="txtPassword" type="password" autocomplete="off" class="inputBox" />
(remove the duplicate cool attribute)

QuerySelectorAll identifying all but not adding effect to all

I ve created simple html form and I want to animate the input fields labels using javascript. I used querySellectorAll method to identify the objects and console logged querySelectorAll(object).length to check the value and it logged correctly. But effect only working only for first 4 input fields (.form__row) . Why is that and also in the console shows error
Cannot read property 'value' of null
const FloatLabel = (() => {
// add active class
const handleFocus = e => {
const target = e.target;
target.parentNode.classList.add('active');
};
// remove active class
const handleBlur = e => {
const target = e.target;
if (!target.value.trim()) {
target.parentNode.classList.remove('active');
target.value = '';
}
};
// register events
const bindEvents = element => {
const floatField = element.querySelector('.form__input');
floatField.addEventListener('focus', handleFocus);
floatField.addEventListener('blur', handleBlur);
};
// get DOM elements
const init = () => {
const floatContainers = document.querySelectorAll('.form__row');
console.log(floatContainers);
if (floatContainers.length) {
floatContainers.forEach((element) => {
if (element.querySelector('.form__input').value) {
element.classList.add('active');
}
bindEvents(element);
});
};
}
return {
init: init
};
})();
FloatLabel.init();
<main class="signin">
<form action="" class="form__signin">
<section class="form__section">
<span class="form__section-title">
Account information
</span>
<div class="form__container">
<div class="form__row">
<label for="uname" class="form__label">User name</label>
<input type="text" class="form__input" name="uname" id="uname" required/>
</div>
<div class="form__row">
<label for="email" class="form__label">Email</label>
<input type="email" class="form__input" name="email" id="email" required/>
</div>
<div class="form__row">
<label for="password" class="form__label">Password</label>
<input type="password" class="form__input" name="password" id="password" required/>
</div>
<div class="form__row">
<label for="confirm" class="form__label">Confirm password</label>
<input type="password" class="form__input" name="confirm" id="confirm" required/>
</div>
</div>
</section>
<section class="form__section">
<span class="form__section-title">
Personal information
</span>
<div class="form__container">
<div class="form__row">
<label for="mr" class="form__label-radio">Master</label>
<input type="radio" class="form__input-radio radio--box" name="title" id="mr" value="mr" required />
<label for="ms" class="form__label-radio">Miss</label>
<input type="radio" class="form__input-radio radio--box" name="title" id="ms" value="ms" required />
</div>
<div class="form__row">
<label for="fname" class="form__label">First name</label>
<input type="text" class="form__input" name="fname" id="fname" required/>
</div>
<div class="form__row">
<label for="lname" class="form__label">Last name</label>
<input type="text" class="form__input" name="lname" id="lname" required/>
</div>
<div class="form__row">
<label for="bdate" class="form__label-select-group">Date of birth</label>
<select name="bdate" id="bdate" class="form__input-select"></select>
<select name="bmonth" id="bmonth" class="form__input-select"></select>
<select name="byear" id="byear" class="form__input-select"></select>
</div>
<div class="form__row">
<label for="bdate" class="form__label">Country</label>
<select name="country" id="country" class="form__input-select"></select>
</div>
</div>
</section>
<section class="form__section">
<span class="form__section-title">
Contact information
</span>
<div class="form__container">
<div class="form__row">
<label for="housenonstreet" class="form__label">House no and street no</label>
<input type="text" class="form__input" name="housenonstreet" id="housenonstreet" required/>
</div>
<div class="form__row">
<label for="city" class="form__label">City</label>
<input type="text" class="form__input" name="city" id="city" required/>
</div>
<div class="form__row">
<label for="postal" class="form__label">Postal Code</label>
<input type="text" class="form__input" name="postal" id="postal" required/>
</div>
<div class="form__row">
<select name="ccode" id="ccode" class="form__input-select"></select>
<label for="" class="form__label">Mobile no</label>
<input type="text" class="form__input">
</div>
</div>
</section>
</form>
</main>

You have a form__row that doesn't have a form__input in it.
<div class="form__row">
<label for="mr" class="form__label-radio">Master</label>
<input type="radio" class="form__input-radio radio--box" name="title" id="mr" value="mr" required />
<label for="ms" class="form__label-radio">Miss</label>
<input type="radio" class="form__input-radio radio--box" name="title" id="ms" value="ms" required />
</div>
So you need to check that element.querySelector(".form__input") returns something before trying to use its value.
floatContainers.forEach((element) => {
let input = element.querySelector('.form__input');
if (!input) {
return;
}
if (input.value) {
element.classList.add('active');
}
bindEvents(element);
});
You should have a similar check in bindEvents(). Or you could just change it so that it receives the input as a parameter, rather than the DIV.

Checkbox not display element when checked in meteor

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
}
});

Ajax submit handler not working , validation working though

Its a simple form that looks like below:
<form class="form register-form" data-parsley-validate data-parsley-excluded="input[type=button],input[type=submit], input[type=reset]" method="POST">
<div class="notification hide"></div>
<div class="row first-rg">
<div class="col-sm-6">
<input type="text" class="tfield-2" name="contact_fname" id="contact_fname" placeholder="First Name*" required data-parsley-trigger="focusout">
<div style="display:none;"><input type="text" class="tfield-2" name="contact_projectname" id="contact_projectname" value="Royal Pearls"></div>
</div>
<div class="col-sm-6">
<input type="text" class="tfield-2" name="contact_lname" id="contact_lname" placeholder="Last Name*" required data-parsley-trigger="focusout">
</div>
</div>
<div class="row second-rg">
<div class="col-sm-6">
<input type="text" id="contact_phone" placeholder="Phone No. *" name="contact_phone" maxlength="50" required="" class="international-number-input international-phone-number-input intl-phone-number-input" aria-required="true" autocomplete="off" data-parsley-intl-tel-no data-parsley-trigger="focusout" required>
</div>
<div class="col-sm-6">
<input type="email" class="tfield-2" name="contact_email" id="contact_email" placeholder="Email*" data-parsley-type="email" data-parsley-trigger="focusout" data-parsley-error-message="Enter Valid Email" required>
</div>
</div>
<p class="form-tag">Are you searching for a</p>
<div class="checkbox regiterpage">
<label class="background-co">
<input
type="checkbox"
value="1"
name="bedroom[]"
required
type="checkbox"
data-parsley-mincheck="1"
data-parsley-error-message="Check atleast 1"
>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 1 Bedroom </label>
<label class="background-co" >
<input type="checkbox" value="2" name="bedroom[]">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 2 Bedrooms </label>
<label class="background-co">
<input type="checkbox" value="3" name="bedroom[]">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 3 Bedrooms </label>
<label class="background-co">
<input type="checkbox" value="4" name="bedroom[]">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 4 Bedrooms </label>
</div>
<div class="radioin">
<p class="form-tag">Are you searching for a property as an</p>
<label class="radio-inline background-co">
<input type="radio"
name="propertytype"
required
data-parsley-mincheck="1"
data-parsley-error-message="Check atleast 1"
>
<span class="rlabl">End-user / Owner-occupier</span> </label>
<label class="radio-inline background-co">
<input type="radio" name="optradio">
<span class="rlabl">Investor</span> </label>
</div>
<!-- HIDDEN INPUTS FOR google captcha -->
<input type="hidden" value="No Bots" id="google-captcha" required>
<input type="hidden" id="google-captcha-check" data-parsley-equalto="#google-captcha" data-parsley-error-message="Fill the captcha!" required>
<!-- HIDDEN INPUTS FOR google captcha -->
<div class="captch">
<div class="g-recaptcha" data-sitekey="6LdksigUAAAAAKw5idd69Xa3ysK_RZJ3xAleTbVj" data-callback="google_captcha_callback" data-expired-callback="google_captcha_callback"></div>
</div>
<button type="submit" class="btn-default">Submit</button>
</form>
Now i have validated the form using parsely.js , the validation works just fine , but there is a problem with my submit handler, i have the following submit handler in my form:
$('.register-form').submit(function() {
$.ajax({
type: 'POST',
url: 'mail/reg_send.php',
data : $('.register-form').serialize(),
success : (data , status) => {
(data === 'success') ? $('.notification').text('Thank you for contacting us.').removeClass('hide') : $('.notification').text('There was a problem submitting your form').removeClass('hide');
$('.register-form')[0].reset();
}
});
return false;
});
But even though i have a submit handler and a return false in the submit handler, the page still refreshes and even the i add a breakpoint to my submit handler in my dev tools , the breakpoint is never reached. Why ? what am i doing wrong here ?
I have tried changing the submit handler to something more generic such as:
$('form').submit((){
// code here
})
But my page will still refreah. Why ?

Include the event in the handler with function(e) and prevent default on it.
$('.register-form').submit(function(e) {
e.preventDefault();
// the rest of your code
});
Your other problem might be that your event handler is not being attached to the element because it is not available when the JavaScript is executed. You can test this easily by using the following instead:
$(document).on("submit", ".register-form", function(e) {
e.preventDefault();
// the rest of your code
});