Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question I would like to make a form that simply take awy the border on the textbox

    I would like to make a form that simply take away the border on the textbox when submitted so that a form now looks like a text document and can be printed. Below is a silly example of how it could work (how ever it does not). Thank you for any help. Daniel

    <html>
    <head>
    <title>A Very Simple Calculator</title>
    <script language = "JavaScript">
    <!-- hide me from old browsers
    function multiplyTheFields()
    {
    var number_one = window.document.the_form.field_one.value;
    var number_two = window.document.the_form.field_two.value;
    window.document.the_form.field_one.border=0; //these are things I have tried and do not work
    window.document.the_form.field_two.style='border-style: none';
    var product= number_one * number_two;
    alert(number_one + " times " + number_two + " is: " + product);
    }
    // end hiding comment -->
    </script>
    </head>
    <body>
    <form name = "the_form">
    Number 1: <input type = "text" name = "field_one" border="15"> <br>
    Number 2: <input type = "text" name = "field_two" style='border-style: solid'> <br>
    <a href="#" onClick = "multiplyTheFields(); return false;">multiply them!</a>
    </form>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Western US
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can change the class of the object.
    Code:
    <style type="text/css">
    	.borderOff.{ border-bottom:0px; border-left:0px ; border-right:0px; border-top:0px;}
    	.borderOn{border-bottom:2px inset #313039; border-left:1px solid #DDDDDD; border-right:2px inset #313039; border-top:1px solid #DDDDDD; color:#000000;}
    </style>
    <script language = "JavaScript">
    function multiplyTheFields()
    {
    	document.the_form.field_one.className = "borderOff";
    	document.the_form.field_two.className = "borderOff";
    }
    </script>
    </head>
    <body>
    <form name = "the_form">
    Number 1: <input type = "text" name="field_one"class="borderOn" > <br>
    Number 2: <input type = "text" name="field_two" class="borderOn"> <br>
    <a href="#" onClick = "multiplyTheFields(); return false;">multiply them!</a>
    This will work well in IE, you would have to tweak the style shown above to make it look right in Mozilla, or NS 6

    ShriekForth

  • #3
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks ShreikForth!!



  •  

    Posting Permissions

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