Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Function to disable form buttons

Status
Not open for further replies.
jamesmay

jamesmay

Technical User
Joined
Jun 1, 2004
Messages
41
Location
GB
Hi i have a form with 10 buttons on it the button names are 0 through to 9. and a textfield

im after a funtion to detect if the text field has more than to chars in it, if so to disable the buttons.

can anyone help!!!


kindest thanks.
 
Sort by date Sort by votes

>> if the text field has more than to chars in it

Do you mean more than two (2) chars, or did you mean something else entirely?

Dan
 
Upvote 0 Downvote
Sorry, i mean more than two (2) chars. Jus cant figure it out.


regards.
 
Upvote 0 Downvote

This works for me:

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		function updateButtons(textBoxValue) {
			var enabled = true;
			if (textBoxValue.length > 2) enabled = false;
			for (var loop=0; loop<10; loop++) {
				document.forms[0].elements['button' + loop].disabled = !enabled;
			}
		}
	//-->
	</script>
</head>
<body>
	<form>
		<input type="button" name="button0" value="0">
		<input type="button" name="button1" value="1">
		<input type="button" name="button2" value="2">
		<input type="button" name="button3" value="3">
		<input type="button" name="button4" value="4">
		<input type="button" name="button5" value="5">
		<input type="button" name="button6" value="6">
		<input type="button" name="button7" value="7">
		<input type="button" name="button8" value="8">
		<input type="button" name="button9" value="9">
		<br>
		<input type="text" onkeyup="updateButtons(this.value);">
	</form>
</body>
</html>

Hope this helps,
Dan
 
Upvote 0 Downvote
Hi, thanks for that. it works fine on its own but not on my form. I should of mentioned that there are other buttons on there, but i only want the 0 - 9 buttons to change state..

this is what im after...

function updateButtons() {
var enabled = false;
if (form1.textfield.length > 2) enabled = true;
document.form1.0.disabled = !enabled;
document.form1.1.disabled = !enabled;
document.form1.2.disabled = !enabled;
document.form1.3.disabled = !enabled;
document.form1.4.disabled = !enabled;
document.form1.5.disabled = !enabled;
document.form1.6.disabled = !enabled;
document.form1.7.disabled = !enabled;
document.form1.8.disabled = !enabled;
document.form1.9.disabled = !enabled;
}


any ideas?
 
Upvote 0 Downvote

>> I should of mentioned that there are other buttons on there, but i only want the 0 - 9 buttons to change state..

It makes no difference. The code I gave you only disabled buttons with the names "button0" to "button9". It can easily be modified.

If you change this line:

Code: 
document.forms[0].elements['button' + loop].disabled = !enabled;

to this:

Code: 
document.forms['form1'].elements[loop].disabled = !enabled;

then it should work as expected.

However, gievn that in HTML, names should not being with a number, I strongly suggest you change the names of your buttons from "0", "1", etc to "button0", "button1", etc.

Dan
 
Upvote 0 Downvote

That last sentence should have read:

However, given that in HTML, names should not begin with a number, I strongly suggest you change the names of your buttons from "0", "1", etc to "button0", "button1", etc.

Dan
 
Upvote 0 Downvote
Still cant get the damn thing to work!

here is my origanal keypad, would any thing i have here cause a problem for the above ode not to work with it...







<table border="0" cellspacing="5" cellpadding="0">
<tr>
<td height="10" bgcolor="#29397B">
<div align="center"><font color="#FFFFFF"><b><font size="-1">Enter
VIN Number</font></b></font></div>
</td>
</tr>
<tr>
<td>
<div align="center">
<input type="button" style="WIDTH: 249 px" onClick="AA()" class=Button_Value value="DISCOVERY (L319) - AA" name="AA">
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
<input type="button" style="WIDTH: 249 px" onClick="LA()" class=Button_Value value="DISCOVERY (L319) - LA" name="LA">
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
<input type="button" style="WIDTH: 249 px" onClick="LS()" class=Button_Value value="RANGE ROVER (L320) - LS" name="LS">
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
<input type="button" style="WIDTH: 249 px" onClick="SF()" class=Button_Value value="RANGE ROVER (L320) - SF" name="SF">
</div>
</td>
</tr>
<tr>
<td height="10">
<div align="center">
<input type="button" name="7" value="7" style="WIDTH: 79 px" onClick="Select7()" class=Button_Value>
<input type="button" name="8" value="8" style="WIDTH: 79 px" onClick="Select8()" class=Button_Value>
<input type="button" name="9" value="9" style="WIDTH: 79 px" onClick="Select9()" class=Button_Value>
</div>
</td>
</tr>
<tr>
<td height="10">
<div align="center">
<input type="button" name="4" value="4" style="WIDTH: 79 px" onClick="Select4()" class=Button_Value>
<input type="button" name="5" value="5" style="WIDTH: 79 px" onClick="Select5()" class=Button_Value>
<input type="button" name="6" value="6" style="WIDTH: 79 px" onClick="Select6()" class=Button_Value>
</div>
</td>
</tr>
<tr>
<td height="10">
<div align="center">
<input type="button" name="1" value="1" style="WIDTH: 79 px" onClick="Select1()" class=Button_Value>
<input type="button" name="2" value="2" style="WIDTH: 79 px" onClick="Select2()" class=Button_Value>
<input type="button" name="3" value="3" style="WIDTH: 79 px" onClick="Select3()" class=Button_Value>
</div>
</td>
</tr>
<tr>
<td height="10">
<div align="center">
<input type="button" style="WIDTH: 79 px" onClick="BS()" class=Button_Value value="BS" name="Del">
<input type="button" name="0" value="0" onClick="Select0() " style="WIDTH: 79 px" class=Button_Value>
<input type="button" style="WIDTH: 79 px" onClick="Clear()" class=Button_Value value="CE" name="Clear">
</div>
</td>
</tr>
<tr>
<td height="10">
<div align="center">
<input type="button" style="WIDTH: 121 px" class=Button_Value value="CANCEL" name="X" onClick="MM_showHideLayers('Layer1','','hide');form1.textfield.focus()">
<input type="button" name="Search2" value="SEARCH" style="WIDTH: 121 px" class=Button_Value onClick="MM_callJS('document.form1.submit();')">
</div>
</td>
</tr>
</table>




thanks in advance,

jm
































 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question Question
Buttons not aligned after another button is clicked
Replies
2
Views
678
gmmastros
gmmastros
lexer
  • Locked
  • Question Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
1K
lexer
lexer
Rayj0000
  • Locked
  • Question Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
864
Rayj0000
Rayj0000
Kennelbloke
  • Locked
  • Question Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
coldbohemia
  • Locked
  • Question Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
921
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top