Solved

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

Posted on 2008-10-17
13
743 Views
Last Modified: 2012-05-05
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
Comment
Question by:ipjyo
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 3
  • +1
13 Comments
 
LVL 13

Assisted Solution

by:TechTiger007
TechTiger007 earned 100 total points
ID: 22745153
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
 
LVL 8

Assisted Solution

by:aldanch
aldanch earned 100 total points
ID: 22745219
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
 
LVL 8

Expert Comment

by:aldanch
ID: 22745237
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:ipjyo
ID: 22745398
Thanks, I wil try and let you know
0
 

Author Comment

by:ipjyo
ID: 22745432
Can I try the onkeyup and onkeydown events for <asp:Textbox>
or should I use only html Textbox for this?
Thanks!
0
 
LVL 8

Expert Comment

by:aldanch
ID: 22745446
I'm not sure about ASP (don't do much of it). The HTML textbox should work fine.
0
 
LVL 13

Expert Comment

by:TechTiger007
ID: 22745564
I think they are server side events and they would post back the page on each key push.
0
 
LVL 22

Accepted Solution

by:
prairiedog earned 300 total points
ID: 22745742
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
 

Author Comment

by:ipjyo
ID: 22745808
Thanks, I will try this
0
 

Author Comment

by:ipjyo
ID: 22745844
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
 
LVL 22

Expert Comment

by:prairiedog
ID: 22747020
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
 
LVL 13

Assisted Solution

by:TechTiger007
TechTiger007 earned 100 total points
ID: 22747304
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
 

Author Comment

by:ipjyo
ID: 22748046
ok, I will try now. thank you
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Whatever be the reason, if you are working on web development side,  you will need day-today validation codes like email validation, date validation , IP address validation, phone validation on any of the edit page or say at the time of registration…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question