禁用表单提交 JQuery 上的按钮后，使用按钮名称将表单提交给 PHP

Question

I have a form which uses php for form processing. I don't the user to submit the form twice. I've tried to use jquery to disable the form on submit. but the problem is it disables the button but don't submit the form to php.

I want to detect the form submission with the submit button name.

$('form').submit(function(){
    $(this).find('button[type=submit]').prop('disabled', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="signup.php" method="post" class="form-horizontal m-t-30" novalidate>

    <div class="form-group">
        <div class="col-12">
            <label for="username">Username</label>
            <input type="text" name="username" placeholder="Choose a Username" maxlength="15" id="username" class="form-control" required>
            <div class="form-errors <?php echo isset($errors['username']) ? 'filled' : ''; ?>"><?php echo $errors['username'] ?? ''; ?></div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-12">
            <label for="email">Email</label>
            <input type="email" name="email" placeholder="Enter your Email address" id="email" class="form-control" required>
            <div class="form-errors <?php echo isset($errors['email']) ? 'filled' : ''; ?>"><?php echo $errors['email'] ?? ''; ?></div>
        </div>
    </div>                            

    <div class="form-group">
        <div class="col-12">
            <label for="password">Password</label>
            <input type="password" name="password" placeholder="Enter password" id="password" class="form-control" required>
            <div class="form-errors <?php echo isset($errors['password']) ? 'filled' : ''; ?>"><?php echo $errors['password'] ?? ''; ?></div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-12">
            <p class="font-12">By registering you agree to the Pawnhost Terms of Use</p>
        </div>
    </div>

    <div class="form-group text-center m-t-20">
        <div class="col-12">
            <button type="submit" name="signup-submit" id="btnSubmit" class="btn btn-block btn-primary w-md waves-effect waves-light">
                <span id="btnLoading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>
                <span id="btnText">Create My Account</span>
            </button>
        </div>
    </div>

    <div class="form-group row m-b-0 mt-4">
        <div class="col-12 text-center">
            <a href="login.php" class="text-muted">Already have an account? Login</a>
        </div>                              
    </div>
</form>

Answer 1

You should set the attribute, not the property.

$('form').on('submit', function(event){ $(this).find('button[type=submit]').attr('disabled', 'disabled'); });

OP also wanted to include the button in the form submission. This can be achieve by instead of using a button, using an input tag.

<input type="submit" name="mybtn" value="myval" />