How to get the value of a disabled radio button input field - javascript

I have a radio button something like this,
<input type="radio" value="A" name="NodeLevel" />
When not disabled I could get the value of a pretty easily
using, $("input[name=NodeLevel]").click(function () {},
but when the input type is disabled, how can I get the value of a radio button ?
any work arounds ?

As per HTML specification, a form element must be "successful" in order to be sent to the server. Disabled elements are not considered successful (as per the same spec). You can make the element readonly or send it as a hidden form element.
this thread here might shed some light to ur problem
How can I get the form value from a disabled <input> element

Have you tried .val()?
$("input[name=NodeLevel]").val()
// returns 'A'
And you can't bind a click event to a disabled element.

I think when your form field is disabled you can not access its value. Use some hidden field to contain the same value and read from there.

Related

disabled checked checkbox is not being sent to model on form submit

I have a table with checkboxes that are automatically checked & disabled based on on a users selection using jquery. However, when I submit the form, the checked boxes value does not get sent to the model. If I remove the jquery code and check the boxes manually then the data is sent correctly to the model and everything works. This is the jquery code I have been using. I have also tried using
$('.verification5').attr('checked', 'checked');
$('.verification5').attr('disabled', 'disabled');
.prop('checked', true);
On form submit you need to enable checkbox first
$(form).submit(){
$('.verification5').removeAttr('disabled');
}
Or instead of using disabled property you can also use readonly property as readOnly property can be sent to server on form submit.
Input fields with disabled attribute does not send their value to the controller while submitting the form. You can use one of below solution to overcome the issue
1) You can use readonly attribute instead of disabled attribute to send data to controller
2) You can add hidden field for the disabled checkbox property to send data to controller
Each element that is disabled, semantically it means that does not have any behaviour. So, it will not be send to the server. You can see on the specification of this section of the HTML specification.
You can change the disable to readonly and it is a valid information but only for read propose. It will be send and not changed. For sample:
$('.verification5').prop('readonly', true);

Javascript to over-ride radio button value

I'm submitting form results to a script that expects to receive certain values from a set of radio buttons. The form page uses the for each button to automatically set the HTML "value" attribute for the button. I have no way to set the value attribute independently.
Is there any way to use Javascript to over-ride the value for that field based on which radio button is selected?
If you remove the NAME property from the radio button and assign it to a hidden field instead, you could hook up and event handler to set the value of the hidden field on the click of the radio button. This way the hidden field gets passed back instead of the radio button.
Keep on input type to checked="checked"
(OR)
One default input to hidden way
(OR)
Set input to checked=true on before submit in javascript

Difference between read only and disabled in javascript [duplicate]

I have read a bit on this, but I can't seem to find anything solid about how different browsers treat things.
A readonly element is just not editable, but gets sent when the according form submits. A disabled element isn't editable and isn't sent on submit. Another difference is that readonly elements can be focused (and getting focused when "tabbing" through a form) while disabled elements can't.
Read more about this in this great article or the definition by w3c. To quote the important part:
Key Differences
The Disabled attribute
Values for disabled form elements are not passed to the processor method. The W3C calls this a successful element.(This works similar to
form check boxes that are not checked.)
Some browsers may override or provide default styling for disabled form elements. (Gray out or emboss text) Internet Explorer
5.5 is particularly nasty about this.
Disabled form elements do not receive focus.
Disabled form elements are skipped in tabbing navigation.
The Read Only Attribute
Not all form elements have a readonly attribute. Most notable, the <SELECT> , <OPTION> , and <BUTTON> elements do not have readonly
attributes (although they both have disabled attributes)
Browsers provide no default overridden visual feedback that the form element is read only. (This can be a problem… see below.)
Form elements with the readonly attribute set will get passed to the form processor.
Read only form elements can receive the focus
Read only form elements are included in tabbed navigation.
No events get triggered when the element is having disabled attribute.
None of the below will get triggered.
$("[disabled]").click( function(){ console.log("clicked") });//No Impact
$("[disabled]").hover( function(){ console.log("hovered") });//No Impact
$("[disabled]").dblclick( function(){ console.log("double clicked") });//No Impact
While readonly will be triggered.
$("[readonly]").click( function(){ console.log("clicked") });//log - clicked
$("[readonly]").hover( function(){ console.log("hovered") });//log - hovered
$("[readonly]").dblclick( function(){ console.log("double clicked") });//log - double clicked
Disabled means that no data from that form element will be submitted when the form is submitted. Read-only means any data from within the element will be submitted, but it cannot be changed by the user.
For example:
<input type="text" name="yourname" value="Bob" readonly="readonly" />
This will submit the value "Bob" for the element "yourname".
<input type="text" name="yourname" value="Bob" disabled="disabled" />
This will submit nothing for the element "yourname".
Same as the other answers (disabled isn't sent to the server, readonly is) but some browsers prevent highlighting of a disabled form, while read-only can still be highlighted (and copied).
http://www.w3schools.com/tags/att_input_disabled.asp
http://www.w3schools.com/tags/att_input_readonly.asp
A read-only field cannot be modified. However, a user can tab to it, highlight it, and copy the text from it.
If the value of a disabled textbox needs to be retained when a form is cleared (reset), disabled = "disabled" has to be used, as read-only textbox will not retain the value
For Example:
HTML
Textbox
<input type="text" id="disabledText" name="randombox" value="demo" disabled="disabled" />
Reset button
<button type="reset" id="clearButton">Clear</button>
In the above example, when Clear button is pressed, disabled text value will be retained in the form. Value will not be retained in the case of input type = "text" readonly="readonly"
The readonly attribute can be set to keep a user from changing the value until some other conditions have been met while the disabled attribute can be set to keep a user from using the element
The difference between disabled and readonly is that read-only controls can still function and are still focusable, anddisabled controls can not receive focus and are not submitted with the form

Radio button html missing checked attribute, though Firebug indicates it is checked

Summary of problem statement: Radio button html on the browser does not display the checked attribute, but Firebug indicates that the radio's checked attribute is set as checked.
Tested on
Broswer: FF 3.6.18 and IE8
jQuery: 1.5
MVC3 (Razor)
Details
Using MVC3 (with Razor) I'm rendering the following radio buttons from the server. The desired functionality is that on checking one radio, the other should be unchecked and vice-versa. In other words, the user is allowed to only select one option - say val1 or val2.
<div id="myRadioList">
<div>
<input type="radio" value="val1" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val1" checked="checked">
</div>
<div>
<input type="radio" value="val2" onclick="updateFunctionCalledHere(this)" name="myRadioName" id="myRadioName_val2">
</div>
</div>
What I'm observing is that if the user toggles the radio selected, the newly selected radio (let's say myRadioName_val2) is shown to be checked using firebug but the html still reflects the other radio button as checked. Because of this, some other validations are failing.
I've tried literally removing all checked attributes of both the radio buttons and then just check the one that's clicked.
This is what I'm doing to set the currently clicked radio, that is not working:
$("#myRadioList > div > input[value='myRadioName_val2]').attr('checked', 'checked');
I'm simplifying my code to avoid posting unnecessary details.
The checked attribute in HTML is the default value.
The checked property in JavaScript refers to the current state of the radio button.
Generally, it's best to let the browser handle the checked state of radio buttons and checkboxes rather than setting it yourself, otherwise you run into these kinds of problems. It's safe to get the current state via prop("checked") as already suggested, or through .is(":checked").
You may also want to consider using syntax like $('#myRadioList').find('input[value="myRadioName_val2"]') or better yet, $('#myRadioName_val2'), as child selectors in jQuery can be rather slow, since they are read right to left.
You should use
$("#myRadioList > div > input[value=myRadioName_val2]").prop('checked', true);
Well, you do have a syntax error withing the jQuery selector. It should be:
$('#myRadioList > div > input[value="myRadioName_val2"]')

Lotus-Notes: Reset Radiogroup via Javascript

I'm currently working on a Lotus Notes solution. We're just using Web forms so client side operations are done via Javascript.
What I want to accomplish is to reset a Group of Radio Buttons. There are 3 possibilities and I want to choose none. (A 'none of them' possibility would be preferable, I know but we are required to reset them)
I currently use:
//Unchecks a single group of Radio Buttons
//groupname - the name attribute of the group which selection needs to be unchecked
function clearRadioButtonGroup(groupName) {
for(i=0;i<document.forms[0].elements[groupName].length;i++) {
document.forms[0].elements[groupName][i].checked = false;
}
}
The problem with this routine is, the Radiogroup gets reset, but on a form submit the old value gets submitted. Any suggestions?
What version of Domino are you using? Since 7.x (I think) a %%Surrogate field gets generated as a hidden field in your HTML that you'll be able to reset, so after deselecting all of the radio button options, you can then clear out the %%Surrogate field and you should then avoid having to select a "None of the above" option.
Matt
The problem is that clearing the radio buttons make no information about them appear in the submitted form data, and Domino seems to interpret that as no change to the field rather than clear the field.
I haven't found any solution to this I really like, but I can think of two options:
Change the radio buttons to include a no choice option.
The alternative is a bit clumpsy:
Add an editable field to the form to use as a flag, hide it from the web browser with css.
Have clearRadioButtonGroup also set the flag field to something.
Have the onChange event of the radio buttons clear the flag field.
In a WebQueryOpen agent, set the radio buttons field to empty if the flag field is non-empty.
Another alternative could be to uses some clever javascript/css trick to hide the no choice option and have clearRadioButtonGroup simply set that choice.
Are you certain that the old value is actually being submitted? Perhaps it just isn't being updated (erased) in the NotesDocument you're editing? Just a hunch...
BTW, you can download a program called Fiddler that will let you inspect the HTTP POSTs, and you can confirm that the POST data doesn't contain any values for that radio button group. That might help narrow down the problem.
Put the following pass thru HTML code on your form:
<input type="hidden" name="FieldName" id="FieldID" value="">
(FieldName and FieldID are the name and id of your radio field on the form)
When you reset your radio through Javascript and submit your document, the field will be reset to blank.

Categories