...

View Full Version : Disable / grey-out a button until all fields are filled



Arnaud
05-06-2008, 02:56 PM
Hi,

I need help - I tried seraching the forum but I didn't find what I was looking for...

I have a form with a few text inputs and a submit button.

I would like the submit button to be greyed-out until all fields are filled by the user, so that he only can submit the form once everything is filled in.

By the way, how can I disable, or what method can I use to disable the submit action when the user hits 'enter'?

Thanks in advance!!

abduraooft
05-06-2008, 03:18 PM
Have a look at http://codingforums.com/showthread.php?p=668901, here oesxyl explained a similar method in his 3rd reply.

Arnaud
05-06-2008, 04:25 PM
Thanks... could not really figure it out... I am a javascript newbie and I think it's a bit complicated for what I want to achieve.

I have only 3 fields and 1 submit button.

I just want the submit button to become 'active' or 'enabled' once all 3 fields are filled with something...

Here is my code:



<form name="form1" method="post" action="">

<input name="title" type="text" id="title" size="20">
<textarea name="description" cols="18" rows="5" id="description"></textarea>
<input name="name" type="text" id="name" size="20">

<input name="submit" type="submit" id="submit" value="Add Event" disabled="disabled">

</form>


Hope someone can help... Thanks!

Philip M
05-06-2008, 04:55 PM
Try this:-

Note that it is not a good idea to assign the name "name" or "submit" to an entity as these are HTML tags and can cause confusion. I have changed them.



<form name="form1" method="post" action="">

<input name="title" type="text" id="title" size="20" onblur = "checkFilled()">
<textarea name="description" cols="18" rows="5" id="description" onblur = "checkFilled()"></textarea>
<input name="theName" type="text" id="name" size="20" onblur = "checkFilled()">

<input name="submit" type="submit" id="submitForm" value="Add Event" disabled="disabled">

</form>

<script type = "text/javascript">

function checkFilled() {
var filled = 0
var x = document.form1.title.value;
x = x.replace(/^\s+/,""); // strip leading spaces
if (x.length > 0) {filled ++}

var y = document.form1.description.value;
y = y.replace(/^s+/,""); // strip leading spaces
if (y.length > 0) {filled ++}

var z = document.form1.theName.value;
z = z.replace(/^s+/,""); // strip leading spaces
if (z.length > 0) {filled ++}

if (filled == 3) {
document.getElementById("submitForm").disabled = false;
}
else {document.getElementById("submitForm").disabled = true} // in case a field is filled then erased

}

</script>

Arnaud
05-06-2008, 05:06 PM
Hi,

Thanks for your reply. I will make sure I change the names and id's to something different. I'll try your code now. Thanks.

Arnaud
05-06-2008, 05:31 PM
Well, thanks, it works fine. The only thing is that it doesn't enable the button when filling the last field but only when I click out of the field (once they are all filled) - any idea?

Arnaud
05-06-2008, 05:39 PM
OK - forget my last post.

I changed the onblur to onKeyUp and it's working fine now.

Thanks again for your help!

abduraooft
05-06-2008, 05:39 PM
because they are being called like onblur = "checkFilled()"

Philip M
05-06-2008, 08:48 PM
OK - forget my last post.

I changed the onblur to onKeyUp and it's working fine now.

Thanks again for your help!

What is to say that the user fills in the three fields in order? I would leave it as onblur. What is wrong with that? You say you want to enable the button only when the three fields have content.

Arnaud
05-07-2008, 12:20 AM
Hi Philip,

I am not expecting users to fill in the fields in a specific order.

What is 'wrong' with using the onblur is that once the user filled the last field (being any of the 3 fields) - the button is still not active. The user would have to click anywhere on the page (but not on the button itself that is still disabled) to activate the button.

I would expect the button to be active as soon as the last field (once again, any of the 3) contains some data, so that I can click the submit button right away. Therefore I called the function using the onkeyup statement instead of onblur, so that now, as soon as I type something in the 3rd field (having already filled in the 2 others), the button activates and I don't need to click somewhere to make it active.

Would the onkeyup be inappropriate in that situation?

By the way, I repost the code below I think there was a missing back\slash in the y and z replace(/^s+/,""); in the code example.



<form name="form1" method="post" action="">

<input name="title" type="text" id="title" size="20" onkeyup = "checkFilled()">
<textarea name="description" cols="18" rows="5" id="description" onkeyup = "checkFilled()"></textarea>
<input name="theName" type="text" id="theName" size="20" onkeyup = "checkFilled()">

<input name="submit" type="submit" id="submitForm" value="Add Event" disabled="disabled">

</form>

<script type = "text/javascript">

function checkFilled() {
var filled = 0
var x = document.form1.title.value;
x = x.replace(/^\s+/,""); // strip leading spaces
if (x.length > 0) {filled ++}

var y = document.form1.description.value;
y = y.replace(/^\s+/,""); // strip leading spaces
if (y.length > 0) {filled ++}

var z = document.form1.theName.value;
z = z.replace(/^\s+/,""); // strip leading spaces
if (z.length > 0) {filled ++}

if (filled == 3) {
document.getElementById("submitForm").disabled = false;
}
else
{
document.getElementById("submitForm").disabled = true
} // in case a field is filled then erased
}
</script>


Anyway, now it works exactly like I want!

Thanks again for your help.

Philip M
05-07-2008, 09:28 AM
OK, I understand now what you are getting at. But to perform the check and run the script on every keystroke seemed a bit OTT. I guess I am old- fashioned!

By the way, I repost the code below I think there was a missing back\slash in the y and z replace(/^s+/,""); in the code example.

Yes, it is good to see that you are alert and have noticed my deliberate mistake! :D:D:D:eek:

Arnaud
05-07-2008, 10:42 AM
Hey I said I was a javascript newbie - not a total dumb*ss :D:D

Cheers



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum