"disabled" property for form data

M

Mark Hannon

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
}
 
L

Lee

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.
Click to expand...

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;
}
Click to expand...


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

Michael Winter

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?
Click to expand...

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?
Click to expand...

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.
Click to expand...

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;
}
Click to expand...

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
 
M

Michael Winter

[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.

Mike
 
L

Lee

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.
Click to expand...

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Issue with passing fetched data to POST form. How can I? 0
Checking dynamically populated data using ajax with user entered value 5
Set 'disabled' attribute of 'input' based on value of radio button? 5
Collect Excel Data from Website 5
Why is this WordPress comments form not submitting? 1
Onchange Event for Disabled or ReadOnly field 5
element with 'disabled' property doesnt exist for form processing ? 1
Survey details won't go through using php, ajax, Mysql 0

Members online

Total: 28 (members: 1, guests: 27)
Robots: 114

Forum statistics

Threads
473,773
Messages
2,569,594
Members
45,117
Latest member
Matilda564

Latest Threads

Top