• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 756
  • Last Modified:

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
0
ipjyo
Asked:
ipjyo
  • 5
  • 3
  • 3
  • +1
4 Solutions
 
TechTiger007Commented:
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
 
aldanchCommented:
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
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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
 
prairiedogCommented:
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
 
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
 
TechTiger007Commented:
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 5
  • 3
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now