Forum Moderators: open
I'm writing a form that will ask a yes or no question, and based on the input from the radio box, it will disable or enable the text input.
By default, I want the text input to be enabled. I also want the text input field to be enabled if the first radio box is selected. I only want the text input field to be disabled when the second radio box is selected.
Right now, by default the field is enabled (good), but if the user presses the first radio box, it becomes disabled (bad). If the user then presses the second radio box, the field stays disabled, but then, if the person presses the first box, then it becomes enabled (good).
Any idea what I'm doing wrong? Maybe there's a better way to write this, that would avoid this bug?
Thanks
--------
<html>
<head>
<script type="text/javascript">
function dis(){
if(!document.q.q1[1].checked){document.q.q2.disabled=true}else{document.q.q2.disabled=false}
}
</script>
</head>
<body>
<form name="q">
<p>Live in the US? <input type="radio" name="q1" onFocus="return dis()">Yes <input type="radio" name="q1" onFocus="return dis()">No</p>
<p>ZIP Code <input type="text" name="q2" maxlength="5"></p>
</form>
</body>
</html>
This seems to work a lot better, but there's a weird problem.
If the user presses the first radio box, the default field remains enabled (good). If the clicks somewhere blank on the page, and then clicks back onto the already selected first radio box, then the field becomes disabled.
How do I prevent that bug? Does it have anything to do with the onfocus event I used?
----------
<html>
<head>
<script type="text/javascript">
function dis(){
if(document.q.q1[1].checked){document.q.q2.disabled=false;document.q.q2.value=""}
if(document.q.q1[0].checked){document.q.q2.disabled=true;document.q.q2.value="n/a"}
}
</script>
</head>
<body>
<form name="q">
<p>Live in the US? <input type="radio" name="q1" onfocus="return dis()">Yes <input type="radio" name="q1" onfocus="return dis()">No</p>
<p>ZIP Code <input type="text" name="q2" maxlength="5"></p>
</form>
</body>
</html>
should be written as...
function dis(){
if (document.q.q1[1].checked) document.q.q2.disabled=false; else document.q.q2.disabled=true
}
1) Don't use ! where the if contains an else part.
2) Don't use braces for single statements.
3) Place a semicolon before an else when placed on the same line.
However, this too is poor style.
4) Never use if (condition) then x = true; else x = false;
It is simply a long-winded way of writing x = condition;
Thus the original function becomes...
function dis(){document.q.q2.disabled =!document.q.q1[1].checked}
but a better function might be...
function dis(form){form.q2.disabled =!form.q1[1].checked}
Here endeth the lesson.
Kaled.
I learned a lot about style, and how I can write my IFs and ELSEs better. Thanks.
I already went forward, and took away the NOT IF statement in my original post, with two IF statements in my second post. But I'm still get this bug that if you click on, click off, and click on, then it does the opposite affect.
Just to double check, I went and used the code exactly how you had written it, but it brought me back to the original bug of if you click the first one, then for some reason the field becomes disabled.
So right now, I don't think its a style issue to workout the bugs, but maybe the code choices I'm making?
Anybody else see that?
Thanks
1) Event handlers should always return a definite result. That result can be provided by a function or an explicit statement. (Not all events require a result but it's a good habit to get into.)
e.g. function dis() {.....; return true }
e.g. onclick="dis(); return true;"
2) onfocus is probably best replaced with onclick in this situation;
3) Be sure that the state of controls is consistent when the page loads.
I usually create a function called checkEnablings() and attach it to all relevant event handlers. It can then be called when the page loads and consistency is assured. However, that's a matter for personal style and may not always be appropriate.
Kaled.
<html>
<head>
<script type="text/javascript">
function dis()
{
document.q.q2.disabled=true;
}
function en()
{
document.q.q2.disabled=false;
}
</script>
</head>
<body>
<form name="q">
<p>Live in the US?
<input type="radio" name="q1" onFocus="return en()">Yes
<input type="radio" name="q1" onFocus="return dis()">No</p>
<p>ZIP Code
<input type="text" name="q2" maxlength="5"></p>
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function inUS( val )
{
if( val == "yes" )
dis = false;
else
dis = true;
document.q.q2.disabled=dis;
}
</script>
</head>
<body>
<form name="q">
<p>Live in the US?
<input type="radio" name="q1" value="yes" onclick="return inUS(this.value)">Yes
<input type="radio" name="q1" value="no" onclick="return inUS(this.value)">No</p>
<p>ZIP Code
<input type="text" name="q2" maxlength="5"></p>
</form>
</body>
</html>
I learned a lot about proper style, and by using the different approaches to the same problem, I was able to find a solution that works great!
I've since changed it to onclick, but now I'm worried. Will this pose as a challenge to disabled users, who don't use mice?
Thanks again.
I am facing exactly the same problem that you were facing on IE. I was wondering what your final solution to fix the problem was? Do you mind sharing the solution?
Thanks.
