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
Related
I'm having a simple form with just a text field. I'm dropping in values (drag and drop), which works fine (of course), but I want to autosubmit as soon as I've dropped the value into it.
From what I understand 'onchange' wouldn't work, because you need to actually exit the field for it to submit..
Same with 'onmouseup'.. doesn't work either unless I click in the field again...
How can I fix this?
form:
<form name="getrdun" action="getrdun" method="post">
Original string: <input type="text" name="origstuff" value=""><br>
<input type=submit value="Submit">
</form>
The input event should do the trick, although note from the reference that there are some problems with IE9 and Opera.
Updated with details:
Instead of using the change event, listen for the input event. You don't show any code, so I don't know how you're setting up event listeners, but, e.g. using plain old JavaScript.
inputEl.addEventListener('input', function() {
// submit the form here...
})
A jQuery version:
$('input[type="text"]').on('input', function() {
// submit the form here...
})
Obviously, you'll want to select the <input> element appropriately.
I want to programmatically allow or hide a form field from being submitted in an HTML5 form. I thought I could just set its CSS display attribute to none. However, it still gets submitted (just can't be seen). Is there another property I can set rather than removing the element completely from the HTML5 document?
Simply set disabled attribute for the form field, e.g.
<input name="test" value="test" disabled="disabled">
REF: http://www.w3.org/TR/html401/interact/forms.html#h-17.12.1
Set the disabled property to the truth value true. It corresponds to the HTML attribute (“content attribute” in HTML5 parlance) with the same name but takes truth values. For example, assuming
<input name=foo id=foo>
you could set, in JavaScript,
document.getElementById('foo').disabled = true;
This typically changes the appearance of the field, too, by making the background gray.
Setting display: none, or any CSS setting, has no impact on what gets submitted. CSS is for presentation (rendering), not functionality.
Pretty straightforward. I want the text input to look disabled (browser's default disabled style) but without actually being disabled so I can still sell it trough post.
If you just need to send it throung post you can make the input field as hidden instead of making it look disabled
<input type="hidden" value="yourvalue">
Its not direct way to make it look disabled as disabled input field looks different in every other browser...
If you want to display data that the user can't change, and then send it to a server with a POST then include it as a hidden <input>
<input type=hidden name=myHiddenValue value="My Hidden Value">
It will appear as $_POST['myHiddenValue'] when the form is submitted.
If you need to display it too then you can include it in your HTML, just not as an <input> field.
I'm having some problems adding a dropdownlist with ajax and stuff using jQuery. When you click or you type on the input text a method creating the jQuery dropdownlist will be called. However if you already submitted this form, when you type you get the typical browser simple dropdown with previous submitted data. I'm having a hard time figuring what event do trigger clicking in that dropdownlist element.
Just add
autocomplete="off"
attribute to your input fields, for example:
<input type="text" name="myField" autocomplete="off">
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.