Enable submit button when filling in some field with text

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?

Attach an event handler for the change event of your input, then enable/disable the button based on the value. — Xtian Macedo
– Xtian Macedo, Commented Jan 31, 2013 at 17:57

technosaurus · Accepted Answer · 2013-01-31 18:21:14Z

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

Community · Accepted Answer · 2017-05-23 11:46:40Z

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

samyb8 · Accepted Answer · 2013-01-31 18:13:20Z

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>

How do you make sure this function targets the right buttons??

Collectives™ on Stack Overflow

Enable submit button when filling in some field with text

3 Answers 3

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Linked

Related