Below code is html produced from opencart 2
No radio button is selected when loading page.
How can i have selected the Value="2" as default checked. (javascript or CSS)
<div id="payment-custom-field1" class="form-group custom-field" data-sort="0">
<label class="control-label">Invoice</label>
<div id="input-payment-custom-field1">
<div class="radio">
<label>
<input type="radio" value="2" name="custom_field[1]">
Receipt
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="1" name="custom_field[1]">
Invoice
</label>
</div>
</div>
</div>
Solution with javascript
(function() {
document.getElementsByName("custom_field[1]")[0].checked=true;
})();
<input type="radio" id="sample" value="2" name="custom_field[1]">
Receipt
</label>
Using javascript:
document.getElementById("sample").checked = true;
Using html:
You can simply add checked attribute to your html element
Using the element name:
(function() {
document.getElementsByName("custom_field[1]")[0].checked=true;
})();
https://jsfiddle.net/pandiyancool/vb73q59w/
You can simply add checked attribute
<input type="radio" value="2" name="custom_field[1]" checked>
The solution with javascript was the below code:
document.getElementsByName("custom_field[1]")[0].checked=true;
Thank you Pandiyan Cool
Related
Whenever I try to add a so called additional-options element between the radios on my form, Bootstrap (BS3) causes different margins to be set on the radios. This is not unwanted, unless when hiding these additional options until the desired radio option has been selected (javascript interaction):
$(document).ready(function() {
$("#additional-options-1").css("display", "block");
$("input[type=radio][name=optionsRadios]").change(function() {
if (this.value == "option1") {
$("#additional-options-1").css("display", "block");
} else {
$("#additional-options-1").css("display", "none");
}
});
});
.additional-options {
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<p>
Try changing the following option and take a look at the margins of the available radios. What would be the supposed way to handle the margins? <br /><br />The radio element after the checkboxes requires a 'margin-top: -5px' according to the '.checkbox+.checkbox,
.radio+.radio' CSS rule (by Bootstrap 3) but does not seem to get it after the 'additional-options' element gets a 'display: none;' (by provided javascript).
</p>
<hr />
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Radio option one
</label>
</div>
<div class="additional-options" id="additional-options-1">
<div class="checkbox">
<label>
<input type="checkbox" value="">
Check option one
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">
Check option two
</label>
</div>
</div>
<!--When additional-options is hidden:-->
<!--<div class="radio" style="margin-top: -5px;">-->
<!--Otherwise (no margin-top):-->
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Radio option two
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
Radio option three
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios4" value="option4">
Radio option four
</label>
</div>
<div class="additional-options" id="additional-options-2">
<div class="checkbox">
<label>
<input type="checkbox" value="">
Check option one
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">
Check option two
</label>
</div>
</div>
<!--When additional-options is hidden:-->
<!--<div class="radio" style="margin-top: -5px;">-->
<!--Otherwise (no margin-top):-->
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios5" value="option2">
radio option five
</label>
</div>
JSFiddle
As you can see in the example above, if the user selects any radio (but the first one), the margin betweem radios do not appear correct.
I tried setting in-line margin-top: -5px but this should also be removed again when concerning checkboxes are being shown. When the checkboxes are hidden, the <div class="radio"> right below the concerning <div class="additional-options" ... > should have a margin-top: -5px;. How am I to solve this "margin problem"?
customize bootstrap CSS like
.additional-options {
display: none;
}
.additional-options + .radio{
margin-top:-5px;
}
https://jsfiddle.net/lalji1051/h01wnqoz/2/
Different Margins are causing due to below Bootstrap Class.
.checkbox+.checkbox, .radio+.radio {
margin-top: -5px;
}
Override this class in your local CSS File as below and remove inline style "margin-top:-5px".
.checkbox+.checkbox, .radio+.radio {
margin-top: 10px;
}
I have a few radio buttons, one of which is the 'other' button. If a user clicks 'other' I want to show a text box asking for more info. This is my HTML and JS:
<div class="radio">
<label><input type="radio" name="optradio">Friend</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"> Worked together </label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"> Studied together</label>
</div>
<div class="radio">
<label><input type="radio" name="other-radio" id="connection-invite-other-radio"> Other </label>
</div>
<div class="form-group" id="connection-invite-other">
<input type="text" class="form-control" >
</div>
JS:
$(document).ready(function(){
if($('#connection-invite-other-radio').is(':checked')) {
$('#connection-invite-other').show();
console.log("hi");
}
else {
$('#connection-invite-other').hide();
}
});
This however isn't working. Please help me understand if I'm doing something wrong. Thanks!
The radio needs to have the same name, in your case optradio.
You need to use a change event listener on all radio elements.
$(document).ready(function() {
$('input[type=radio]').change(function() {
if ($('#connection-invite-other-radio').is(':checked')) {
$('#connection-invite-other').show();
} else {
$('#connection-invite-other').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label>
<input type="radio" name="optradio">Friend</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Worked together</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Studied together</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio" id="connection-invite-other-radio">Other</label>
</div>
<div class="form-group" id="connection-invite-other">
<input type="text" class="form-control">
</div>
You need to call change event of radio button to show hide div.
$(document).ready(function(){
$('#connection-invite-other-radio').change(function(){
if($(this).is(':checked')) {
$('#connection-invite-other').show();
console.log("hi");
}
else {
$('#connection-invite-other').hide();
}
});
});
I'm using Javascript and radio buttons for the first time.
I need to know how to assign the script to each radio button that is selected? there seem to be a few ways of doing this and its just getting confusing!
Each question has 4 radio buttons to select from and I need to gather the answers at the end!
Any help appreciated
Just add an event listener to the radio buttons and maintain a mapping where you could store all your answers to.
let answers = {}
$('input[type=radio]').on('click', function (event) {
let question = event.currentTarget.name
let answer = event.currentTarget.value
answers[question] = answer
document.getElementById('result').innerHTML = JSON.stringify(answers, null, 2)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question-block">
<div class="question">
1. Which one is the biggest?
</div>
<div class="answers">
<form>
<input type="radio" name="1" value="1" checked> Elephant<br>
<input type="radio" name="1" value="2"> Whale<br>
<input type="radio" name="1" value="3"> Giraffe
</form>
</div>
</div>
<div class="question-block">
<div class="question">
2. Which one is the smallest animal?
</div>
<div class="answers">
<form>
<input type="radio" name="2" value="1" checked> Bacteria<br>
<input type="radio" name="2" value="2"> Virus<br>
<input type="radio" name="2" value="3"> Ant
</form>
</div>
</div>
<div id="result">
</div>
I have a checkbox. First, I checked, then I want to change the check, and it's possible now.
However, I want to disable this. No one will be allowed to change that checkbox value once selected.
For this what can I do in my code:
view
<div class="control-group">
<label class="control-label">Language Known</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" value="1" name="lang_known"/> Hindi
</label>
<label class="checkbox">
<input type="checkbox" name="lang_known" value="2" /> French
</label>
</div>
</div>
You can achieve it by Jquery like this :
<input class="something" type="checkbox" value="1" />
In Jquery
//On click
$('.something').on('click', function() {
//disable if checked
$(this).prop("disabled", this.checked );
});
Reference Prop
JsFiddle
I am using parsleyjs.org to validate my forms.
The plugin creates a ui.parsley-errors-list when an input has a validation error.
The problem is that the .parsley-errors-list is being placed just after the form element's "input, textarea, radio etc.." breaking my layout as follows:
<fieldset>
<p>Checkboxs with a max</p>
<label class="checkbox parsley-error">
<input name="checkbox2" type="checkbox" required="" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" data-parsley-id="5492"> <span></span>
<p>Normal</p>
</label>
<ul class="parsley-errors-list filled" id="parsley-id-multiple-checkbox2">
<li class="parsley-required">This value is required.</li>
</ul>
<label class="checkbox">
<input name="checkbox2" type="checkbox" data-parsley-multiple="checkbox2" data-parsley-id="5492"> <span></span>
<p>Normal</p>
</label>
<label class="checkbox">
<input name="checkbox2" type="checkbox" data-parsley-multiple="checkbox2" data-parsley-id="5492"> <span></span>
<p>Normal</p>
</label>
</fieldset>
Instead, the .parsley-errors-list need to be positioned to be the last child/element within the container <fieldset>.
Is this achievable?
You can set the error container with (at least) two ways.
Change the container with DOM attributes
In cases where you only have one input (or group of inputs, like you do) and you want to change the container of the errors on those inputs, you can use data-parsley-errors-container="#element" (see the docs). Here is an example (jsfiddle demo)
<fieldset>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" required data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option1" data-parsley-errors-container="#checkbox-errors" /> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option2" /> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option3" /> 3
</label>
<div id="checkbox-errors"></div>
</fieldset>
Note the attribute data-parsley-errors-container="#checkbox-errors" on the first checkbox and the element <div id="checkbox-errors"></div> at the end of the fieldset.
In this case you don't need to add the data-parsley-errors-container to all checkboxes because you're "grouping" them with data-parsley-multiple="checkbox2".
Set a custom configuration to be used by Parsley
In cases where you have a few or all inputs and you want to change the position of the default container. Lets say all your fields are placed inside a fieldset and you want to display the errors at the end of the fieldset.
This solution allows you to change the default container for each field (jsfiddle demo)
<fieldset>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" required data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option1" /> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option2" /> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option3" /> 3
</label>
<div id="checkbox-errors"></div>
</fieldset>
<script>
$(document).ready(function() {
var parsleyConfig = {
errorsContainer: function(parsleyField) {
var fieldSet = parsleyField.$element.closest('fieldset');
if (fieldSet.length > 0) {
return fieldSet.find('#checkbox-errors');
}
return parsleyField;
}
};
$("form").parsley(parsleyConfig);
});
</script>
In this solution we've added the element <div id="checkbox-errors"></div> before the end of the fieldset and changed the errorsContainer option of Parsley. If our element is inside a fieldset the errors will be displayed inside the #checkbox-errors.
Based on this example, you are also able to set the same container for all fields. In this case your options would be something like this (jsfiddle demo):
var parsleyConfig = {
errorsContainer: function(parsleyField) {
return $('#errors');
}
};
For this kind of UI errors in the parsley js.
You can use the data-parsley-errors-container custom validator for placing the parsley error message as per your form needs.
<div>
<div class="radio radio-primary">
<input type="radio" id="cellPhone1" value="1" name="rd_cell_phone" required="" data-parsley-error-message="Please select an option" data-parsley-errors-container="#cell-phone-validation-error-block">
<label for="cellPhone1"> Yes </label>
</div>
<div class="radio radio-primary">
<input type="radio" id="cellPhone0" value="0" name="rd_cell_phone" required="" data-parsley-error-message="Please select an option" data-parsley-errors-container="#cell-phone-validation-error-block">
<label for="cellPhone0"> No </label>
</div>
</div>
<div class="margin-top10" id="cell-phone-validation-error-block"></div>
Try this:
$.listen('parsley:field:error', function(fieldInstance){
var fieldName = fieldInstance.$element.attr('name');
var field = $('input[name="'+fieldName+'"]');
var fieldWrapper = field.parents('fieldset');
if (fieldWrapper.find('.errors_container').length > 0) {
setTimeout(function(){
fieldWrapper.find('.errors_container').append(fieldWrapper.find('.parsley-errors-list'));
},100);
}
});
$('form').parsley();
}
Use class, because it works for many fields.