SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard PHPycho's Avatar
    Join Date
    Dec 2005
    Posts
    1,201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.
    Code JavaScript:
    <!-- 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>
    Code HTML4Strict:
    <!-- 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

  2. #2
    do righteous deeds
    Join Date
    Aug 2006
    Location
    Türkiye Turkey تركيى
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
    <script type="text/javascript">
    function FMark(){
        document.forms['frm_mark'].test_field.style.border = "1px solid #ff0000"; 
    }
     
    function FClear(){
    var el = document.forms['frm_mark'].test_field ;
     el.style.borderColor = "#0066FF";
     el.style.borderStyle = "solid";
     el.style.borderWidth = "1px";
    }
    </script>
    <body>
    <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>
    The Time Through Ages
    1. By the Time, 2. Verily Man is in loss, 3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

  3. #3
    SitePoint Wizard PHPycho's Avatar
    Join Date
    Dec 2005
    Posts
    1,201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks MR.muazzez for the reply.
    But one thing the color value is dynamic , its not fixed. so this method doesnt work..is there any alternatives
    Thanks again

  4. #4
    SitePoint Wizard PHPycho's Avatar
    Join Date
    Dec 2005
    Posts
    1,201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    I would love to know if there are other alternatives

  5. #5
    do righteous deeds
    Join Date
    Aug 2006
    Location
    Türkiye Turkey تركيى
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    null
    Code:
      
    <script type="text/javascript">
    function FMark(){
        document.forms['frm_mark'].test_field.style.border = "1px solid #ff0000"; 
    }
     
    function FClear(){
    var el = document.forms['frm_mark'].test_field;
    el.border = null ;
    }
    </script>
    <body>
    <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>
    The Time Through Ages
    1. By the Time, 2. Verily Man is in loss, 3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

  6. #6
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you change the border style to 'none' border will disappear-but the element's style object still holds the color and width properties.

    If you reset the style property, the border will reappear.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •