实现Bootstrap 4表单提交按钮5秒加载旋转效果的技术求助

Got it, let's get this sorted out! The main issue here is that your submit button triggers the form's default submission immediately when clicked—so even though you're showing the loading spinner, the page probably reloads right away before the 5-second delay can kick in. Here's how to adjust your code to make it work exactly as you want:

Step-by-Step Breakdown of Changes: #

• First, we need to prevent the form's default submit behavior when the button is clicked, so we can take control of when the submission happens.
• Then, we'll set up a 5-second delay using setTimeout().
• After the delay, we'll manually submit the form to trigger the GET request with your input parameters.

Modified Full Code: #

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
    $("#btnFetch").click(function(e) {
        // Stop the form from submitting right away
        e.preventDefault();
        
        // Save the original button text (optional but handy if you ever need to revert the state)
        const originalBtnText = $(this).text();
        
        // Disable button and add Bootstrap loading spinner
        $(this).prop("disabled", true);
        $(this).html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`);
        
        // Wait 5 seconds, then submit the form manually
        setTimeout(() => {
            $("#testForm").submit();
        }, 5000); // 5000 milliseconds = 5 seconds
    });
});
</script>
<div class="form-group">
    <div style="margin:3em;">
        <form action="/creation" id="testForm" method="GET">
            <input type="text" name="name" class="form-control" id="name" placeholder="Enter name">
            <button type="submit" id="btnFetch" class="btn btn-primary mb-2">Submit</button>
        </form>
    </div>
</div>

Key Details: #

• The e.preventDefault() line is non-negotiable—it stops the browser's automatic form submission, giving our delay logic time to run.
• Using $("#testForm").submit() inside the setTimeout triggers the form submission after the wait, which will send the GET request to /creation with the name parameter from your input field, just like you intended.
• Storing the original button text is optional, but it’s a good practice if you ever need to reset the button (for example, if the submission fails and you want to let the user try again).

内容的提问来源于stack exchange，提问作者Slyron