Using jQuery to enable/disable a button based on a text box
Since this is an html file, just create a blank file on your desktop called Test.html and copy and past the code below.
The steps for doing this are comments in the code.
Note: This should handle typing, pasting, code change, etc…
<!-- Step 1a - Create HTML File (see step 1b way below) -->
<!DOCTYPE html>
<html>
<head>
<!-- Step 2 - Include jquery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<!-- Step 3 - Add script to run when page loads -->
<script type="text/javascript">
jQuery(document).ready(function () {
<!-- Step 4 - Bind method to text box -->
$("#txtField").bind("propertychange keyup input paste", setButtonState);
<!-- Step 4 - Set the default state -->
setButtonState();
});
var setButtonState = function () {
if ($("#txtField").val() == "")
$("#btnEnter").attr("disabled","disabled");
else
$("#btnEnter").removeAttr("disabled");
}
</script>
</head>
<body>
<!-- Step 1b - Add HTML elements -->
<input type="text" id="txtField" size="50"/>
<button type="button" id="btnEnter">Enter</button>
</body>
Update: 5/22/2013: Fixed example. Before if it was used on a page with links, going forward and back could result in the button being disabled even if the text box was populated. This new example solves this issue.
See a MVVM version of this here:
Using MVVM with HTML5 and JavaScript
I like the way you conduct your posts. Have a nice Thursday!
[...] Previously I wrote this post: Using jQuery to enable/disable a button based a text box [...]