I'm trying to disable button after submitting form, but i'm facing some issue, when i submit black field it validate the form and disable the button... but i want to disable it on form submit successfully....go through many answers but could not succeed.

Here is my phtml file:

<form class="form quote"
      action="<?php /* @escapeNotVerified */ echo $block->getUrl("partsquote/index/QuotePost", array("_secure" => true));?>"
      data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>"
      data-mage-init='{"validation":{}}' enctype="multipart/form-data">

    <?php echo $block->getBlockHtml('formkey')?>
    <fieldset class="fieldset">
        <!--legend class="legend"><span><?php /* @escapeNotVerified */ echo __('Quote Request') ?></span></legend><br /-->
        <div class="fields">
            <div class="field name required">
                <label class="label" for="name"><span><?php /* @escapeNotVerified */ echo __('Your Name') ?></span></label>
                <div class="control">
                    <input name="name" id="quote_name" title="<?php /* @escapeNotVerified */ echo __('Your Name') ?>" placeholder="<?php /* @escapeNotVerified */ echo __('Your Name') ?>" value="" class="input-text" type="text" data-validate="{required:true}"/>
            <div class="field email required">
                <label class="label" for="email"><span><?php /* @escapeNotVerified */ echo __('Your Email') ?></span></label>
                <div class="control">
                    <input name="email" id="quote_email" title="<?php /* @escapeNotVerified */ echo __('Your Email') ?>" placeholder="<?php /* @escapeNotVerified */ echo __('Your Email') ?>" value="" class="input-text" type="email" data-validate="{required:true, 'validate-email':true}"/>
        <div class="field">
            <label class="label" for="state"><span><?php /* @escapeNotVerified */ echo __('Your State / Province') ?></span></label>
            <div class="control">
                <select name="state" id="quote_state" class="required-entry validate-state" title="Your State / Province" aria-required="true">
                    <option value="" selected="selected">Please Select State / Province</option>
                    <?php foreach($block->getRegionCollection() as $region): ?>
                        <option value="<?php echo $region->getName(); ?>"><?php echo $region->getName(); ?></option>
                    <?php endforeach; ?>
        <div class="fields">
            <div class="field phone required">
                <label class="label" for="phone"><span><?php /* @escapeNotVerified */ echo __('Your Phone Number') ?></span></label>
                <div class="control">
                    <input name="phone" id="quote_phone" title="<?php /* @escapeNotVerified */ echo __('Your Phone Number') ?>" value="" placeholder="<?php /* @escapeNotVerified */ echo __('Your Phone Number') ?>" class="input-text" type="number" data-validate="{required:true}"/>
            <div class="field product required">
                <label class="label" for="product"><span><?php /* @escapeNotVerified */ echo __('Product Voltage/Wattage') ?></span></label>
                <div class="control">
                    <input name="product" id="quote_product" title="<?php /* @escapeNotVerified */ echo __('Product Voltage/Wattage') ?>" placeholder="<?php /* @escapeNotVerified */ echo __('Product Voltage/Wattage') ?>" value="" class="input-text" type="text"/>
        <div class="field message required">
            <label class="label" for="message"><span><?php /* @escapeNotVerified */ echo __('Your Message') ?></span></label>
            <div class="control">
                <textarea name="message" id="quote_message" title="<?php /* @escapeNotVerified */ echo __('Your Message') ?>" class="input-text" cols="5" rows="3" data-validate="{required:true}" placeholder="<?php /* @escapeNotVerified */ echo __('Your Message') ?>"></textarea>
    <div class="actions-toolbar">

        <div class="primary">
            <input type="hidden" name="image" id="quote_image" value="" />
            <input type="hidden" name="productName" id="productName" value="<?php echo $productName; ?>" />
            <button type="submit" id="submit" title="<?php /* @escapeNotVerified */ echo __('Submit') ?>" class="action submit primary">
                <span><?php /* @escapeNotVerified */ echo __('Submit') ?></span>


            $('#submit').click(function(e) {
                this.disabled = true;


2 Answers 2


My problem was solved when I add bind section to my script file.

I did this 2 steps :

1 - Disable button and prevent double submitting :

$('form').submit(function () {
    $(this).find(':submit').attr('disabled', 'disabled');

2 - Enable submit button if validation error occurred :

$("form").bind("invalid-form.validate", function () {
    $(this).find(':submit').prop('disabled', false);

Try this approach:

            jQuery('#form').on('submit', function () {
                if (jQuery(this).data('form_is_invalid')) {
                    jQuery(this).data('form_is_invalid', false);
                } else {
                    jQuery(this).find('.submit').prop('disabled', true);
            }).on('invalid-form.validate', function () {
                jQuery(this).data('form_is_invalid', true);

And if you have access to jQuery validate initialization, you can use submitHandler.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.