Problem
I am looking for a way to toggle a border around some text. i have two radio buttons, one for "show" border and one for "hide" border. The border should surround another control (in this case a text field).
Solution
Using a simple bit of JavaScript we can easily toggle the border style of a text field.
Detailed explanation
<!-- Simple input element -->
<input type="text" name="txtName" id="txtName" value="" style="border: 1px solid black;" />
<br />
<!-- Toggle radio buttons for turning on/off border on text element -->
Border:<br />
<input type="radio" name="btnBorderToggle" id="btnBorderToggle" onclick="onBtnBorderToggleClick(this, 'txtName')" value="1" checked="checked" /> On
<input type="radio" name="btnBorderToggle" id="btnBorderToggle" onclick="onBtnBorderToggleClick(this, 'txtName')" value="0" /> Off
<script type="text/javascript">
/**
* This method will turn on/off the border on the text element. It takes two
* arguments. The first is the reference to the radio button that called
* this method, and the second is the element in which to toggle the border.
* @author Adam Presley
* @param button The button that called this method
* @param elementName The element to apply the style change to
*/
function onBtnBorderToggleClick(button, elementName)
{
var el = document.getElementById(elementName);
if (button.value == 1)
{
el.style.borderStyle = "solid";
}
else
{
el.style.borderStyle = "none";
}
el.focus();
}
// Focus on the text field.
document.getElementById("txtName").focus();
</script>
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
Report abuse
