How to clear the border color (preserving the existing one) ??

[PHPycho]

Hello Forums !!
I had following script for marking the fields with certain color border and clearing that color border , preserving the fields original border color.

<!-- Javascript -->
<script language="javascript">
function FMark(){
	document.forms['frm_mark'].test_field.style.border = "1px solid #ff0000";  

}

function FClear(){
	document.forms['frm_mark'].test_field.style.border = "none"; 
}
</script>

<!-- HTML -->
<form name="frm_mark" action="#" method="get">
<input type="text" name="test_field" style="border: 1px solid #0066FF" />
<input type="button" value="Mark" onclick="FMark();"/>
<input type="button" value="Clear" onclick="FClear();"/>
</form>

Whats my problem ?
- I am able to mark the field but also able to clear that marked one but couldnt preserve the existing border color

What I want ?
- I want to clear the marked border color preserving the existing border color ie #0066FF
Any Suggestion and Help are warmly welcome
Thanks in advance to all of you

[sheephat]

Change it in the java script not in the form? Im not good with java or 100% clear what you are tring to do, but i would go straight in to the script and change the border there. Then delete the style tag from <input> in the HTML.

[alimadzi]

Well, there "quick and dirty" and then there's the "right way". Let's do Q&D first...

<!-- Javascript -->
<script language="javascript">
function FMark(){
	document.forms['frm_mark'].test_field.style.borderColor = "#FF0000";  

}

function FClear(){
	document.forms['frm_mark'].test_field.style.borderColor = "#0066FF"; 
}
</script>

Leave your HTML the same.

Now as far as the "right way", you should use CSS for all presentational settings like borders. Create two classes - "normal" and "marked" would work - and create style rules for "input" like this...

input.normal {
    border: 1px solid #0066FF;
}

input.marked {
    border-color: #FF0000;
}

Your HTML should use the 'normal' class on the text box. Then use JavaScript to add the 'marked' class on click of the 'Mark' button and remove the 'marked' class on click of the 'Clear' button. You should also remove the click handlers from your HTML, give the two buttons unique ID's, and control these events from an external JS file unobtrusively. To make things really easy, I suggest using Prototype or jQuery.

If none of this makes sense or you really just want the *#$& thing to work, go ahead and use the first solution and be done with it. However, if you plan to do a lot of JavaScript, you should really start looking into unobtrusive DOM scripting.

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

Hope this helps...

[bogu]

document.forms['frm_mark'].test_field.style.border = "0px none";

[alimadzi]

bogu wrote:

document.forms['frm_mark'].test_field.style.border = "0px none";

The original poster wants to preserve the original border color, so your solution isn't going to help him.