Check for form data values and disable submit button jQuery form

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.

Check whether the form values are completed (if not throw error - for this I use required attribute)
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.

Do you mean that you want to disable the button after validation success? — VPK
– VPK, Commented Sep 25, 2014 at 5:57
I want to submit once the form is completed with data and the validation is success. — user3350885
– user3350885, Commented Sep 25, 2014 at 6:01

HR123 · Accepted Answer · 2014-09-25 06:06:14Z

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()

answered Sep 25, 2014 at 6:06

HR123

7081 gold badge6 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Control Freak · Accepted Answer · 2014-09-25 06:07:31Z

1

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>

answered Sep 25, 2014 at 6:07

Control Freak

13.2k31 gold badges101 silver badges150 bronze badges

Collectives™ on Stack Overflow

Check for form data values and disable submit button jQuery form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related