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

Question

我有一个使用 php 进行表单处理的表单。我不让用户提交两次表单。我尝试使用 jquery 禁用提交时的表单。但问题是它禁用了按钮但不将表单提交给 php。

我想使用提交按钮名称检测表单提交。

$('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

您应该设置属性，而不是属性。

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

OP 还希望在表单提交中包含该按钮。这可以通过使用输入标签而不是使用按钮来实现。

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