Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

grey out submit button until form filled out

I have the following form:

 <form action="http://www.tahara.es/contact/subscribe.php" method="post" id="subscribe" name="subscribe">
      <input type="hidden" name="action" value="subscribe">
      <label>NAME:</label>
      <input type="text" name="name" class="Textbox" id="sub_first_name">
      <label>EMAIL:</label>
      <input type="text" name="email" class="Textbox" id="sub_email">
      <input type="submit" name="button" id="button" value="Subscribe" />

I would like to grey out the submit button until both fields in the form have been filled out. I guess jquery would do the trick?

How can I do this, and where should I place the script?

like image 302
samyb8 Avatar asked Jan 30 '13 22:01

samyb8


People also ask

How do you disable a button until all fields are filled?

Just click f12 in your browser, find the submit button in the html, and then remove the disabled ! It will submit the form even if the inputs are empty.

Can I use Submit button without form?

Submit buttons don't submit if they are not in a form.


1 Answers

Jquery would do that. On the .keyup event have jquery check if both field's lengths are > 0 and change the button to be disabled or not.

$('#yourButton').button("disable");​​​​​​​​​​​​​

$('.fields').bind('keyup', function() { 
var nameLength = $("#sub_first_name").length;
var emailLength = $("#sub_email").length;

if (nameLength > 0 && emailLength > 0)
{
   $('#yourButton').button("enable");​​​​​​​​​​​​​
}

} );
like image 165
Mr. Wise Avatar answered Sep 18 '22 08:09

Mr. Wise