Enable submit button when filling in some field wi

Question

I have the following form and javascript:

<script type="text/javascript">
function toggleButton(ref,bttnID){
  document.getElementById(bttnID).disabled= ((ref.value !== ref.defaultValue) ? false : true);
}
</script>

<form action="" method="post" id="subscribe" name="subscribe">
<label>NAME:</label>
<input type="text" name="name" class="subName" onkeyup="toggleButton(this,'bttnsubmit');">
<label>EMAIL:</label>
<input type="text" name="email" class="subEmail" id="sub_email">
<input type="button" name="button" value="Subscribe" disabled='disabled' id='bttnsubmit'/>
</form>

When I first load my site the SUBMIT button is disabled, as I wanted, since the text field has no text in it. Now I would like to enable the button once some text has been placed within the text field.

Any help please?

Answer 1

Using jQuery:

$(document).ready(function() {
     $('#bttnsubmit').attr('disabled','disabled');
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $('input[type="submit"]').removeAttr('disabled');
        }
     });
 });

source: jQuery disable/enable submit button

Answer 2

The existing code in the question worked fine, but gets disabled when the text is removed. This may be desired by others but you could make a small change to have it permanently removed without needing jquery (jquery wasn't in the tags)

function toggleButton(ref,bttnID){
  document.getElementById(bttnID).removeAttribute("disabled");
}

and add onkeyup="toggleButton(this,'bttnsubmit') to any fields that need to enable the button

Answer 3

Adding the final code that did the trick:

<script type="text/javascript">
$(document).ready(function() {
     $('#bttnsubmit').attr('disabled','disabled');
     $('#subEmail').keyup(function() {
        if($(this).val() != '') {
           $('#bttnsubmit').removeAttr('disabled');
        }
        else {
        $('#bttnsubmit').attr('disabled','disabled');
        }
     });
 });
</script>