Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2008-10-17
13
Medium Priority
?
754 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 400 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 400 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
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!

 

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 1200 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 400 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

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.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 invoke it on a web page. 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.: (CODE)
Suggested Courses

916 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