检查表单数据值并禁用提交按钮jQuery表单

Question

I'm trying to disable to submit button inorder to avoid duplicate entries.

I have checked all SOF, Google and so.

What happens is, I get the code for disabling the submit button but it doesn't check for whether the form is completed with data or not.

To minimize your time and effort I have the code here is JSFiddle. http://jsfiddle.net/4gL0f2tz/

What I'm trying to do is.

1. Check whether the form values are completed (if not throw error - for this I use required attribute)
2. Once the form is completed with values then disable the submit button and proceed to process page.

Here is the jQuery snippet

    <script type="text/javascript">
    $(document).ready(function(){
    $('input:submit').click(function(){
            $('p').text("Form submiting.....");
            $('input:submit').attr("disabled", true);   
            $.ajax({
            type: "POST",
            url: "form_process.php",
            data: "id=abc" ,
            success: function(){alert('success');}
            });
    });
    });
    </script>

The full code is available here. http://jsfiddle.net/4gL0f2tz/

Note: I have code to disable the submit button, how can I disable after checking whether all the form values are completed and then disable it.

Answer 1

i've updated your fiddle to this: click here

you can just check each required field, whether its filled (or whatever you want) and then disable the button.

the "magic" is just simply this:

$('input:submit').click(function(evt){

// We think any required field is filled
var filled = true;
$('input[required]:visible').each(function(key, el) {
    // Check if a field is not filled (just an example)
    // you could also do any other checks
    if ( $(el).val() == '' ) filled = false;
});

if ( filled == true ) { /* send it */ }

evt.preventDefault();

});

but you need to stop the form from being send, because you want to send your form by AJAX request... you can do this with preventDefault()

Answer 2

You would put this in your .submit() function instead of a .click() function:

<script type="text/javascript">
$(document).ready(function(){
$('form').submit(function(e){
        e.preventDefault();

        //validate
        $(":input",$(this)).each(function(i,v){
           if(v.val().trim()==""){ alert("Fix empty field!"); return false; }
        });

        $('p').text("Form submiting.....");
        $('input:submit', $(this)).attr("disabled", true);   
        $.ajax({
        type: "POST",
        url: "form_process.php",
        data: "id=abc" ,
        success: function(){alert('success');
        $('input:submit', $(this)).removeAttr("disabled");   }
        });
});
});
</script>