DrProfesor
DrProfesor

Reputation: 27

HTML Form, onclick="this.disabled=true;this.value='Sending, please wait...'; return false;" disables the button but never submits the form

I am making a simple image board and the onclick function is being very finicky.

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

This is the post form, i have also tried:

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

But this does not disable the button when it has been pressed and allows for multiple submits which could lead to spamming.

Upvotes: 1

Views: 2002

Answers (1)

epascarello
epascarello

Reputation: 207521

Disable the button on submit of the form, not the click of the button.

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

Upvotes: 2

Related Questions