Toggle element visibility via radio select
This form has a hidden textara and a visible textbox. I would like to swap visibility of these elements if option "D:" is selected, but not sure how to correctly check which radio button is checked at any given time:
<script language="JavaScript" type="text/javascript">
function unhide(event) {
event = event || window.event ;
target = event.target || event.srcElement;
if(target.value === "D:") {
if(target.checked) {
document.getElementByName('tarea').style.display='';
document.getElementByName('tbox').style.display='none';
}
}else {
if(target.checked) {
document.getElementByName('tarea').style.display='none';
document.getElementByName('tbox').style.display='';
}
}
}
</script>
</head>
<body>
<form method="get" action="/cgi-bin/form.cgi" enctype="application/x-www-form-urlencoded">
<input type="radio" name="opttype" value="A:" onclick="unhide(event)" />A:
<input type="radio" name="opttype" value="B:" onclick="unhide(event)" />B:
<input type="radio" name="opttype" value="C:" checked="checked" onclick="unhide(event)" />C:
<input type="radio" name="o开发者_如何学Cpttype" value="D:" onclick="unhide(event)" />D:
<br><input type="tbox" name="event" />
<br><textarea name="tarea" rows="8" cols="80" style="width:580;height:130;display:none;"></textarea>
Two big things here. First off, you shouldn't attach your JavaScript event handlers as HTML attributes. Instead, use the "traditional" method (as shown below), or the more "advanced" method.
Second, there's no need rely on the event object, which will free you from some cross-browser concerns.
<form method="get" action="/cgi-bin/form.cgi" enctype="application/x-www-form-urlencoded" id="frm-whatever">
<input type="radio" name="opttype" value="A:"/>A:
<input type="radio" name="opttype" value="B:"/>B:
<input type="radio" name="opttype" value="C:"/>C:
<input type="radio" name="opttype" value="D:"/>D:
<br>
<input type="tbox" name="event" id="inp-tbox"/><br>
<textarea name="tarea" style="width:580;height:130;display:none;" id="inp-tarea"></textarea>
<form>
<script>
var toggleFields = (function() {
var inpTxtBox = document.getElementById("inp-tbox"),
inpTxtArea = document.getElementById("inp-tarea");
return function(node) {
if ( node.value == "D:" ) {
inpTxtArea.style.display = 'block';
inpTxtBox.style.display = 'none';
} else {
inpTxtArea.style.display = 'none';
inpTxtBox.style.display = 'block';
}
};
})();
var radios = document.getElementById("frm-whatever").opttype;
for ( var i=0, l=radios.length; i<l; ++i ) {
radios[i].onchange = (function(i) { // closure to lock the value of `i` in this context
return function() { // return a function as the event handler
toggleFields(radios[i]);
}
})(i);
}
</script>
Working demo here. Also, make sure the JavaScript code is included after the form or use the onload event.
<script language="JavaScript" type="text/javascript">
function unhide(event) {
event = event || window.event ;
target = event.target || event.srcElement;
if(target.value === "D:")
{
if(target.checked)
{
}
}
}
</script>
</head>
<body>
<form method="get" action="/cgi-bin/form.cgi" enctype="application/x-www-form-urlencoded">
<input type="radio" name="opttype" value="A:" onclick="unhide()" />A:
<input type="radio" name="opttype" value="B:" onclick="unhide()" />B:
<input type="radio" name="opttype" value="C:" checked="checked" onclick="unhide()" />C:
<input type="radio" name="opttype" value="D:" onclick="unhide(event)" />D:
<br><input type="tbox" name="event" /><br><textarea name="tarea" rows="8" cols="80" style="width:580;height:130;display:;"></textarea>
<input type="submit" name="submit" value="Submit" />
</form>
Ok I need to change my previous answer because I realized that I read your code wrong. getElementByName is incorrect. It is getElementsByName to start with. Also you don't use checked like you are. That is a boolean property. You should be checking value.
Here is an example. I am using a basic javascript code since it doesn't seem that you are using any libraries to help with this stuff.
for (var i=0; i < document.formname.radiobuttonname.length; i++)
{
if (document.formname.radiobuttonname[i].checked)
{
var rad_val = document.formname.radiobuttonname[i].value;
}
}
Don't loop over it at all, just pass the element directly to the function
function toggleInput(ele)
{
if(ele.value === 'D:') {
document.getElementsByName('tbox')[0].style.display = 'none';
document.getElementsByName('tarea')[0].style.display = 'block';
} else {
document.getElementsByName('tbox')[0].style.display = 'block';
document.getElementsByName('tarea')[0].style.display = 'none';
}
}
//In the element tags, use the following
onclick="toggletInput(this)"
Also, targeting the input elements with getElementsByName can be messy... if possible, add some ids to those elements and target them directly with getElementById instead. The above code assumes that there is only one of each tbox and tarea or at least that they appear first in the DOM, as it targets the first element in the array returned by getElementsByName.
加载中,请稍侯......
精彩评论