Solved

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

Posted on 2008-10-17
13
736 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
 

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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
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 …
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now