如何确保我的 javascript 动画在提交按钮完成之前运行？

Question

Attached code below. I have a submit button that uses a form method POST, and then it's supposed to run the javascript animation, though it kicks me to the next page before it gets the chance to run it.

Is there a way I can add a delay to the submission such that the animation is completed first? In this code, it doesn't even get a chance to run the javascript.

<div class="container">
    <div class="pt-5 text-white">
        <link rel="stylesheet" href="css/postQuestion.css">
        <br>
        <br>
        <br>
        <br>
        <h1>Post a question</h1>
        <br>
        <form method="POST" action="{{ route("post_post") }}">
            @csrf
            {{-- Title box --}}
            <div class="none" style="margin:0 auto;">
                <input class="search" name="title" type="text" id="search" placeholder="Title" required/>
            </div>
            <br>
            <div class="none">
                {{-- Question box --}}
                <textarea required name="content" class="search2" type="text" id="search" placeholder='Explain your question here.

            Protip: add your code as <code> YOUR CODE HERE </code> to format correctly.'></textarea>
            </div>
            <br/>
            <div class="dropdownTag">
                <select name="label_id" class="dropdownTag-select" required>
                    <option value="-1">Select Tag</option>
                    @foreach(\Illuminate\Support\Facades\DB::table("tags")->orderBy('name', 'asc')->get() as $tag)
                        <option value="{{ $tag->id }}">{{ $tag->name }}</option>
                    @endforeach
                </select>
            </div>
            <br/>
            <div class="container">
                <button id="button" type="submit"></button>
                <form submit="return function();">
            </div>
        </form>
    </div>

    <script>
        $(function () {

            $("#button").click(function () {
                $("#button").addClass("onclic", 250, validate);
            });

            function validate() {
                setTimeout(function () {
                    $("#button").removeClass("onclic");
                    $("#button").addClass("validate", 450, callback);
                }, 2250);
            }

            function callback() {
                setTimeout(function () {
                    $("#button").removeClass("validate");
                }, 1250);
            }
        });
    </script>
</div>

Answer 1

If you need to use the "submit", then you can simply hide the submit button itself, and hang the listener on the button that will call its animations, and then, when you need it, submit.

...
<div class="container">
      <button id="button" type="button"></button>
      <input id="submit" type="submit" hidden />
      <form submit="return function();">
</div>
...
...
$("#button").click(function (event) {
     event.preventDefault();
     $("#button").addClass("onclic", 250, validate);
     ...
     $("#submit").click();
});
...

It is also possible without creating a hidden input through the form submission. I think this option is better.

...
<form id="someform" method="POST" action="{{ route("post_post") }}">
 ...
 <div class="container">
       <button id="button" type="button"></button>
       <form submit="return function();">
 </div>
...
...
 $("#button").click(function (event) {
      event.preventDefault();
      $("#button").addClass("onclic", 250, validate);
      ...
      $("#someform").submit();
 });
...

Answer 2

Using event.preventDefault() you can halt the normal behavior of the form. After that you can implement whatever you like before manually submitting the form from JS.

If what you need is to wait some time before submitting, you can then use setTimeout() .

Then manually submit the form using submit() function.

Vanilla JS

<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.forms['test_form'].addEventListener('submit', function (e) {
            e.preventDefault();
            form = this;
            // Make a new timeout set to go off in 1000ms (1 second)
            setTimeout(function () {
                // submit form after timeout
                form.submit();
            }, 1000);
        });
    });
</script>

<form name="test_form" method="POST" action="{{ route('post_post') }}">
    <label for="test">Test field</label>
    <input type="input" name="test"/>
    <input type="submit"/>
</form>

 document.addEventListener('DOMContentLoaded', function() { document.forms['test_form'].addEventListener('submit', function(e) { e.preventDefault(); form = this; // Make a new timeout set to go off in 1000ms (1 second) setTimeout(function() { // submit form after timeout form.submit(); }, 1000); }); });

 <form name="test_form" method="POST" action="{{ route('post_post') }}"> <label for="test">Test field</label> <input type="input" name="test" /> <input type="submit" /> </form>