How to enable a button on entering 10 characters into a textbox using JavaScript?

Hi,
I need some help with JavaScript. I have to enable a button on entering 10 characters into a textbox using regular expressions in JavaScript and also have to make the textbox to accept only letters and numbers. Please help me! I am using asp.net 2.0 and I am asked to do the above functionalities using JavaScript.

Thank you for the help
ipjyoAsked:
Who is Participating?
 
prairiedogConnect With a Mentor Commented:
Here is the JavaScript:

function enableBox()
{
var box = document.getElementById('<%=txtSearchKeywords.ClientID %>');
if (box.value.length >=10)
{
document.getElementById('<%=btnSearch.ClientID %>').disabled = false;
}
}
Here is the asp:TextBox and asp:Button

<asp:TextBox ID="txtSearchKeywords" runat="server" Height="20px" Width="250px" onkeyup="enableBox()" ></asp:TextBox>&nbsp;<asp:Button
ID="btnSearch" runat="server" Text="Search" Enabled="False" />

//JavaScript
function enableBox()
{
	var box = document.getElementById('<%=txtSearchKeywords.ClientID %>');
	if (box.value.length >=10)
	{
		document.getElementById('<%=btnSearch.ClientID %>').disabled = false;
	}
}
 
//asp:TextBox and asp:Button
<asp:TextBox ID="txtSearchKeywords" runat="server" Height="20px" Width="250px" onkeyup="enableBox()" ></asp:TextBox>
&nbsp;
<asp:Button ID="btnSearch" runat="server" Text="Search" Enabled="False" />

Open in new window

0
 
TechTiger007Connect With a Mentor Commented:
You can write a function that validates the text and call it onkeypress event of the textbox

onkeypress="Validate(this.Text);

function Validate(text)
{
//validate text using regular expression here

if(text.Length >= 10)
button.enabled = true;
}

here is an introduction to using regular expression with javascript
http://www.devarticles.com/c/a/JavaScript/Regular-expressions-in-JavaScript/

you can put together these pieces to get what you want
0
 
aldanchConnect With a Mentor Commented:
I haven't tested this but...


<input type='text' id='amount' value='' size='10' onkeydown='return checkForLetters(event)' onkeyup='checkLength()' />
<input type='submit' id='mybutton' value='Submit' />
 
...
 
function checkForLetters(e)
{
	var keynum;
	var keychar;
	var numcheck;
 
	if(window.event) // IE
	{
		keynum = e.keyCode;
	}
	else if(e.which) // Netscape/Firefox/Opera
	{
		keynum = e.which;
	}
	keychar = String.fromCharCode(keynum);
	// CHECK TO MAKE SURE ONLY NUMBERS ARE ENTERED
	if(keynum >= 48 && keynum <= 57) {
		return true;
	} else if(keynum == 190 || keynum == 8 || keynum == 37 || keynum == 39 || keynum == 46) {
		return true;
	} else if(keynum >= 96 && keynum <= 105) {
		return true;
	} else if(keynum == 110) {
		return true;
	} else {
		// CHECK FOR LETTERS HERE... OR ANYTHING ELSE... IF YOU ADD MORE CHECKS REMOVE THE RETURN FALSE
		return false;
	}
}
 
function checkLength()
{
	if(document.getElementById('amount').value.length >= 10)
	{
		document.getElementById('mybutton').enabled = true;
	} else {
		document.getElementById('mybutton').enabled = false;
	}
}

Open in new window

0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
aldanchCommented:
Error in my code above... it should read:


if(document.getElementById('mybutton').value.length >= 10)
 
-instead of-
 
if(document.getElementById('amount').value.length >= 10)

Open in new window

0
 
ipjyoAuthor Commented:
Thanks, I wil try and let you know
0
 
ipjyoAuthor Commented:
Can I try the onkeyup and onkeydown events for <asp:Textbox>
or should I use only html Textbox for this?
Thanks!
0
 
aldanchCommented:
I'm not sure about ASP (don't do much of it). The HTML textbox should work fine.
0
 
TechTiger007Commented:
I think they are server side events and they would post back the page on each key push.
0
 
ipjyoAuthor Commented:
Thanks, I will try this
0
 
ipjyoAuthor Commented:
actually when I try to type onkeyup for <asp:textbox> it is saying it is not a valid attribute for <asp:textbox>
If you have any idea, please help me
thanks
0
 
prairiedogCommented:
Don't worry about the warning, just ignore it. It will not make any harm to your app and it will not stop your app from running, either.
0
 
TechTiger007Connect With a Mentor Commented:
The warning is because it is not a valid attribute in asp.net but it is valid in javascript, so as prairiedog mentioned, ignore the warning
0
 
ipjyoAuthor Commented:
ok, I will try now. thank you
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.