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

[DrDoc]

Umm, maybe I'm misunderstanding something here ... but it appears that the answer to your question is quite simple. So, you want the color to be #0066FF? Well, don't set it to "none" then ... eh?

So, instead of:

function FMark(){
document.forms['frm_mark'].test_field.style.border = "1px solid #ff0000";
}

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

Do this:

function FMark(){
document.forms['frm_mark'].test_field.style.border = "1px solid #ff0000";
}

function FClear(){
document.forms['frm_mark'].test_field.style.border = "1px solid #0066FF";
}

Or even better:

function FMark(){
document.forms['frm_mark'].test_field.style.borderColor = "#ff0000";
}

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

[PHPycho]

Thanks for the reply
But that color is dynamic not fixed so that cannot be applied..
Any alernatives?
thanks again

[penders]

Just a quick 2cents... If the colour is dynamic or varies for each element, then you're going to have to 'remember' what the original colour was before you change it - it's not going to remember it for you, since you are replacing it with a different value.

Either have a global object/array that holds the original colour of each element, or store the original colour on the element itself, as part of the ID or something? It may be possible to read the original colour from the element and build the 'original colour array' automatically, without having to directly code it.

[Bernard Marx]

From his code example, it looks like PHPycho is hiding the border completely, not changing the colour. This gives the opportunity to change the border-width alone, this will leave the border-color intact.

[PHPycho]

Thanks everbody ..
I got the solution:
Javascript:
function FClear(){
document.forms['frm_mark'].elements['test_field'].style.border = "";
}

Note: just keep the border style to blank (also 0)

I would love to know if there are other alternatives

[penders]

Note: just keep the border style to blank (also 0)

Is that different to setting the border-style to 'none'...?

Presumably this clears the border completely, as Bernard suggests, whilst keeping the colour intact? And if so, doesn't your design/element jump a px when you then set the border again?

[DrDoc]

I got the solution:
Javascript:
function FClear(){
document.forms['frm_mark'].elements['test_field'].style.border = "";
}

Err .. that does not work.

[Drag_Racer]

try this approach.

define both borders under different classes in your stylesheet. Then, instead of changing the border color on the object, change the 'className' attribute

such as...

<style>
.classA {border:1px solid #ff0000;}
.classB {border:1px solid #0066FF;}
</style>

<script language="javascript">
function FMark(){
document.forms['frm_mark'].test_field.className = "classA";
}

function FClear(){
document.forms['frm_mark'].test_field.className = "classB";
}

<form name="frm_mark" action="#" method="get">
<input type="text" name="test_field" class="classB" />

this approach will give you the ability to edit your css file without changing all your html docs.

[edited by: Drag_Racer at 4:50 am (utc) on July 17, 2007]