# Enabling Submit Button When Textfield has Value



## arcanewielder (Jul 3, 2007)

Hello there.

I'm currently working on a .JSP program. I just would like to ask if it's possible to *enable a submit button* when the *textfield has a value*. 

For example, the submit button is disabled upon loading the page. When the user inputs a number to the textfield, the submit button will then be enabled.

I tried creating some functions but I don't know if it's correct or I'm having problems calling it. But anyway, I would like to solicit your help.
Thanks.


----------



## jamiemac2005 (Jul 5, 2007)

Hey, could you post your code? (if this part of it is html then yes it's possible, i have no expereince of JSP though so it might not be?)

If you post your code we can help you in a more specific way but i believe this is possible.

Cheers,
Jamey


----------



## arcanewielder (Jul 3, 2007)

Here's a screenshot of my webpage:









...and here goes the code. _By the way, I omitted some elements of the code to avoid confusion._


```
<html>
<script type="text/javascript">
function checkQty()
{
	if (document.orderform.tqty.value== "" || document.orderform.tqty == null)
	{
                document.orderform.bsubmit.disabled="false";
		alert('Quantity is empty.');
	}
	
}
</script>

<form method="post" action="process.jsp" name="orderform">

Quantity: 
<input type="text" name="tqty" onFocus="checkQty()">
<br>
<input type="submit" value="Submit" name="bsubmit" disabled>
</form>


</body>
</html>
```
I played around with the event attributes just hoping the code will work. My idea here is that I need a function that will check the textbox if it contains any value. In case the user left it blank (I'm not sure though if it's an empty string or null value), an *alert will appear* and *will stay on the same page until the textbox has a value*. 

One more thing, I hope there's a constraint that would o*nly allow integer values.* But it's okay if we'll implement it later.

Thanks! :wink:


----------



## jamiemac2005 (Jul 5, 2007)

Hey again, you weren't far off so i went ahead and completed the job for you:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Valid</title>
<script language="javascript" type="text/javascript">
function checkQty()
{
	if (document.orderform.tqty.value == "" ||[b] isNaN(document.orderform.tqty.value)[/b])
	{
		document.orderform.bsubmit.disabled=true;
		alert('Quantity is empty or not a number');
		
[b]	} else {
		document.orderform.bsubmit.disabled=false;
	}[/b]
	
	
}
</script>
</head>
<body>
<form method="post" action="process.jsp" name="orderform">
Quantity: 
<input type="text" name="tqty" [b]onblur[/b]="checkQty();" />
<br />
<input type="submit" value="Submit" name="bsubmit" disabled="disabled" />
</form>
</body>
</html>
```

You'll notice i added a doctype declaration and padded out the document(with stuff i assume you ommitted) just because i wanted to ensure it was valid, etc. (also messed with the html element etc.)

Anyway the differences(the ones that actually matter):
- the event type is "onblur" so that it's when the user clicks off of the textfield the function is run...
- added the if clause that if the quantity is not a number(isNaN) the button is disabled
- added an else clause so that they can't re-enter an incorrect value then click

Cheers,
Jamey


----------



## Gorge (Nov 10, 2008)

Did you know you can submit a form even if the submit button is disabled?
Don´t know if all browsers are affected, though.
Just press enter when any form element (not a select, though) is focused.

I would add an additional check to the form tag:
<form ... onclick="return checkQty();">
then add a return value (true/false) to the checkQty function.


----------



## dm01 (Oct 10, 2006)

After some research, I found a script for a numbers-only text box. You should be able to bend this to your will with a bit of tweaking.

http://justins-fat-tire.blogspot.com/2007/09/javascript-numeric-only-text-box.html

You may want to wrap the contents of your <script> in a <!--comment-->. Otherwise, the browser may be confused and try to parse your Javascript as HTML. This only leads to bad things.


----------



## arcanewielder (Jul 3, 2007)

Hello everyone. Thanks for helping.
Right now, I was able to test all the codes you gave me.

With regards to Ms. Jamey's code, it's working if I make a new HTML page but I don't know why it's not working if I apply it in my JSP. I guess I'm missing something. Anyway, thanks Jamey.  

The code placed on the page link dm01 referred to me is what I'm currently using. On the other hand, I don't know how to work on the codes since I don't understand it. 

I just thought if the textfield could also restrict its contents from positive integers only. Any ideas?


----------



## arcanewielder (Jul 3, 2007)

Is it possible to have more than one actionEvent on a single form? For example, a textfied has two action events--- onBlur and onMouseOver.


----------

