hi to you all i got my code here which i think is right and which is supposed to work fine but it doesn't.i have a radio button group and a checkbox.each of the radio button has a value which will be used as an amount and the checkbox is there only to enable the textbox that will allow the users to enter the amount they want.i made it possible to enable the textbox by checking if it has been checked first.i want to disable the radio group while the checkbox is enabled.
here is a screenshot of what my page actually looks like
here is my html
<label class="radio-inline" style="margin-left:15%;" >
<input type="radio" id="amount_suggest_1" name="montantdon" value="50 000" onFocus="this.blur()" >
50 000</label>
<label class="radio-inline"><input type="radio" id="amount_suggest_2" name="montantdon" value="25 000" onfocus="this.blur()" >25 000</label>
<label class="radio-inline"><input type="radio" id="amount_suggest_3" name="montantdon" value="10000" onfocus="this.blur()" >10 000</label>
<label class="radio-inline"><input type="radio" id="amount_suggest_4" name="montantdon" value="5000" onfocus="this.blur()" >5000</label>
<label class="radio-inline lastradio"><input type="radio" id="amount_suggest_5" name="montantdon" value="1000" onfocus="this.blur()" checked>1 000</label>
<div class="row" style="padding-left:20px;">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-5" style="width:200px;width:200px;margin:auto;margin-top:2%;">
<div class="input-group input-group-amount" >
<label class=""><input type="checkbox" name="autresdon" id="autresdon" /> Autres</label>
<div style="display:inline-block;vertical-align:top;"><input type="text" style="width:50px;" name="amountentered" id="amountentered" disabled /></div>
<div style="display:inline-block;vertical-align:top;">
<div class="input-group-btn" style="position:relative;">
<button type="button" class="btn btn-default btn-lg dropdown-toggle currency-current" data-toggle="dropdown"><span class="currency" id="currency">EUR-€</span> <span class="caret"></span></button>
and here is my jquery code
$('#autresdon').click(function(){//on click the checkbox
if($('#autresdon').is(':checked'))
{
$('#amountentered').prop("disabled",false);//enables textbox
}
else
{
$('#amountentered').prop("disabled",true);//on unset checkbox disable textbox
}
});
//disabling radio group by using their class as selector
$('.montantdon ').click(function(){
if($('#autresdon').is(':checked'))
{
$('#autresdon').prop("checked",false);
}
});
i dont want both data(value of the radios and amount entered manually) to be posted.how can i solve this issue? thanks
If I understand the question correctly, I'd suggest:
// binds the change-handler:
$('#autresdon').change(function(){
// sets the 'disabled' property to false (if the 'this' is checked, true if not):
$('.radio-inline').prop('disabled', !this.checked);
// triggers the change event (so the disabled property is set on page-load:
}).change();
Incidentally, with JavaScript (and especially in jQuery, in which it becomes entirely unnecessary) stay away from in-line/obtrusive JavaScript. using onFocus/onfocus, onchange, onclick etc makes for a maintenance nightmare and creates some terribly (and, again, unnecessarily) untidy HTML.
References:
change().
prop().
Related
A form with radio buttons. If "Existing" is checked, the "existingnumber" input will be enabled. It works fine during the selection process but does not work onload. On load the input "existingnumber" remains disabled even though it's "checked". This is problematic when the form is submitted, and fails error validation. I've tried appending .change() at the end, and creating a function which I called on document ready but that didn't work. I think I'm missing something. Perhaps I need to get the value first? I'm a bit of a jquery noob.
<input type="radio" name="officephone" value="New" id="officephonenew" >
<label for="officephonenew">New</label><br>
<input type="radio" name="officephone" value="Existing" id="officephoneexisting" checked>
<label for="officephoneexisting">Existing</label><br>
<input type="text" name="existingnumber" placeholder="555-555-1234" /><br>
<input type="radio" name="officephone" value="No" id="officephoneno">
<label for="officephoneno">Not required</label>
$('input:radio[name="officephone"]').change(function(){
$('input[name="existingnumber"]').prop("disabled",true);
if($(this).attr('value') == 'Existing') {
$('input[name="existingnumber"]').prop("disabled", false);
}
});
https://jsfiddle.net/Cormang/sd8xaj9h/10/
To make this work on load simply use filter() to retrieve the checked radio button and trigger() the change event on it.
Also note that you can simplify the logic by providing the boolean output of the condition to the disabled property and by using val().
$('input:radio[name="officephone"]').change(function() {
$('input[name="existingnumber"]').prop("disabled", $(this).val() != 'Existing');
}).filter(':checked').trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="officephone" value="New" id="officephonenew" />
<label for="officephonenew">New</label><br />
<input type="radio" name="officephone" value="Existing" id="officephoneexisting" checked />
<label for="officephoneexisting">Existing</label><br />
<input type="text" name="existingnumber" placeholder="555-555-1234" disabled /><br />
<input type="radio" name="officephone" value="No" id="officephoneno" />
<label for="officephoneno">Not required</label>
I have 2 radio-buttons and a checkbox.
When the first option is "personalized" the checkbox "hidden" should be automatically checked.
<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und">
<label for="edit-field-main-download-category-und">Main Download Category </label>
<div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-general">General </label>
</div>
<div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label>
</div>
</div>
</div>
</div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und">
<input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" /> <label class="option" for="edit-field-hidden-und">Hidden </label>
</div></div>
I've made this script, but it is not working:
jQuery(document).ready(function () {
if ( $('.personalized input').val() = "personalized" ) {
$('.checkbox input').attr('checked');
}
});
You have few problems. As others already pointed out, you are checking document.ready instead of onChange event. So it checks on page load, instead of checking on radio button state change.
Another problem is that you are checking $('.personalized input') value, but you do not have personalized class in your html.
Your radio buttons have common class form-radio. So you can use it as a selector.
$('.form-radio').on("change", function(){
if ( $(this).val() == "personalized" ) {
$('.form-checkbox').prop('checked', true);
}
else{
$('.form-checkbox').prop('checked', false);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field-type-list-text field-name-field-main-download-category field-widget-options-buttons form-wrapper" id="edit-field-main-download-category"><div class="form-item form-type-radios form-item-field-main-download-category-und">
<label for="edit-field-main-download-category-und">Main Download Category </label>
<div id="edit-field-main-download-category-und" class="form-radios"><div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-general" name="field_main_download_category[und]" value="general" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-general">General </label>
</div>
<div class="form-item form-type-radio form-item-field-main-download-category-und">
<input type="radio" id="edit-field-main-download-category-und-personalized" name="field_main_download_category[und]" value="personalized" class="form-radio" /> <label class="option" for="edit-field-main-download-category-und-personalized">Personalized </label>
</div>
</div>
</div>
</div><div class="field-type-list-boolean field-name-field-hidden field-widget-options-onoff form-wrapper" id="edit-field-hidden"><div class="form-item form-type-checkbox form-item-field-hidden-und">
<input type="checkbox" id="edit-field-hidden-und" name="field_hidden[und]" value="1" class="form-checkbox" /> <label class="option" for="edit-field-hidden-und">Hidden </label>
</div></div>
This part:
else{
$('.form-checkbox').prop('checked', false);
}
you only need if you want to un-check if not personalized.
Also take care of .prop() which is used for jQuery 1.6+. For lower versions use .attr()
You have to specify when do you want the script to check if the radio is checked or not. If you use just document.ready() function, it will check it only once, when the site is loaded and since it's not checked - the checkbox won't be checked neither.
You can use following approach: check it with every click event on the radio button.
$('.personalized').click(function() {
if ($(this).is(':checked')) {
$('.checkbox').attr('checked', 'checked');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' class='personalized'>
<input type='checkbox' class='checkbox'>
Simply you need to do it in ready function
jQuery(document).ready(function () {
if ($(".personalized").is(":checked") ) {
$('.checkbox').attr('checked', 'checked');
}
});
if you want them to apply on page load.
You have several problems here:
The code as written only runs on page load. Since you said you want the checkbox to be "automatically" checked, you should attach a change handler to the radio array.
.val() called on a radio array returns the value of the first element in the selected set, regardless of which one is checked. You need to add :checked to your selector to filter down to the one selected radio element.
Your single equals sign is the assignment operator and should be replaced with ===.
.attr('checked') returns the value of the checked attribute. There are actually two problems here: attr only looks at the attribute initially assigned to the element; you need to use prop instead to update the checked property. The second problem is that the one-parameter attr function is used to read the attribute. You want the two-parameter function to set it.
Here's a working example:
jQuery(document).ready(function () {
$('input[name="radio"]').on('change',function(){
if ( $('input[name="radio"]:checked').val() === "personalized" ) {
$('#hidden').prop('checked','checked');
} else {
$('#hidden').prop('checked','');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radio" id="personalized" value="personalized"/><label for="personalized">personalized</label><br/>
<input type="radio" name="radio" id="general" value="general"/><label for="general">general</label><br/>
<input type="checkbox" id="hidden" name="hidden"/><label for="hidden">hidden</label>
I'm trying to use Bootstrap Radio using the following markup and js
<div class="form-control type">
<div class="radio-header">Please select the type of gallery item you want to create</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" div_class="form-inline" class="visibility_switcher" id="type_image_0" value="image" name="dgt_gallery_item[0][type]" />Image</label>
<label class="btn btn-primary">
<input type="radio" div_class="form-inline" class="visibility_switcher" id="type_quote_0" value="quote" name="dgt_gallery_item[0][type]" />Quote</label>
<label class="btn btn-primary">
<input type="radio" div_class="form-inline" class="visibility_switcher" id="type_text_0" value="text" name="dgt_gallery_item[0][type]" />Text</label>
<label class="btn btn-primary">
<input type="radio" div_class="form-inline" class="visibility_switcher" id="type_video_0" value="video" name="dgt_gallery_item[0][type]" />Video</label>
</div>
</div>
$( '#gallery_items .admin-card' ).each( function( index, element ) {
var name = $( 'input:radio:first', this ).attr( 'name' );
var type = $(' input[name="' + name + '"]:checked',this ).val();
switch_visibility_of_gallery_fields_by_type( type, this );
} );
.admin-card is a parnet field that contains many form inputs.
As you see no option is preselected in html, but in jQuery, on firefox, the first radio results checked. This is also true in bootstrap as selecting the first option doesn't trigger the "change" event. This works as expected in chrome 64 Windows.
Any idea on what to use on firefox?I need to get the value of the first checked radio or undefined if no radio is checked.
Firefox persists form control states (disabledness and checkedness)
across page loads. A workaround for this is to use autocomplete="off".
Try adding autocomplete="off" for the input fields.
<input type="radio" div_class="form-inline" class="visibility_switcher" id="type_image_0" value="image" name="dgt_gallery_item[0][type]" autocomplete="off" />
I don't quite understand how JQM works with radio buttons. I have the following code:
<fieldset data-type="horizontal" data-role="controlgroup">
<label for="radio-choice-h-2a"> Brands </label>
<input name="radio-choice-h-2" id="radio-choice-h-2a" type="radio" checked="checked" class="active" autocomplete="off">
<label for="radio-choice-h-2b"> Stores </label>
<input name="radio-choice-h-2" id="radio-choice-h-2b" type="radio" class="" autocomplete="off">
</fieldset>
JQM does its magic and adds HTML / classes. The result is this:
<fieldset data-type="horizontal" data-role="controlgroup" class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all"><div class="ui-controlgroup-controls ">
<div class="ui-radio">
<label for="radio-choice-h-2a" class="ui-btn ui-corner-all ui-btn-inherit ui-first-child ui-btn-active ui-radio-on"> Brands </label>
<input name="radio-choice-h-2" id="radio-choice-h-2a" type="radio" checked="checked" class="active" autocomplete="off" data-cacheval="false">
</div>
<div class="ui-radio">
<label for="radio-choice-h-2b" class="ui-btn ui-corner-all ui-btn-inherit ui-last-child ui-radio-off"> Stores </label>
<input name="radio-choice-h-2" id="radio-choice-h-2b" type="radio" class="" autocomplete="off" data-cacheval="true"></div>
</div>
</fieldset>
I can add logic when a button changes state:
$(document).on('change', '#main-search-result .ui-radio', function(){
//Do something
});
Q1: Why is this working? .ui-radio is just a DIV and does not have a state like a radiobutton.
Q2: How can I detect when the unchecked button is clicked?
UPDATE
I've discovered checkboxradio in the API:
var disabled = $( "#main-search-result .ui-radio" ).checkboxradio( "option", "disabled" );
But I'm not sure if I'm using the right selector.
Disabled is not the same thing as unchecked. Disabled is when you want to prevent the user from changing the state of the button (button is grayed out).
jQM uses the label element as the actual button the user clicks. Checked items have the class ui-btn-active, while unchecked items don't have this class. So you could detect clicks on unselected items like this:
$(document).on("click", '.ui-radio label:not(.ui-btn-active)', function(e){
alert("unchecked button clicked!");
});
.ui-radio label:not(.ui-btn-active) means all labels that do not have the ui-btn-active class, that are within containers having the ui-radio class.
DEMO
Demo includes just detecting the change on the underlying radio inputs.
I have a Twitter Bootstrap form that has 6 vertical check boxes. I need to have an input form field each time they select a checkbox. It could be in the form of a popup or maybe something that appears out to the right of the checkbox. I figure this is some kind of javascript function but I have no idea how to do so. Any suggestions would be greatly appreciated. Each textbox if selected should have a field that pops up asking them for how many years experience they have in this certain field. This will info will be collected via $_POST variables. So each checkbox popup should have its own unique name so i can post it.
<div class="form-group">
<label class="col-md-4 control-label" for="positionsought">Position Sought</label>
<div class="col-md-4">
<div class="checkbox">
<label for="positionsought-0">
<input type="checkbox" name="positionsought" id="positionsought-0" value="Cutting">
Cutting
</label>
</div>
<div class="checkbox">
<label for="positionsought-1">
<input type="checkbox" name="positionsought" id="positionsought-1" value="Sewing">
Sewing
</label>
</div>
<div class="checkbox">
<label for="positionsought-2">
<input type="checkbox" name="positionsought" id="positionsought-2" value="Upholstery">
Upholstery
</label>
</div>
<div class="checkbox">
<label for="positionsought-3">
<input type="checkbox" name="positionsought" id="positionsought-3" value="Frame Department">
Frame Department
</label>
</div>
<div class="checkbox">
<label for="positionsought-4">
<input type="checkbox" name="positionsought" id="positionsought-4" value="Mill Room">
Mill Room
</label>
</div>
<div class="checkbox">
<label for="positionsought-5">
<input type="checkbox" name="positionsought" id="positionsought-5" value="Cushion">
Cushion
</label>
</div>
<div class="checkbox">
<label for="positionsought-6">
<input type="checkbox" name="positionsought" id="positionsought-6" value="Any">
Any
</label>
</div>
</div>
</div>
Although you already have found an answer, I believe that this would work better for your situation since you say you will have 6 checkboxes. This dynamically creates input fields for each checkbox by their names and removes them when the checkbox is unchecked.
First add this function to each checkbox onclick="dynInput(this);"
<input type="checkbox" name="check1" onclick="dynInput(this);" />
and add this to wherever you would like the inputs to display.
<p id="insertinputs"></p>
Then simply add this javascript function to your head.
<script type="text/javascript">
function dynInput(cbox) {
if (cbox.checked) {
var input = document.createElement("input");
input.type = "text";
var div = document.createElement("div");
div.id = cbox.name;
div.innerHTML = "Text to display for " + cbox.name;
div.appendChild(input);
document.getElementById("insertinputs").appendChild(div);
} else {
document.getElementById(cbox.name).remove();
}
}
</script>
JsFiddle here: http://jsfiddle.net/brL6gy7r/
You can use JavaScript here to do the job. When the checkbox is clicked and checked (because you can also check out.) a dialog will pop-up with all input-fields you want. You can change the dialog part to your desires. but this part is your main function:
$(document).ready(function () {
$('#chkBox').click(function () {
if ($(this).is(':checked')) {
// create input field
} else {
// if checkbox is not checked.. dont show input field
}
});
});
For a full demo on how to do this with a dialog, click this link and observe
http://jsfiddle.net/Runman44/5vy1m233/
Notice that you will need jQuery (and jQuery UI if you want to use the dialog like me)
There is a zero-JavaScript version that is dead simple and works in all major browsers. It takes advantage of the :checked pseudo-class and the adjacency selector. It works with an arbitrary number of checkboxes.
HTML:
<input type="checkbox" />
<input type="text" />
CSS:
input[type=text] {
visibility:hidden;
}
input[type=checkbox]:checked + input[type=text] {
visibility:visible;
}
here is the live demo
If you prefer, you can use display:none and display:inline rather than the visibility property.
The example I've provided assumes that the text field immediately follows the checkbox in the markup, but some variant of sibling/child selectors can be used to select it no matter where it is, as long as it is either a sibling or child (direct or indirect) of the checkbox.