javascript - 提交时包含 2 个事件的表单

Question

我创建了一个全局函数来为表单中的提交按钮添加加载效果:

// add loading effet for forms
$('form').not('.form-ajax').on('submit', function() {
    btnLoad($(this).find('button[type="submit"]'));
});

它只是在提交按钮上显示一个加载程序，然后将其禁用。

它有效，但有时我想在提交之前显示确认:

<form method="post" 
    action="/delete/post"
    onsubmit="return confirm('Do you want to delete this post ?');"
>
    <input type="hidden" value="2" name="id" />
    <button type="submit">
        Delete post
    </button>
</form>

因此它在我的按钮上显示了加载程序，但如果用户在确认对话框上单击“否”，则表单不会提交。

我能轻易捕获它吗？如果表单确实提交，则显示加载程序？

Answer 1

它会帮助你:

  <form method="post" 
        action="/delete/post"
        onsubmit="return validate(this);"
    >
        <input type="hidden" value="2" name="id" />
        <button type="submit">
            Delete post
        </button>
    </form>
    <script>
    function validate(form) {

        // validation code here ...


        if(!valid) {
            alert('Please correct the errors in the form!');
            return false;
        }
        else {
            return confirm('Do you really want to submit the form?');
        }
    }
    </script>