发送消息后清除表单输入

Question

Im trying to clear the form message input field after the form has been sent. Although its clearing the data before it has a chance to be sent. Here is my code:

<script>
    $(function () {
        $('form#SendForm').on('submit', function (e) {
            $.post('sendmessagefriend.php', $(this).serialize(), function (data) {
                // This is executed when the call to mail.php was succesful.
                // 'data' contains the response from the request
            }).error(function () {
                // This is executed when the call to mail.php failed.
            });
            e.preventDefault();
        });
    });
</script>
<script>
    $('#SendForm').on('click', function () {
        $('#SendForm').find('input:text').val('');
        $('input:checkbox').removeAttr('checked');
    });
</script>   

FORM:

 <form id="SendForm" class="SendMsg" role="form" method="post" action="sendmessagefriend.php"> <input type="text" id="s_firstname" name="s_firstname" class="MsgInputHidden" value="<?= $_SESSION["user"]["firstname"] ?>" /> <input type="text" id="s_lastname" name="s_lastname" class="MsgInputHidden" value="<?= $_SESSION["user"]["lastname"] ?>" /> <input type="text" id="sender" name="sender" class="MsgInputHidden" value="<?= $_SESSION["user"]["id"] ?>" /> <input type="text" id="r_firstname" name="r_firstname" class="MsgInputHidden"value="<?= $FriendName->firstname ?>" /> <input type="text" id="r_lastname" name="r_lastname" class="MsgInputHidden"value="<?= $FriendName->lastname ?>" /> <input type="text" id="recipient" name="recipient" class="MsgInputHidden" value="<?= $FriendName->id ?>" /> <input type="text" id="ip" name="ip" class="MsgInputHidden" value="<?= $_SERVER["REMOTE_ADDR"] ?>" /> <input type="text" id="date" name="date" class="MsgInputHidden" value="<?= date('Ym-d') ."\\n" ?>" /> <?php $now = time(); $utc_time = $now - intval(date('Z', $now)); ?> <input type="text" id="time" name="time" class="MsgInputHidden" value="<?= '' . date('H:i:s', $now) . '' ?>" /> <input id="message" type="text" name="message" style="width: 100%; overflow: scroll;"> <input id="submit" class="submit" type="submit" name="submit" value="Submit" /> </form> 

Answer 1

Instead of a click handler, put this

$('#SendForm').find('input:text').val(''); 
$('input:checkbox').removeAttr('checked');

in the success callback like

$('form#SendForm').on('submit', function(e) {
        $.post('sendmessagefriend.php', $(this).serialize(), function (data) {
            // This is executed when the call to mail.php was succesful.
            // 'data' contains the response from the request
            $('#message').val(''); 
        })
        .error(function() {
            // This is executed when the call to mail.php failed.
        });
        e.preventDefault();
    });

If you don't care whether the request is successful or not and just want to clear the input regardless, put it after your ajax call like

$('form#SendForm').on('submit', function(e) {
            $.post('sendmessagefriend.php', $(this).serialize(), function (data) {
                // This is executed when the call to mail.php was succesful.
                // 'data' contains the response from the request
            })
            .error(function() {
                // This is executed when the call to mail.php failed.
            });

            $('#message').val('');  
            e.preventDefault();
        });