I am trying to create a user input form that will disable/enable inputs depending on a prior input.
var test = document.getElementById("type");
console.log(test.value);
if (test.value == 'Limited') {
console.log('should be disabled');
var radios = document.getElementById("disableme");
for (var i = 0, iLen = radios.length; i < iLen; i++) {
radios[i].disabled = true;
}
}
function toggle() {
if (test.value == 'Limited') {
console.log('should be disabled');
var radios = document.getElementById("disableme");
for (var i = 0, iLen = radios.length; i < iLen; i++) {
radios[i].disabled = true;
}
} else if (test.vlaue !== 'Limited') {
console.log('should be enabled');
var radios = document.getElementById("disableme");
for (var i = 0, iLen = radios.length; i < iLen; i++) {
radios[i].disabled = false;
}
}
}
<select id="type" name="type" placeholder="" style="width: 300px" onchange="toggle()">
<option>Administrator
<option>Elevated
<option selected="selected">Limited
</select>
<form name="disableme" id="disableme">
Alerts & Messages : Yes <input type="radio" name="alert" id="alert" value='1'> No <input type="radio" name="alert" id="alert" checked="checked" value='0'>
</form>
Here is what my page currently looks like upon load:
With the limited option selected, I want both radio buttons to be disabled and the no radio button checked. If the user selects Administrator or Elevated I want those radio buttons enabled. I have made it this far.
My only issue now is that when I switch back to limited, having checked the yes radio button, the yes will remain checked while the radio buttons are disabled.
You will see my radio buttons have the same name/id. This was done to prevent both being selected at the same time.
In your current code, radios always refers to a form element. While in your case the only elements in that form are the radio buttons, assuming that to be the case is risky. Someone else might come along and add a button and then your button starts getting disabled and everyone freaks out.
Instead, just target the radio buttons. In the code below, I've targeted them by name, since that is shared among the radio buttons I think you want to target.
(I should note that, semantically, all form elements (including select elements) should belong to a form in order to aid submission. If you're not submitting the form to a server, this is less of a constraint.)
In any case, I've simplified the code a bit to only require a single loop over the radio buttons; if the selected item is "Limited", it sets the radios to disabled, and sets the "No" item to checked. If the selected item is not "Limited" it enables the radios and leaves the checked state alone.
var test = document.getElementById("type");
function toggle() {
console.log(test.value);
var radios = document.querySelectorAll('input[name="alert"]');
for (var i = 0, iLen = radios.length; i < iLen; i++) {
radios[i].disabled = test.value == 'Limited';
if (test.value == 'Limited') {
radios[i].checked = radios[i].value === '0';
}
}
}
toggle();
<select id="type" name="type" placeholder="" style="width: 300px" onchange="toggle()">
<option>Administrator</option>
<option>Elevated</option>
<option selected="selected">Limited</option>
</select>
<form name="disableme" id="disableme">
Alerts & Messages : Yes <input type="radio" name="alert" id="alert" value='1'> No <input type="radio" name="alert" id="alert" checked="checked" value='0'>
</form>
Related
I'm using JavaScript to get value from the radio boxes to insert it to the database as a string. What I need is that I have more than 2 radio boxes. How would I make use of Javascript to add the values to my database?
Here is my code:
<td>
<input type="radio" name="company_grp" class="largerCheckbox" value='Sentinel' checked="checked">
Sentinel GM
</td>
<td>
<input type="radio" name="company_grp" class="largerCheckbox" value='GuardTrack'>
GuardTrack
</td>
<td>
<input type="radio" name="company_grp" class="largerCheckbox" value='GuardingProduct'>
Guarding Product
</td>
if (!document.frmAdd_Visit.company_grp[0].checked && !document.frmAdd_Visit.company_grp[1].checked && !document.frmAdd_Visit.company_grp[2].checked) {
alert("Please Select the company group does this client belong's to!");
form.company_grp.focus();
return false;
}
It's very tricky but I don't get the correct value. When I select the 3rd radio, it doesn't add to the database but instead it reloads the page.
you can use jquery to get value form radio box
$(document).ready(function(){
$('input[name="company_grp"]:checked').val();
});
The jquery code below returns the value:
$('input[name=company_grp]:checked').val()
can use radio type checked as $(':radio:checked')
var selectedvalue;
if($(':radio:checked').length > 0){
$(':radio:checked').each(function (i) {
selectedvalue = $(this).val();
});
}
console.log(selectedvalue);
Here what I found and it working well for me.
function test_company_grp() {
var radios = document.getElementsByName("company_grp");
var found = 1;
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
alert(radios[i].value);
found = 0;
break;
}
}
if(found == 1)
{
alert("Please Select the company group does this client belong's to!");
}
}
I have three checkboxes. I am already using a piece of code I found here to uncheck the other two when one is checked.
function cbChange(obj) {
var cbs = document.getElementsByClassName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
obj.checked = true;
}
I use this inside the checkbox to toggle the state: onchange="cbChange(this)".
However, I also need to provide for a situation where I don't want any of the boxes ticked. While I can do this by adding a separate button or checkbox, I wanted to know if the above code can be modified or another function added that will allow to untick the already ticked box by an onclick event.
I tried adding this function (again found here) but it won't work:
function cbUncheck(obj)
{
if (obj.checked == false)
{
document.getElementByClassName("cb").checked = false;
}
}
I use this in the checkbox code: onclick="cbUncheck(this);"
Suggestions welcome!
Thanks!
you need to check first checkbox checked or not..
if checkbox is not checked then dont need to do anything
otherwise uncheck other checkboxes
<input id="chk1" class="cb" type="checkbox" value="01" onchange='cbChange(this)' />
<label for="chk1" >1</label>
<input id="chk2" class="cb" type="checkbox" value="01" onchange='cbChange(this)' />
<label for="chk2" >1</label>
<input id="chk3" class="cb" type="checkbox" value="01" onchange='cbChange(this)' />
<label for="chk3" >1</label>
javascript
function cbChange(obj) {
if(obj.checked)
{
var cbs = document.getElementsByClassName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
obj.checked = true;
}
}
JS BIN JSBIN EXAMPLE
You can use radio buttons so that only one can be selected (no script required for that). Then if some other condition occurs, clear both (below uses a button as an example):
<form>
<input type="radio" name="foo" value="0">zero<br>
<input type="radio" name="foo" value="1">one<br>
<button type="button" onclick="clearRadios(this.form.foo)">Clear radios</button>
</form>
And the function:
function clearRadios(radioGroup) {
for (var i=0; i<radioGroup.length; i++) {
radioGroup[i].checked = false;
}
}
If you don't want users to check the radios at all, disable them.
This below code simply give solutions to what you need.
this.scan=function(index)
{
if( this.boxGroup[ index ].checked )
for(var i=0, g=this.boxGroup, len=g.length; i<len; i++)
if( i != index )
g[i].checked = false;
}
for working demo see jsfiddle
I have an order form that has three sets of radio button options. Ultimately, I would like to have the text of the radio button in each group change to bold and red when it is clicked. However, I'm not having any luck just changing the color of even one group. Below is the loop I was using to try to change one group of radio buttons. My logic was to go through the group of radio buttons and if one of them were clicked it would change the style of the text. What am I doing wrong with this function?
function highlight() {
var radios = document.getElementsByName('cases');
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked == true) {
return document.getElementByName.style.color = 'red';
}
}
}
This is one group of radio buttons in my code. The other two groups are similar:
<input id="case1" type="radio" name="cases" value="500.00" onclick="highlight()"/> Desktop Case ($500.00) </br>
<input id="case2" type="radio" name="cases" value="600.00" onclick="highlight()"/> Mini-Tower Case ($600.00) </br>
<input id="case3" type="radio" name="cases" value="700.00" onclick="highlight()"/> Full-Tower Case ($700.00) </br>
Any help would be greatly appreciated.
If you amend your code, and wrap the text in a label element and, incidentally, you can't change the color or font-weight properties of text unless it's wrapped in an element, and that would have to be a separate element for each string of text you want to affect :
<input id="case1" type="radio" name="cases" value="500.00" onclick="highlight()"/><label for="case1">Desktop Case ($500.00)</label>
<input id="case2" type="radio" name="cases" value="600.00" onclick="highlight()"/><label for="case2">Mini-Tower Case ($600.00)</label>
<input id="case3" type="radio" name="cases" value="700.00" onclick="highlight()"/> <label for="case3">Full-Tower Case ($700.00)</label>
You can achieve this with just CSS:
input[type=radio]:checked + label {
color: red;
font-weight: bold;
}
JS Fiddle demo.
Incidentally, to use plain JavaScript I'd suggest:
function choiceHighlight(radio){
var groupName = radio.name,
group = document.getElementsByName(groupName);
for (var i = 0, len = group.length; i < len; i++){
group[i].nextSibling.className = group[i].checked ? 'chosen' : 'unchosen';
}
}
var radios = document.getElementsByName('cases');
for (var i = 0, len = radios.length; i < len; i++){
radios[i].addEventListener('change', function(){
choiceHighlight(this);
});
}
JS Fiddle demo.
Your return statement looks off:
return document.getElementByName.style.color = 'red';
Also note that you've attempted to give the radio inputs a color of red, but they cannot be styled in this way. The text that you have next to the inputs is not part of the input itself.
Here's a simplified script that gets you the input values onchange (not onselect). You should be able to use this as a better starting point: http://jsfiddle.net/rWp6E/
var radios = document.getElementsByName('cases');
for (var i = 0; i < radios.length; i++) {
radios[i].onchange = function () {
alert(this.value);
}
}
getElementByName isn't valid Javascript. A better way to do this would be to use the onCheckedChanged event to change your style:
<input id="case1" type="radio" name="cases" oncheckedchanged="highlight(this)" value="500.00"/>
<script type="text/javascript">
function highlight(e) {
if(e.checked == true)
{e.style.color = "red"}
else
{e.style.color = "some other color"}
}
Note that you will actually have to change the style of the label if you want to change the color of the text.
There is also a :checked selector in CSS3 (as someone else mentioned above), however it will not work in some older browsers, namely IE8 and earlier.
I have two checkbox fields. Using Javascript, I would like to make sure only one checkbox can be ticked. (e.g if one checkbox1 is ticked, if checkbox2 is ticked, checkbox1 will untick)
<input name="fries" type="checkbox" disabled="disabled" id="opt1"/>
<input type="checkbox" name="fries" id="opt2" disabled="disabled"/>
I would also like to have a radio button beneath, if this is clicked, I would like both checkboxes to be unticked.
<input type="radio" name="o1" id="hotdog" onchange="setFries();"/>
Would the best way to do this be by writing a function, or could I use onclick statements?
Well you should use radio buttons, but some people like the look of checkboxes, so this should take care of it. I've added a common class to your inputs:
function cbChange(obj) {
var cbs = document.getElementsByClassName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
obj.checked = true;
}
Demo: http://jsfiddle.net/5uUjj/
Also based on tymeJV's answer above, if you want to only deactivate the other checkbox when one is clicked you can do this:
function cbChange(obj) {
var instate=(obj.checked);
var cbs = document.getElementsByClassName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
if(instate)obj.checked = true;
}
tymeJV's function does not let you have both unticked - this does.
(yes, weird but true.. sometimes there's a semantic reason why you want two tickboxes not radio buttons)
Hope this helps:
function setFries(){
var hotdog= document.getElementById("hotdog");
var opt1= document.getElementById("opt1");
var opt2 = document.getElementById("opt2");
if(hotdog.checked){
opt1.checked = false;
opt2.checked = false;
}else if(opt1.checked){
opt2.checked = false;
}else if(opt2.checked){
opt1.checked = false;
}
}
<input type="checkbox" name="fries" id="opt1" disabled="disabled" onclick="setFries(this);/>
<input type="checkbox" name="fries" id="opt2" disabled="disabled" onclick="setFries(this);/>
<input type="radio" name="o1" id="hotdog" onclick="setFries(this);"/>
Note that I am using onclick event:
function setFries(obj){
var fries = document.getElementsByName('fries');
if(obj.id =='hotdog') //Or check for obj.type == 'radio'
{
for(var i=0; i<fries.length; i++)
fries[i].checked = true;
}
else{
for(var i=0; i<fries.length; i++){
if(fries[i].id != obj.id){
fries[i].checked = !obj.checked;
break;
}
}
}
}
The simplest way I found for this was to not use any sort of code at all. I triggered an actions in the check box properties.
1. mouse up to reset a form. I then unselected (for reset) all of my fields accept for my desired check boxes. I then did the same thing for my other check box to go the other way. You can basically turn the check boxes into toggles or have any sort of crazy pattern you want.
In a form_tag, there is a list of 10 to 15 checkboxes:
<%= check_box_tag 'vehicles[]', car.id %>
How can I select-all (put a tick in every single) checkboxes by RJS? Thanks
EDIT: Sorry I didn't make my question clear. What I meant to ask is how to add a "Select/Un-select All" link in the same page to toggle the checkboxes.
Try this:
<%= check_box_tag 'vehicles[]', car.id, {:checked => "checked"} %>
Edit
You can use Tim Down's solution for vanilla javascript solution. If you are using jQuery, you can try something like this:
<script>
$(document).ready(function(){
// select all
$(".checkboxes a[rel=all]").click(function(){
$(this).siblings("input:checkbox:not(:checked)").attr({checked: true});
});
// select none
$(".checkboxes a[rel=none]").click(function(){
$(this).siblings("input:checkbox:checked)").removeAttr("checked");
});
});
</script>
<div class="checkboxes">
<input type="checkbox" value="foo" /> Foo
<input type="checkbox" value="bar" /> Bar
<input type="checkbox" value="baz" /> Baz
select
all |
none
</div>
The following function will toggle the checkedness of all checkboxes inside a particular DOM element (for example, a <form> element):
function toggleAllCheckBoxes(el) {
var inputs = el.getElementsByTagName("input");
var input, checked = false, i, len;
// Check whether all the checkboxes are all already checked.
// If so, we uncheck all of them. Otherwise, we check all of them.
for (i = 0, len = inputs.length; i < len; ++i) {
input = inputs[i];
if (input.type == "checkbox" && !input.checked) {
checked = true;
break;
}
}
// Now check or uncheck all of the checkboxes
for (i = 0, len = inputs.length; i < len; ++i) {
input = inputs[i];
if (input.type == "checkbox") {
input.checked = checked;
}
}
}
var form = document.getElementById("your_form_id");
toggleAllCheckBoxes(form);