Solved

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

Posted on 2008-10-17
13
739 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
  • 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
html border input line 7 16
on window close, not beforeunload 6 20
Non-Resizable Pharagraph 2 7
Javascript object functions help 1 5
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

830 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