Magento 2: How To Disable Button On Form Submit?

Question

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));?>"
      id="drawpad-form"
      method="post"
      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>
            </div>
            <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>
            </div>
        </div>
        <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; ?>
                </select>
            </div>
        </div>
        <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>
            </div>
            <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>
            </div>
        </div>
        <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>
        </div>
    </fieldset>
    <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>
            </button>
        </div>
    </div>
</form>

<script>    

require(['jquery'],function($){
    $(document).ready(function(){   
        $('#drawpad-form').submit(function(){
            $('#submit').click(function(e) {
                this.disabled = true;
            });
        });
    });
}); 

</script>

Answer 1

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);
});

Answer 2

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.