jQuery form submission

Question

My form works as it should and i receive the emails from it but if you hit submit without entering data you get an error box informing you what you of required fields - however my submit button stays greyed out, so even if you then fill in those fields you cannot submit the form without a refresh.

code:

jQuery(document).ready(function() {
    $('#success').hide();

    $('#contactform').submit(function() {
        var action = $(this).attr('action');

        $('#contactform #submit').attr('disabled', 'disabled').after('<img src="images/ajax-loader.gif" class="loader" />');

        $("#message").slideUp(750,function() {
            $('#message').hide();

            $.post(action, { 
                name: $('#name').val(),
                email: $('#email').val(),
                phone: $('#phone').val(),
                subject: $('#subject').val(),
                comments: $('#comments').val(),
                verify: $('#verify').val()
            },
            function(data) {
                document.getElementById('message').innerHTML = data;
                $('#message').slideDown('slow');
                $('#contactform img.loader').fadeOut('fast',function(){$(this).remove()});
                $('#contactform #submit').attr('disabled',''); 
                if(data.match('success') != null) $('#submit').hide();

            });
        });

        return false; 
    });
});

Any help is much appreciated!

Answer 1

This is because the disabled attribute works by existence. By that I mean that the very inclusion of the disabled attribute causes the element to be disabled.

Replace:

$('#contactform #submit').attr('disabled','');

with:

$('#contactform #submit').removeAttr('disabled');

Answer 2

This is because the submit button is disabled after you hit the submit:

  $('#contactform #submit').attr('disabled','disabled').after('<img src="images/ajax-loader.gif" class="loader" />');

you shoul re-enable it if the validation fails like this:

 $('#contactform #submit').removeAttr('disabled');

Answer 3

Try using removeAttribute function.

I think it will solve your problem.

(As <input type='text' disabled='disabled' ----> and <input type='text' disabled ---> are same. Using removeAttribute will render something like <input type='text' ---> and your problem will be solved)

Answer 4

did you check if this script actually runs to the point where it should remove or update the attribute?