"disabled" property for form data

Mark Hannon · Aug 19, 2004

I have been researching the "disabled" property for form data and
wanted to know:

- Does the disabled property supress the form item from being submitted?
- Can the disabled property be applied when the submit button is
pressed?

I am designing a PayPal order page that will have 4 items, each with a
3-character text box where the customer will enter quantity. The
default value will be "0." I want to be able to test whether the
quantity is greater than 0. If it isn't, then I want to disable the
form fields attached to that item so that they don't even appear in the
final statement.

This is my idea, let me know if this will work the way I want:

function tally(){
if(document.orderform.quantity.value == 0){
document.orderform.quantity.disabled = true;
} else{
document.orderform.quantity.disabled = false;
}
// repeat for next 3 items
//
// the rest of the tally code continues below
}

Martin Honnen · Aug 19, 2004

Mark said:
I have been researching the "disabled" property for form data and
wanted to know:

- Does the disabled property supress the form item from being submitted?

Yes, according to the HTML 4 specification it should and the browser I
know of that support the disabled attribute (IE 4+, Netscape 6/7,
Mozilla, Opera 7) follow that specification:
http://www.w3.org/TR/html4/interact/forms.html#successful-controls

Lee · Aug 19, 2004

Mark Hannon said:

I have been researching the "disabled" property for form data and
wanted to know:

- Does the disabled property supress the form item from being submitted?
- Can the disabled property be applied when the submit button is
pressed?

I am designing a PayPal order page that will have 4 items, each with a
3-character text box where the customer will enter quantity. The
default value will be "0." I want to be able to test whether the
quantity is greater than 0. If it isn't, then I want to disable the
form fields attached to that item so that they don't even appear in the
final statement.

Save this test case to your desktop,
open it in your browser and see for yourself.

<html>
<body>
<form>
<input name="alpha" value="a">
<input name="beta" value="b">
<input value="submit"
type="submit"
onclick="this.form.beta.disabled=true">
</form>
</body>
</html>

However, what about people who don't have javascript enabled?

if(document.orderform.quantity.value == 0){
document.orderform.quantity.disabled = true;
} else{
document.orderform.quantity.disabled = false;
}

That could be written as:
document.orderform.quantity.disabled=!document.orderform.quantity.value;

Michael Winter · Aug 19, 2004

I have been researching the "disabled" property for form data and
wanted to know:

- Does the disabled property supress the form item from being submitted?

Yes. From the HTML Specification, section 17.13.2 - Successful controls:

A successful control is "valid" for submission. Every successful
control has its control name [p.220] paired with its current value
as part of the submitted form data set. A successful control must be
defined within a FORM element and must have a control name.

However:
Controls that are disabled cannot be successful.
[Remaining conditions omitted]

- Can the disabled property be applied when the submit button is
pressed?

As far as I know, yes.

I am designing a PayPal order page that will have 4 items, each with a
3-character text box where the customer will enter quantity. The default
value will be "0." I want to be able to test whether the quantity is
greater than 0. If it isn't, then I want to disable the form fields
attached to that item so that they don't even appear in the final
statement.

Don't forget that users can circumvent JavaScript validation
intentionally, or without even knowing. You should always validate on the
server in exactly the same way as you do on the client. Client-side
validation should just be a shortcut. This is especially important when it
comes to money, as I'm sure you can imagine.

This is my idea, let me know if this will work the way I want:

function tally(){
if(document.orderform.quantity.value == 0){
document.orderform.quantity.disabled = true;
} else{
document.orderform.quantity.disabled = false;
}

That's fine, though it can be shortened.

Assuming that you're calling this from the form's submit event listener:

/* f - A reference to the form.
*
* Return true if the form validates, false otherwise.
*/
function tally(f) {
/* Get a reference to the collection of form controls. */
var e = f.elements;

/* Check that 'quantity' is a valid number first. */

/* If 'quantity' is zero (0), disable the control. */
e['quantity'].disabled = e['quantity'].value == 0;

/* Check remainder of form. */
}

<form ... onsubmit="return tally(this);">

You could even save a reference to the quantity form control if you use it
a lot.

As I said in the comments above, you should also check that the quantity
value is a valid, positive number using regular expressions. See Dr
Stockton's web page for more information:

<URL:http://www.merlyn.demon.co.uk/js-valid.htm>

Hope that helps,
Mike

Michael Winter · Aug 19, 2004

[snip]

That could be written as:
document.orderform.quantity.disabled=
!document.orderform.quantity.value;

No, it couldn't. When converting a string to a boolean, it is the length
that's the deciding factor, not the value. Either convert it to a number
first, or assign the result of a comparison with zero.

Mike

Lee · Aug 20, 2004

Michael Winter said:

[snip]

That could be written as:
document.orderform.quantity.disabled=
!document.orderform.quantity.value;

Click to expand...

No, it couldn't. When converting a string to a boolean, it is the length
that's the deciding factor, not the value. Either convert it to a number
first, or assign the result of a comparison with zero.

Yes. I had misread it as if he was testing for an empty field.

Issue with passing fetched data to POST form. How can I?	0	Jul 23, 2023
Checking dynamically populated data using ajax with user entered value	5	Apr 11, 2020
Set 'disabled' attribute of 'input' based on value of radio button?	5	Jul 27, 2011
Collect Excel Data from Website	5	Apr 30, 2022
Why is this WordPress comments form not submitting?	1	Jan 12, 2020
Onchange Event for Disabled or ReadOnly field	5	Sep 17, 2007
element with 'disabled' property doesnt exist for form processing ?	1	Jun 7, 2005
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023

"disabled" property for form data

Mark Hannon

Martin Honnen

Lee

Michael Winter

Michael Winter

Lee

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads