Question

I have created a contact form that has a disabled submit button until all fields have been filled out and vallidated.

The issue I am having is that the Submit stays disabled on IE, even when all fields are validated, so the user is unable to send the form.

I’ve tried a number of ways to add different code for the submit button but with no success.

My code is as follows:

JQuery

$(function() {
$(":text").keypress(check_submit).each(function() {
check_submit();
   });
});

function check_submit() {
if ($(this).val().length == 0) {
$(":submit").attr("disabled", true);
} else {
$(":submit").attr("disabled", false);
  }
}

HTML

<form method="post" action="contactengine.php" id="commentForm">
      <label for="Name" id="Name">Name:</label>
        <input type="text" name="Name" class="required"/><br  /><br />



        <label for="Email" id="Email">Email:</label>
        <input type="text" name="Email" class="required"/><br  /><br />
        <label for="Location" id="Location">Location:</label>
        <input type="text" name="Location" class="required"/><br  /><br />


        <label for="Phone" id="Phone">Tel No:</label>
        <input type="text" name="Phone" class="required"/><br  /><br />

        <label for="Message" id="Message">Message:</label><br />
        <textarea name="Message" rows="20" cols="40" class="required"></textarea>

        <input type="submit" name="submit" value="Submit" class="submit_btn" />
    </form>

Answer 1

this isn’t referring to what you want when you call the function that way, instead it should be:

$(function() {
  $(":text").keypress(check_submit).each(check_submit);
});

function check_submit() {
  $(":submit").attr("disabled", $(this).val().length == 0);
}

…but this whole approach is flawed, since validating on any filled in field would enable the submit, instead you need to loop through and see if any are empty, not just the last one with a keypress, like this:

$(function() {
  $(":text").bind("keyup change", check_submit).change();
});

function check_submit() {
  var anyEmpty = false;
  $(":text").each(function() { 
    if($(this).val().length==0) { anyEmpty = true; return false; }
  });
  $(":submit").attr("disabled", anyEmpty);
}