Steveo said:
Hi
I have a form containing some text boxes and a button. I'm trying to work
out how to make it so that if certain textboxes contain no data then the
button is not enabled (however still visible).
Firstly I can't work out how to make a button un-enabled (is this a word? i
hope you know what i mean!) and secondly I'm not sure how to make it so that
once the specified textboxes do contain data the button is enabled. I'm
thinking it needs some kind of timer function which checks every second or
so the contents of the textboxes.
If anyone can help me out that would be great!
Thanks
If you diasable that button in your HTML, it'll remain that way for all
users with JS turned off. Never initially disable an input like that:
do it with script. If scripting is disabled, at least your form won't
be.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<style type="text/css">
form {
width: 180px;
margin: 100px;
}
..required {
font-size: larger;
color: #f00;
}
#ifreq {
margin-top: 20px;
}
</style>
<script type="text/javascript">
function initform()
{
var f = document.forms[0],
els = f.elements,
el,
i = 0,
isreq = [];
function endis()
{
var el,
i = 0,
dflag = false;
while (el = isreq[i++])
{
if (/^\s*$/.test(el.value))
{
dflag = true;
break;
}
}
if (el = document.getElementById('ifreq'))
el.disabled = dflag;
}
while (el = els[i++])
{
if (/\breq\b/.test(el.className))
{
isreq.push(el);
el.onkeyup = endis;
el.onblur = endis;
}
}
i = 0;
while (el = isreq[i++])
el.onkeyup();
}
onload = initform;
</script>
</head>
<body>
<form>
<h4><span class="required">*</span> is required to continue.</h4>
<input class="req" type="text" name="data1" value="" /><span
class="required">*</span>
<input class="req" type="text" name="data2" value="" /><span
class="required">*</span>
<input type="text" name="data3" value="" />
<input class="req" type="text" name="data4" value="" /><span
class="required">*</span>
<input id="ifreq" name="ifreq" type="button" value="next" />
</form>
</body>
</html>
Uses class of "req" for the required fields, a (unique) id of "ifreq"
for the button, and the first form in the page; all easily modified.
Adjusts the disablement when the page loads to reflect persistence of
the fields (text previously entered is still there). The onblur handler
is there for sneaky users who paste text via a menu (keyup covers the
other possibilities & runs immediately). Hope I understood your Q !
