Consider a form which has many inputs, the inputs each has an radio button associated with them. User selects a radio and the associated input will be displayed.
http://jsfiddle.net/0uL6zzja/
If the number of inputs increase (for example 15) we will end up with lots of boilerplate code in js of all radio buttons ( they all do the same thing, disable other inputs, enable my input)
The js is as:
$('#precentRadio').change(function () {
$("#dolorsInput").attr("disabled", true);
$("#precentInput").attr("disabled", false);
})
$('#dolorsRadio').change(function () {
$("#precentInput").attr("disabled", true);
$("#dolorsInput").attr("disabled", false);
})
Are there any way which can can minimize the code ?!
Working demo
Use a class name for the buttons that trigger the inputs to disable/enable, and a class name for the inputs. Disable them all, and enable the one you want by traversing from the clicked button to the closest .input-group then back down to the input field.
jQuery (this is all)
$('.some-button').change(function () {
$('.some-input').prop("disabled", true);
$(this).closest('.input-group').find('.some-input').prop("disabled", false);
})
HTML
Please enter amount in "$" or "%":<p/>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<input name="switched" checked="checked" type="radio" class="some-button">
</span>
<div class="input-group input-group-applyed-input-manager">
<span class="input-group-addon">$</span>
<input class="form-control some-input" type="text" >
</div>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<input name="switched" type="radio" class="some-button">
</span>
<div class="input-group input-group-applyed-input-manager">
<span class="input-group-addon">%</span>
<input class="form-control some-input" type="text" disabled>
</div>
</div>
</div>
(repeat)
Also disabled="true" isn't correct, it's not a boolean value in HTML, it's either there or not there, and you should use .prop() not attr() for disabled.
You can add a common class to your radio buttons and attach a single event to all of them. From there you can use DOM traversal to only change the related text input. Something like this:
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<input name="switched" class="input-toggle" checked="checked" type="radio" />
</span>
<div class="input-group input-group-applyed-input-manager">
<span class="input-group-addon">$</span>
<input class="form-control" type="text" />
</div>
</div>
</div>
$('.input-toggle').change(function() {
$('.input-group input[type="text"]').prop('disabled', true); // disable all
$(this).closest('.input-group').find('input[type="text"]').prop('disabled', false);
});
Example fiddle
Sure. The correct way to associate radio buttons with a similar function is to use a common name rather than a class. This makes the radio buttons mutually exclusive (so only one of the options in the group can be active at once).
Then, add the jQuery .change handler not to a single item but to all the radio buttons with that name $('input:radio[name=whatever]').change( ... );.
Inside the function, it is easy to write code which enables the text field directly following the radio button that was clicked, using jQuery's next() method, and disables all other text fields that follow other radio buttons in the group.
If you can't change the HTML, but the ids of the radio buttons and inputs will continue to match (xxxRadio and xxxInput), you can handle things by looking up the id of the selected radio button, and enabling the respective input:
$('input[name=switched]').change(
function() {
var selected = $('input[name=switched]:checked');
var selId = selected.attr('id');
var inpId = '#' + selId.replace(/Radio$/, 'Input');
var activeInput = $(inpId);
$('input.form-control').prop('disabled' ,true);
activeInput.prop('disabled', false);
}
);
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
div.input-group > div.input-group > span.input-group-addon {
border-radius: 0px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Please enter amount in "$" or "%":<p/>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<input name="switched" checked="checked" type="radio" id="dolorsRadio">
</span>
<div class="input-group input-group-applyed-input-manager">
<span class="input-group-addon">$</span>
<input class="form-control" type="text" id="dolorsInput">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<input name="switched" type="radio" id="precentRadio">
</span>
<div class="input-group input-group-applyed-input-manager">
<span class="input-group-addon">%</span>
<input class="form-control" type="text" id="precentInput" disabled="true">
</div>
</div>
</div>
Related
I'm trying to disable a radio button if the other one is selected.
Next to the radio input is a text input in which if they choose the option, they would write the age depending on the selection of the radio (months or years).
Ideally, the text input would be disabled too. I have this code right now but it's not working:
<div class="md-form mb-3">
<i class="fas fa-paw prefix grey-text"></i><label data-error="wrong" data-success="right" style="padding-left: 5px">Age: </label>
<br />
<input type="radio" id="age_in_years" name="age_in_years" value="years">
<label for="age_in_years">Años:</label><input id="age_in_years"type="number" name="age_in_years" ng-model="age_in_years" class="form-control" style="margin-left: 5px;width: 70px;"/>
<input type="radio" id="age_in_months" name="age_in_months" value="months">
<label for="age_in_months">Months:</label><input id="age_in_months" type="number" name="age_in_months" value="age_in_months" ng-model="age_in_months" class="form-control" style="margin-left: 5px;width:70px;"/>
</div>
<script>
function selection() {
let x = document.getElementById("age_in_years");
let y = document.getElementById("age_in_months");
if (x.checked()) {
document.getElementById("age_in_months").disabled = true;
}
else if (y.checked()) {
document.getElementById("age_in_years").disabled = true;
}
}
</script>
I would refactor the HTML slightly and generate the radio buttons with the same name so that only 1 can ever be checked at a time. With that in place some simple javascript to determine the other inputs can be used to disable the number input.
label elements should not be used for arbitrary HTML - they are to be associated with input elements ( either using for=ID syntax or by wrapping the input element itself ) - hence some alterations to the markup.
document.addEventListener('change',e=>{
if( e.target.name=='age_unit' ){
let parent=e.target.parentNode;
let self=parent.querySelector(`input[type='number'][name='age[${e.target.value}]']`);
let other=parent.querySelector(`input[type='number']:not( [name='age[${e.target.value}]'] )`);
self.disabled=false;
other.disabled=true;
self.required=true;
other.required=false;
self.focus();
}
})
[type='number']{
width:70px;
}
<div class="md-form mb-3">
<i class="fas fa-paw prefix grey-text"></i>
<h2>Age:</h2>
<input type="radio" name="age_unit" value="years" />
<label>Años:
<input type="number" name="age[years]" ng-model="age_in_years" class="form-control" disabled />
</label>
<input type="radio" name="age_unit" value="months" />
<label>Months:
<input type="number" name="age[months]" ng-model="age_in_months" class="form-control" disabled />
</label>
</div>
A radio type is grouped by the name, so using the same name would already give the behavior you want, without needing any JavaScript.
<div class="md-form mb-3">
<i class="fas fa-paw prefix grey-text"></i>
<label data-error="wrong" data-success="right" style="padding-left: 5px">Age: </label>
<br>
<input type="radio" id="age_in_years" name="age" value="years">
<label for="age_in_years">Años:</label><input id="age_in_years"type="number" name="age_in_years" ng-model="age_in_years" class="form-control" style="margin-left: 5px;width: 70px;"/>
<input type="radio" id="age_in_months" name="age" value="months">
<label for="age_in_months">Months:</label>
<input id="age_in_months" type="number" name="age_in_months" value="age_in_months" ng-model="age_in_months" class="form-control" style="margin-left: 5px;width:70px;"/>
</div>
This would make sure that if one of radio elements is clicked or, once another one is clicked, the previous would be unchecked.
Because you have a value there, there's no reason to use different names, because the value already hints what kind of data has been submitted or is required.
I have a form that implements 3 buttons. Each button offers a different option for the user to select. The page only renders two of the buttons, the last one is hidden. I want to change the ones that display depending on the radio button input.
This is the HTML document that I am working with:
.hidden{
display: none;
}
<label for="pay">Payment Option</label>
<div class="row check">
<div class="col-sm-6">
<input type="radio" id="gcash" name="pay" value="gcash" checked="checked"/>
<label for="gcash" class="pay">Gcash</label>
</div>
<div class="col-sm-6">
<input type="radio" id="walk" name="pay" value="unpaid"/>
<label for="walk" class="pay">Walk In</label>
</div>
</div>
<div class="buttons">
Back
Proceed payment
<input type="submit" class="res-btn hidden" name="btn-submit" value="Submit">
</div>
radio.addEventListener('change', function() {
console.log(this.value)
});
use this handler for getting data of radio
then, find your element and use
element.classList.toggle("hidden");
for toggle class name, which uses in your css
On click of checkbox I want to hide one last input field. I have tried prev and closest but it is not working. There are few other set of same kind of input fields so I just want to target on last input field. So on click of this checkbox I want to hide last input field job_to_date[]. Below is my code.
jQuery('input[name^="currently_work_here"]').change(function() {
if (jQuery(this).is(":checked")) {
jQuery(this).prev('.job_to_date').remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6">
<input type="text" name="job_from_date[]" value="" placeholder="From" class="job_from_date">
</div>
<div class="col-sm-6">
<input type="text" name="job_to_date[]" value="" placeholder="To" class="job_to_date">
</div>
<div class="col-sm-12">
<input type="checkbox" name="currently_work_here[]" class="resume_builder_input input_checkbox"> I currently work here
</div>
Based on your revised HTML you need to use .parent().prev().find('.job_to_date') to locate the element you want to remove:
jQuery('input[name^="currently_work_here"]').change(function() {
if(jQuery(this).is(":checked")) {
jQuery(this).parent().prev().find('.job_to_date').remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6">
<input type="text" name="job_from_date[]" value="" placeholder="From" class="job_from_date">
</div>
<div class="col-sm-6">
<input type="text" name="job_to_date[]" value="" placeholder="To" class="job_to_date">
</div>
<div class="col-sm-12">
<input type="checkbox" name="currently_work_here[]" class="resume_builder_input input_checkbox"> I currently work here
</div>
.prev() alone won't work based on your structure. You need to go up a level via .parent(), then to the previous div with .prev(), finally finding the one to remove with .find('.job_to_date')
Ok, I've been having a really weird problem using a checkbox which collapses a hidden div using bootstrap.
if I have data-toggle="collapse" in the checkbox input attribute section, the Div Collapses but requires that every single one of the inputs inside it be filled out.
If data-toggle="collapse" is not there, the hidden div doesn't collapse, and if the checkbox is checked it requires the inputs to be entered and if it's left unchecked I can submit the form without the inputs being entered. (desired action, but the div doesn't hide or show when the checkbox is checked)
How do I hide/show the div when the checkbox is unchecked/checked AND only require the inputs if the box is checked?
I'm using this as the HTML:
<div class="col-md-1">
<input type="checkbox" onclick="ChangeShip()" href="#moreabout" data-toggle="collapse" aria-expanded="false" aria-controls="moreabout" class="form-control" id="chShipAdd" name="chShipAdd" value="no">
</div>
<label for="chShipAdd" class="col-md-3 control-label">Shipping Information?</label>
<div id="shipadddiv" style="visibility: hidden;">
<div class="collapse" id="moreabout" >
<div class="form-group">
<div class="col-md-12">
<br>
<input id="sStreet" name="sStreet" type="text" placeholder="Street Name (required)" class="form-control shipClass" required>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input id="sCity" name="sCity" type="text" placeholder="City (required)" required class="form-control shipClass">
</div>
<div class="col-md-4">
<input id="sState" name="sState" type="text" placeholder="State (required)" required class="form-control shipClass">
</div>
<div class="hidden-lg hidden-md"> </div>
<div class="col-md-4">
<input id="sZipcode" name="sZipcode" type="text" placeholder="Zip (required)" required class="form-control shipClass">
</div>
</div>
</div>
</div>
and the javascript:
function ChangeShip() {
if (!(document.getElementById('chShipAdd').checked)) {
document.getElementById('shipadddiv').style.visibility="hidden";
$(".shipClass").prop("disabled",true);
}
else {
document.getElementById('shipadddiv').style.visibility="visible";
$(".shipClass").prop("disabled",false);
}
}
Any solution that WORKS will be acceptable. I've bashed my brain all day trying to do this simple action. I've tried .prop .attribute .setAttribute .removeAttribute, and much much more.
Any Advice?
You can use jquery to solve this quickly. You can wrap your inputs for change ship and give it and id. And let jquery do the rest.
var form = $('#myForm'),
checkbox = $('#changeShip'),
chShipBlock = $('#changeShipInputs');
chShipBlock.hide();
checkbox.on('click', function() {
if($(this).is(':checked')) {
chShipBlock.show();
chShipBlock.find('input').attr('required', true);
} else {
chShipBlock.hide();
chShipBlock.find('input').attr('required', false);
}
});
See this jsfiddle for your problem. This should help you.
your click event will toggle the display and the disabled, but when the form is loaded you will have hidden content that is not disabled.
simply call the function on document.ready
function ChangeShip() {
var show = $('#chShipAdd').prop('checked');
$('#shipadddiv').toggle(show);
$("#shipadddiv .shipClass").prop("disabled", !show);
}
$(ChangeShip); // call on document.ready
or simply add the disabled attribute to those elements so that the initial form state is valid
If the [required] attribute is still triggered on a [disabled] element you could juggle the attribute value
function ChangeShip() {
var show = $('#chShipAdd').prop('checked');
$('#shipadddiv').toggle(show);
$("#shipadddiv .shipClass").each(function(){
if (!('_required' in this))
this._required = this.required;
this.disabled = !show;
this.required = (show) ? this._required : false;
});
}
Try to do this :
HTML :
<div class="col-md-1">
<input type="checkbox" onclick="ChangeShip()" href="#moreabout" data-toggle="collapse" aria-expanded="false" aria-controls="moreabout" class="form-control" id="chShipAdd" name="chShipAdd" value="no">
</div>
<label for="chShipAdd" class="col-md-3 control-label">Shipping Information?</label>
<div id="shipadddiv" style="visibility: hidden;">
<div class="collapse" id="moreabout" >
<div class="form-group">
<div class="col-md-12">
<br>
<input id="sStreet" name="sStreet" type="text" placeholder="Street Name (required)" class="form-control shipClass" required>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input id="sCity" name="sCity" type="text" placeholder="City (required)" required class="form-control shipClass">
</div>
<div class="col-md-4">
<input id="sState" name="sState" type="text" placeholder="State (required)" required class="form-control shipClass">
</div>
<div class="hidden-lg hidden-md"> </div>
<div class="col-md-4">
<input id="sZipcode" name="sZipcode" type="text" placeholder="Zip (required)" required class="form-control shipClass">
</div>
</div>
</div>
</div>
JQUERY :
$('#chShipAdd').change(function() {
if ($('#chShipAdd').prop('checked')) {
$('#shipadddiv').show();
} else {
$('#shipadddiv').hide();
}
});
i have two radio buttons used in my form and follow to those two radio buttons i have another field.
I want to show that field if only a certain radio button is checked.otherwise by default it should be hidden.
My code
Payment Type
<div class="list">
<label class="item item-radio">
<input type="radio" name="group">
<div class="item-content">
Immediate Payment
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" name="group">
<div class="item-content">
Scheduled Payment
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
<label><h4><b>Effective Date*</b></h4></label>
<input type="date" >
Here i want to show effective date field only if the user checks the Scheduled Payment radio button. How can i do this?
$("input[name=group]").change(function () {
if ($(this).val() == 'scheduled' && $(this).is(":checked")) {
$("#effectiveWrapper").show();
} else {
$("#effectiveWrapper").hide();
}
});
http://jsfiddle.net/wdckktz7/
AngularJS Code
<div ng-show="payment == 'scheduled'">
<label>
<h4><b>Effective Date*</b></h4>
</label>
<input type="date" />
</div>
http://jsfiddle.net/orr1p1eg/
$("input:radio[name='group']").click(function() {
var value = $(this).val();
if (value == 'Scheduled Payment'){
$("#div").show();
}
else {
$("#div").hide();
}
});
and put your date input inside the div:
<div id="div">
<label><h4><b>Effective Date*</b></h4></label>
<input type="date" >
</div>