javascript - HTML Form, onclick ="this.disabled=true;this.value=' Sending, please wait.. .'; return false;"禁用按钮但从不提交表单

Question

我正在制作一个简单的图像板，onclick 函数非常挑剔。

<div id="makeApost">
    <form name="post" method="post" action="post.php?new" enctype="multipart/form-data" >
        <table class="postForm" id="postForm">
            <caption><h1>Create Thread</h1></caption>
            <tr data-type="Comment">
                <td style="background-color:#ff33ff;">Comment</td>
                <td>
                    <textarea id="com" name="com" cols="48" rows="4" wrap="soft"></textarea>
                </td>
            </tr>
            <tr data-type="File" >
                <td style="background-color:#ff33ff;">File</td>
                <td><input id="file" name="file" type="file"></td>
                <td><input id="submit" type="submit" onclick="this.disabled=true;this.value='Sending, please wait...'; this.form.submit();"></td>
            </tr>
        </table>
    </form>
</div>

这是post表单，我也试过:

<td><input id="submit" type="submit" onclick="this.form.submit();this.disabled=true;this.value='Sending, please wait...';"></td>

但这不会在按下按钮时禁用按钮，并允许多次提交，这可能会导致垃圾邮件。

Answer 1

在提交表单时禁用按钮，而不是单击按钮。

<form onsubmit="document.getElementById('btnSubmit').disabled=true;">
    <input type="submit" id="btnSubmit" />
</form>