如何確保我的 javascript 動畫在提交按鈕完成之前運行？

Question

下面附上代碼。 我有一個使用表單方法 POST 的提交按鈕，然后它應該運行 javascript 動畫，盡管它在有機會運行它之前將我踢到下一頁。

有沒有辦法可以在提交中添加延遲，以便首先完成動畫？ 在這段代碼中，它甚至沒有機會運行 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

如果您需要使用“提交”，那么您可以簡單地隱藏提交按鈕本身，並將偵聽器掛在將調用其動畫的按鈕上，然后在需要時提交。

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

也可以不通過表單提交創建隱藏輸入。 我認為這個選項更好。

...
<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

使用event.preventDefault()您可以停止表單的正常行為。 之后，您可以在從 JS 手動提交表單之前實現您喜歡的任何內容。

如果您需要在提交前等待一段時間，則可以使用setTimeout() 。

然后使用submit() 函數手動提交表單。

香草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>