Values of disabled inputs will not be submitted - form-submit

This is what I found by Firebug in Firefox.
Values of disabled inputs will not be submitted
Is it the same in other browsers?
If so, what's the reason for this?

disabled input will not submit data.
Use the readonly attribute:
<input type="text" readonly />
Source here

Yes, all browsers should not submit the disabled inputs, as they are read-only.
More information (section 17.12.1)
Attribute definitions
disabled [CI] When set for a form control, this Boolean attribute
disables the control for user input. When set, the disabled attribute
has the following effects on an element:
Disabled controls do not receive focus.
Disabled controls are skipped in tabbing navigation.
Disabled controls cannot be successful.
The following elements support the disabled attribute: BUTTON, INPUT,
OPTGROUP, OPTION, SELECT, and TEXTAREA.
This attribute is inherited but local declarations override the
inherited value.
How disabled elements are rendered depends on the user agent. For
example, some user agents "gray out" disabled menu items, button
labels, etc.
In this example, the INPUT element is disabled. Therefore, it cannot
receive user input nor will its value be submitted with the form.
<INPUT disabled name="fred" value="stone">
Note. The only way to modify dynamically the value of the disabled
attribute is through a script.

You can use three things to mimic disabled:
HTML: readonly attribute (so that the value present in input can be used on form submission. Also the user can't change the input value)
CSS: 'pointer-events':'none' (blocking the user from clicking the input)
HTML: tabindex="-1" (blocking the user to navigate to the input from the keyboard)

They don't get submitted, because that's what it says in the W3C specification.
17.13.2 Successful controls
A successful control is "valid" for submission. [snip]
Controls that are disabled cannot be successful.
In other words, the specification says that controls that are disabled are considered invalid for submission.

There are two attributes, namely readonly and disabled, that can make a semi-read-only input. But there is a tiny difference between them.
<input type="text" readonly />
<input type="text" disabled />
The readonly attribute makes your input text disabled, and users are not able to change it anymore.
Not only will the disabled attribute make your input-text disabled(unchangeable) but also cannot it be submitted.
jQuery approach (1):
$("#inputID").prop("readonly", true);
$("#inputID").prop("disabled", true);
jQuery approach (2):
$("#inputID").attr("readonly","readonly");
$("#inputID").attr("disabled", "disabled");
JavaScript approach:
document.getElementById("inputID").readOnly = true;
document.getElementById("inputID").disabled = true;
PS disabled and readonly are standard html attributes. prop introduced with jQuery 1.6.

<input type="text" disabled />
instead of this disabled use readonly
<input type="text" readonly />

Disabled controls cannot be successful, and a successful control is "valid" for submission.
This is the reason why disabled controls don't submit with the form.

select controls are still clickable even on readonly attrib
if you want to still disable the control but you want its value posted.
You might consider creating a hidden field. with the same value as your control.
then create a jquery, on select change
$('#your_select_id').change(function () {
$('#your_hidden_selectid').val($('#your_select_id').val());
});

Here's the Solution and still using disabled property.
First disable your inputs on load.
$(document).ready(function(){
$("formselector:input").prop("disabled",true);
$( "formselector" ).submit(function( event ) {
$(":disabled").prop("disabled",false);
});
});
on submit enable all of them. this will assure everything is posted

Related

parsley.js 'fails' when trying to validate checkbox

We are re-designing a site and part of that re-design involves making the site accessible to screen readers and the like. I'm using latest version (2.8.0). Here's what's happening --- validation for all text, select and textarea fields in our forms work perfectly. In order to be accessible, checkbox and radio inputs are wrapped in tags. The html for a set of checkboxes looks like this:
<div class="form-group">
<p id="applicant_type_desc" style="margin-bottom: 6px;"><strong>I am: <span class="text-danger" aria-hidden="true">*</span><span class="sr-only">Required</span></strong> <em class="small">(check all that apply)</em></p>
<div class="checkbox">
<label id="applicant_type_patient_desc">
<input type="hidden" name="applicant_type_patient" id="" value="N">
<input type="checkbox" name="applicant_type_patient" id="applicant_type_patient" value="Y" {checked_applicant_type_patient} aria-labelledby="applicant_type_desc applicant_type_patient_desc" data-parsley-multiple="type" data-parsley-error-message="Please specify whether you are a patient, relative, employee or other.">
A patient
</label>
</div>
followed by more checkbox divs without error messages and ended with an end div for the for form-group wrapper.
If I load the form and click 'submit', all the text fields are validated properly. If I add 'required' to the checkbox above, when 'submit' is clicked nothing happens and the form is submitted with no validation at all.
The same thing happens when I try to validate a radio button set as required.
There is some custom jQuery and parsley code which creates a div to hold all the error messages and transforms the error messages into links to the field id so that a screen reader can follow them and focus on the field in error. But imho, this should have no effect on why the form validation doesn't kick in.
I'm absolutely baffled.
FYI - I tried this using an earlier version (2.0.3) of parsley and the validation actually worked, although all my custom error processing was ignored.
Any insight would be greatly appreciated.
As it turns out, parsley handles the errorswrapper element differently for text, textarea and selects then it does for checkboxes and radio buttons.
The starting wrapper element for text, textarea and select contains the parsley-data-id attribute whereas checkbox and radio button elements contain the parsley-data-multiple attribute whether that was generated by parsley or entered manually in the html.
My code was looking for parsley-data-id and, of course the jquery selector failed and generated an error. A colleague was able to spot this for me while we were looking at the page in chrome inspector. Once i saw the error, making a simple adjustment to the form:error event function allowed everything to work.

IE10 Validation bug with maxlength and placeholder on textbox

I have a textbox for Age:
<input type="text" id="txtAge" name="txtAge" class="text" placeholder="Age (optional)" maxlength="2">
Upon clicking submit, this input is instantly bordered red. There is no postback. I'm assuming IE10 believes the client has actually typed in "Age (optional)" which is greater than the maxlength of 2.
Is there anyway to get around this without making the user do anything in their browser's settings and without removing the maxlength attribute?
You can use the novalidate and formnovalidate attributes. See this link for more information.
Internet Explorer 10 and Windows Store apps using JavaScript add new support for HTML5 Forms, including new states of the type attribute (on the input element), new attributes for the input element, and the progress element. This support enables developers to quickly and easily provide user prompting, input validation, and feedback with a minimal amount of script.
Source: http://msdn.microsoft.com/en-us/library/ie/hh673544(v=vs.85).aspx
I faced same problem.
In this case you should change your max length to 10 so it will not be issue for max length and set the max length that you want for your textbox using javascript like following.
function setMaxLength(obj, len) {
return (obj.value.length < len);
}
and call this function like following
<input type="text" id="txtAge" name="txtAge" class="text" placeholder="Age (optional)" maxlength="10" onkeypress="return setMaxLength(this,2);">
This will resolve your issue.
I had the same issue, in my case it was a GUID field, which was hidden as I didn't need to have it displayed on screen. So I had display:none and maxlength=0.
Yet, IE was performing the validation, the postback was failing and I had no idea why.
It took me half day to figure it out, the solution was to set maxlength=36.

I'm looking for a sample javascript to show different hidden inputs if dropdownlist selected value = a specific value. Anyone have anything?

What code would I start with? I know onChange won't work with input=hidden. Would it be best to write something to re-name the hidden fields and then build it into the existing onchange for the dropdown?
Not 100% sure what you are wanting to do. I don't believe its possible to make a tag with <input type="hidden" show on the browser unless you change its type.
Just tested this at W3Schools and worked on Chrome
<input type="hidden" value="OK">
<p id="demo">Click the button below to set the type attribute of the button above.</p>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
function myFunction()
{
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
};
</script>
<p>Internet Explorer 8 and earlier does not support the setAttribute method.</p>
Granted this code obviously states it won't work with IE8 or earlier and it would probably be better to set the id attribute for each of the hidden fields you want and probably use something like document.getElementById(IDVALUE).setAttribute("type", "text") Though this will allow the user to change the value in the tag.
Now all that is left is to give a dropdown with an onChange function that runs a statement like above based on what was selected.

CakePHP Prototype Ajax Checkbox disable onCreate onComplete events

I have two checkboxes in my code as mentioned below:
<input type="checkbox" id="event_id" name="data[Noncompetitor][event_id][]" value="1">
<input type="checkbox" id="event_id" name="data[Noncompetitor][event_id][]" value="2">
Now I am doing Ajax function like onCreate and onComplete, where I want to disable checkboxes when its initiated and want to enable again as completed request. I am not sure how that can be achieved in Prototype JS and both above checkboxes have same id.
onCreate: function(){
document.getElementById("event_id").setAttribute("disabled", "disabled");
Element.show('loading_message');
},
onComplete: function(){
document.getElementById("event_id").removeAttribute("disabled");
Element.hide('loading_message');
},
My Above code works, but it disables only first checkbox, so please help me here.
Thanks !
You can't have two ids of the same in a HTML page, nothing is stopping you from putting two ids of the same in a HTML page you can but you kill a kitten everytime you do that, and furthermore having two ids will confuse yourself in cases like this. document.getElementById would return the first id it finds and stop caring about the other everytime you have two ids of the same in a HTML page, thus why it only works for one checkbox.
You can either assign classes to your checkboxes, or you can reference your checkbox using name attribute if your form is also named.
http://jsfiddle.net/Q5qNg/7/

Spring mvc and different required fields depending on action

i have a form with 2 buttons let say A & B.
The required fields are depending on the button pressed.
Im using actually a DataBinder allowing me to specify requiredFields but for all actions.
How can i customize the required fields that will be depending on the button pressed ?
Thanks in advance
If you use <input type="submit" name="button1" value="Click me!" /> you can check for that button1 value in your form and then use different validation rules within your validator. You just have to extend your binding model according to these button names and to give your two buttons different names. Note that this doesn't work with <button type="submit"> in most IE versions and therefor input[type=submit] is the better choice here :-)

Resources