Tuesday, June 22, 2010

damn you javascript

I have be using more javascript and css than I would like recently, but the power is amazing. My most recent revelation was that "read only" is for suckers, and using "disabled" is a better way to protect elements in forms from user access.  the main reason is because you can set disabled=[true|false] on any input:  text, select, checkbox etc.

I used a css selector to make the disabled elements look a little nicer:

input[disabled="disabled"] {color:black; background-color:gray;}

So now I could have an edit button.  Click the edit button and

Pseudocode:
for (all elements in form){
    element.disabled=false;
}
click the cancel button and:
for(all elements in form){
    element.disabled="disabled";//don't set true because of css selector
}


That actually didn't work. SCREW YOU JAVASCRIPT. However I made a css "formActive" and "formInactive"

.formInactive{
    padding: 1px 0px 1px 0px;
    border-width: 0;
    background-color:transparent;
    disabled:true;
}


.formActive{
    border-style: solid;
    border-width: 1px;
    border-color: #036399;
    background-color: AliceBlue;
    padding: 1px 0px 1px 0px;
    disabled: false;
}

So now I just loop through and change the styles for the elements:

enable:
for (i = 0; i < theForm.elements.length; i++) {
    myElement = theForm.elements[i];
    if (myElement.className == 'formInactive') {
        myElement.className = 'formActive';
    }
    else{
        if(myElement.disabled){
             myElement.disabled = false;
        }
    }
}
disable:
for (i = 0; i < theForm.elements.length; i++) {
    myElement = theForm.elements[i];
    if (myElement.className == 'formActive') {
        myElement.className = 'formInactive';
    }
    else if(myElement.disabled = false){
        myElement.disabled=true;
    }
}
Sweet eh? The problem though is that I forgot to reset the form. So I went back into the cancel button loop and added "form.reset()"

No reset happened. javascript console had an error : "no such method form.reset()"

SCREW YOU JAVASCRIPT!!!!

Very irritating. To make a long story short, if you have an element ANYWHERE ON THE FRIGGIN PAGE named reset, you can't call the reset() function. Damn weakly typed languages. Changed the element name from reset to resetter, and everything worked.

No comments :