removeAttribute deletes "disabled" but not "checked" - javascript

There are two lines from my js code:
document.getElementsByName('group')[0].removeAttribute('disabled');
document.getElementsByName('group')[0].removeAttribute('checked');
First string works good but second one makes nothing. I want to follow html5 style so setting false value for checked isn't my choice.
And by the way I look for method to set empty attrs. Methods from other topics like .setAttribute(attr_name,""); do exactly what they are: create attr with empty string value but not just attr. What should I do?

checked is a property, you should treat it as such:
document.getElementsByName('group')[0].checked = false;

I show that your code works. here is the jsfiddle.
Show us your checkbox group.
You will see that when run, the first, aka [0] disabled is removed while the input with value='2' still is disabled.
https://jsfiddle.net/Esko/m7o0z0gc/
<input name="group" type="checkbox" checked="checked" disabled='disabled' value='1' />
<input name="group" type="checkbox" checked="checked" disabled='disabled' value='2' />
<input name="group" type="checkbox" checked="checked" value='3' />

Related

Ractive radio button binding - preserve name

I understand that to bind a ractive variable to a radio-button, the easiest way is to have
<input type="radio" name="{{myVar}}" value="1" checked>
in the template, but the curly brackets on the name persist into the html. Is there a clever way to get it to output
<input type="radio" name="myVar" value="1" checked>
in the html, so I don't have to alter the form-handling? I've tried some logic along the lines of
<input type="radio" name="myVar" value="1" {{#myVar==1}}checked{{/myVar==1}}
but that doesn't bind.
Also, less importantly, is there a way to bind it as a numeric value, as if I have
data:{myVar:1}
Then the button doesn't get checked?
Ractive adds the curly braces to input names to guard against the (highly unlikely) possibility of a conflict between name='{{myVar}}' and name='myVar' - no other reason. The binding is created when the element is rendered; what the name becomes after that is irrelevant.
So although there's no way to prevent the curly braces being added in the first place, you can certainly change them afterwards:
ractive.findAll('input[type="radio"]').forEach( function(input) {
input.name = input.name.replace('{{','').replace('}}','');
});
If you were creating a component with Ractive.extend() this could be part of the init() method, for example.
It shouldn't have a problem with numeric values, at least as of the last released version (0.3.9) and current development version (0.4.0). See this fiddle for an example: http://jsfiddle.net/rich_harris/7qQZ8/
Short answer: I don't think it's possible to do what you want.
Ractive handles radio buttons differently than simple HTML markup. It assumes that you're going to want to retrieve which radio button is set using a simple variable, and it relies on the name attribute to do that. Specifically, it expects you to set the name attribute to the same specific variable (e.g. "{{myVar}}") in all radio buttons in a group. It will then automatically set that variable to the value attribute of whichever individual radio button is selected.
For example, if you have the following code:
<label><input type='radio' name='{{myVar}}' value='1' checked> 1</label>
<label><input type='radio' name='{{myVar}}' value='2' > 2</label>
<label><input type='radio' name='{{myVar}}' value='3' > 3</label>
<p>The selected value is {{myVar}}.</p>
Then Ractive will automatically update the <p> with information on whatever radio button is selected.

How do I give an unchecked checkbox value in HTML?

I'm trying to make it so that an unchecked checkbox has value while a checked checkbox has none.
<form>
<input style="visibility:hidden" type="checkbox" name="box" value="a" checked />
<input type="checkbox" name="box" value="b" checked />
</form>
Apparently at one point, this would have worked as the second check box supposedly overrode the value of the first. But now, it seems that both values are submitted.
Any ideas?
This is because you are using a checkbox, change your code to:
<form>
<input style="visibility:hidden" type="radio" name="box" value="a" checked />
<input type="radio" name="box" value="b" checked />
</form>
The input type radio accepts only one option, while the checkbox takes more than one option per group, so since the user can't remove the checked from the top one, you get both sent server side.

Javascript/HTML gray out radio list?

Is there a way I can 'gray' out an html radio list input? I know I can actually change the color.. But I want to make it so the radio button list cannot be toggled either. I also want it to 'highlight' or be toggled to a specific radio list while in this state.
So for instance with this radio list:
<input type="radio" name="group2" value="Water"> Water<br />
<input type="radio" name="group2" value="Lemonade"> Lemonade<br />
<input type="radio" name="group2" value="Juice"> Juice<br />
I want the user not to be able to click/change the radio list. And I want the radio button to be associated with the 'Juice' option.
This needs only to be compatible with Internet Explorer.
I cannot use JQuery! Please don't paste JQuery because it will not help me!
Thanks!
Simply apply the 'disabled' attribute to the elements that you want disabled and 'checked' to the default.
<input type="radio" name="group2" value="Water" disabled> Water
<input type="radio" name="group2" value="Water"> Lemonade
<input type="radio" name="group2" value="Water" checked> Juice
Just disable it with the "disabled" property.
Give it an "id" to fetch it more easily:
document.getElementById("radioButtonX").disabled = true;
(It doesn't matter how you get a reference to the DOM node of course.) You can re-enable the element by setting the property to false. When you disable it, you'll also have to set the "checked" property (to true) of whichever other button you'd like to be selected.
If you want to do it with HTML, you can use the attribute:
<input type=radio name=whatever value=xyz disabled=disabled> <!-- or just "disabled" with no value -->

javasscript radio button not working?

I am adding attribute for input type radio as checked="checked", in view source it shows but not reflecting in the browser.
edit
<input type="radio" name="status" value="Yes" checked="checked"/>
<input type="radio" name="status" value="No" />
When is check in firebug it shows checked="checked" as shown above, but browser still has no buttons checked.
What might be the cause??
Thanks
The checked attribute sets the default checked state, not the current state.
Set the checked DOM property to true or false instead.
document.getElementById('for_example').checked = true;

Radio Button Getting Value

I have some html like this
<form id="reportform" method='post'>
<input type='hidden' id='qid' name='qid' value="<?php echo $id ?>" />
<span><input type="radio" id="reporttp" name="reporttp" value="spam" /> spam</span>
<span><input type="radio" id="reporttp" name="reporttp" value="attack" /> attacking</span>
<span><input type="radio" id="reporttp" name="reporttp" value="nonsense" /> nonsense</span>
<span><input type="radio" id="reporttp" name="reporttp" value="other" /> other</span
<input type="image" name='Submit' value='Submit' src="../Images/buttons/reportButton.png"/>
</form>
when i try to read the value in $('#reportform').submit(function() {
i read it as $(reportttp).attr("value"). And then i did some posting (which works fine). The problem is I always get "spam" postedf to me even though i select the other radio boxes. If i switch the first and second radio button around, ill get "attacking".... Could you tell me what is wrong?
You cannot have multiple elements with the same id
I assume you want to read the checked radio button's value? Is so, give them all unique ids, then do:
$("input[type='radio']:checked", "#reportform").val();
This will grab all radio buttons inside of you reportform, grab the checked one, then retrieve its value.
My guess is that your names and ids for each radio button are identical, causing the browser to make weird decisions arbitrarily.
In addition to Adam's answer, this is also invalid:
$(reportttp).attr("value")
should be
$('input[name="reportttp"]').val()
and I hereby retract my statement cause Adam updated his answer to a much better one.
and get rid of the duplicate id's
You should be able to do $('#reportttp').val() to get the selected value.

Categories