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
    SitePoint Addict
    Join Date
    Aug 2006
    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>
    Bismillahirrahmanirrahīm
    Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  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
    SitePoint Addict
    Join Date
    Aug 2006
    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>
    Bismillahirrahmanirrahīm
    Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  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
  •