disable submitting if field is empty

qwertyuiop · 04-19-2005, 02:37 AM

hi,
The function that i wrote below doesn't work:

Code:

function disablesend() {
message = document.getElementById("comments"); //form field
submit = document.getElementById("send"); //submit button

submit.disabled = true;
if (message.value != '') {
submit.disabled = false;
}
}

I'm not really sure if im doing this the proper way. I want the submit button disabled (grayed out, unclickable) by default. Then, when the user types something in the field, the submit button becomes active.

How do i fix the code?

ACJavascript · 04-19-2005, 02:50 AM

I would do this:

Code:

function disablesend() {
message = document.formname.comment; //form field
submit = document.formname.send; //submit button

submit.disabled = true;
if (message.value != '') {
submit.disabled = false;
}
}

glenngv · 04-19-2005, 03:20 AM

Code:

<html>
<head>
<script type="text/javascript">
function enableDisableSend(oFld){
  oFld.form.send.disabled = (oFld.value == "") ? true : false;
}
</script>
</head>
<body onload="enableDisableSend(document.frmFeedback.comments)">
<form name="frmFeedback" action="">
<textarea name="comments" id="comments" onkeyup="enableDisableSend(this)" onblur="enableDisableSend(this)" onpaste="setTimeout('enableDisableSend(document.'+this.form.name+'.'+this.name+')', 10)"></textarea>
<input type="submit" name="send" id="send" value="Send" />
</form>
</body>
</html>

The onpaste event handler is for IE to handle paste commands such as Edit->Paste and right-click->Paste. We need to delay a bit the calling of the function on onpaste to get the pasted value on time. The onblur handler is for non-IE browsers that don't support onpaste event.

qwertyuiop · 04-19-2005, 04:03 AM

Hey! It works perfectly! Thanks a lot.

qwertyuiop · 04-19-2005, 04:30 AM

It seems to conflict with an auto-focus function that I already set on the field.

When you enter the page, the autofocus kicks in. BUT, the submit button is active. If you click outisde the field, then click back in, then the disablesend function works.

The auto focus function is:

Code:

function autofocus() {
document.getElementById("message").focus();
}

and it starts onload.
EDIT: Nevermind! I found the problem. I forgot to change one of the values. Thanks a lot for the script glenngv!

qwertyuiop · 04-20-2005, 02:32 AM

There is one really tiny issue that would be nice if solved.

Let's say this html is used:

Code:

<html>
<head>
<script type="text/javascript">
function enableDisableSend(oFld){
  oFld.form.send.disabled = (oFld.value == "") ? true : false;
}
</script>
</head>
<body onload="enableDisableSend(document.frmFeedback.comments)">
<form name="frmFeedback" action="" onsubmit="document.frmFeedback.comments.value='';return false;">
<textarea name="comments" id="comments" onkeyup="enableDisableSend(this)" onblur="enableDisableSend(this)" onpaste="setTimeout('enableDisableSend(document.frmFeedback.comments)', 10)"></textarea>
<input type="submit" name="send" id="send" value="Send" />
</form>
</body>
</html>

After submitting the first time, the field's contents are erased. But then the disabler doesn't disable the submit button until you "onfocus then onblur then onfocus" the field.

glenngv · 04-20-2005, 02:47 AM

You have to call enableDisableSend() again onsubmit.

<form ... onsubmit="this.comments.value='';enableDisableSend(this.comments);return false;">

But why are you erasing the value of the comment field onsubmit and cancelling the submission? This will make the form useless.

qwertyuiop · 04-20-2005, 04:11 AM

Erasing the field's value was just to emulate what really happens. This isn't a regular form.

Thanks, the calling of the function onsubmit works.