Disabling Form Fields Like On Twitter, Facebook Etc

[skaterdav85]

On FB, twitter, etc, typically when there are form submissions, right when the button is clicked, input fields, textareas, etc are greyed out so you cant type in stuff while its processing. How do you do that? I tried disabling my textarea through JS, but that was no good because the value inside my textarea doesnt get captured.This is what I did:

function submitForm(id1,id2){	document.getElementById(id1).disabled = "disabled";	document.getElementById(id2).disabled = "disabled";}

[Ingolme]

On FB, twitter, etc, typically when there are form submissions, right when the button is clicked, input fields, textareas, etc are greyed out so you cant type in stuff while its processing. How do you do that? I tried disabling my textarea through JS, but that was no good because the value inside my textarea doesnt get captured.This is what I did:

function submitForm(id1,id2){	document.getElementById(id1).disabled = "disabled";	document.getElementById(id2).disabled = "disabled";}

Some form elements have a readOnly property.

[skaterdav85]

well i tried this, and this doesnt work either.

function submitForm(id1,id2){	document.getElementById(id1).readonly = "yes";	document.getElementById(id2).readonly = "yes";}

Is it because i dont have the readonly attribute in my textarea tag? I tried putting the attribute in my tag, but then my textarea is initialized as readonly, which i dont want.EDIT:I figured it out. I changed it to document.getElementById(id1).setAttribute('readonly','readonly'); and it works. Not really sure why I cant do it the previous way though...

[justsomeguy]

You can probably still disable the fields, as long as you submit the form first and then disable them.

[Ingolme]

well i tried this, and this doesnt work either.

function submitForm(id1,id2){	document.getElementById(id1).readonly = "yes";	document.getElementById(id2).readonly = "yes";}

Is it because i dont have the readonly attribute in my textarea tag? I tried putting the attribute in my tag, but then my textarea is initialized as readonly, which i dont want.EDIT:I figured it out. I changed it to document.getElementById(id1).setAttribute('readonly','readonly'); and it works. Not really sure why I cant do it the previous way though...

Because the property in Javascript has an uppercase O: readOnly.

[skaterdav85]

Because the property in Javascript has an uppercase O: readOnly.

Oh ok. I thought it only did that for css properties in JS, not attributes.Another question somewhat related. On facebook, when you update your status or write on someone's wall, i think it makes the textarea readonly, and then uses ajax to do the update. However, it kind of delays a bit (a few seconds) before making the update. Is this time delay the result of adding to facebook's large db, or do they do some kind of JS settimeout function to create the delay so users can't repeatedly press the update button?

[Ingolme]

Oh ok. I thought it only did that for css properties in JS, not attributes.Another question somewhat related. On facebook, when you update your status or write on someone's wall, i think it makes the textarea readonly, and then uses ajax to do the update. However, it kind of delays a bit (a few seconds) before making the update. Is this time delay the result of adding to facebook's large db, or do they do some kind of JS settimeout function to create the delay so users can't repeatedly press the update button?

The delay is because HTTP requests (AJAX) are slow. They disable the field just because they're expecting a delay and don't want to send a request until the previous one gave a response.