Question

我在聊天中添加了一个jQuery脚本，因此消息在没有页面刷新的情况下发送。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

    $(document).ready(function(){
            $("#msgsending").validate({
               type: "POST",
                    debug: false,

                    submitHandler: function(form) {
                            // do other stuff for a valid form
                            $.post('index.php', $("#msgsending").serialize(), function(data) {

                            });
                    }
            });
    });
    </script>

并形成

 <form id="msgsending" name="form" method="post" action="" > 
<input name="message" id="message" type="text" maxlength="350" />

<input name="message" id="message" type="text" maxlength="350" />

<input name="submit" type="submit" value="Send!" />

</form>

代码完美无缺。（index是在数据库中插入消息+用户名的脚本）

但现在我有一个问题。

提交后，文本不会在输入的消息上删除。我已经google了很多页面，所有的代码都不起作用。（有些人工作但邮件没有发送）

你有什么建议我？

Answer 1

$('#message').val('');应清除input的值，我猜你在发送邮件后会这样做，例如：

$(document).ready(function(){
    $("#msgsending").validate({
       type: "POST",
          debug: false,
          submitHandler: function(form) {
               // do other stuff for a valid form
               $.post('index.php', $("#msgsending").serialize(), function(data) {
                    $('#message').val('');
               });
          }
    });
});

这仅适用于ID #message的第一个元素，因为ID是唯一的，您不能拥有两个具有相同ID的元素

Answer 2

而不是

$.post('index.php', $("#msgsending").serialize(), function(data) {

});

你可以做点什么：

var data = $("#msgsending").serialize();
$('#message').val('');

$.post('index.php', data, function(data) {

});

在发送请求之前清空消息字段或者如@adeneo建议的那样，您可以清空AJAX成功回调中的字段。

Answer 3

您可以在.post()的回调函数中放置任何代码，以清除或重置表单。

您还type: "POST"列出了.validate()选项。您应该将其删除为not a valid option/parameter for this plugin。

由于您正在执行ajax，因此在return false的末尾需要submitHandler才能阻止页面重定向。

或者，您也可以将$('#msgsending').serialize()替换为$(form).serialize()或form.serialize()，因为form已传递到submitHandler回调函数。

$(document).ready(function(){
    $("#msgsending").validate({
        type: "POST", // <-- REMOVE THIS... not a valid plugin option
        debug: false,
        submitHandler: function(form) {
            // do other stuff for a valid form
            $.post('index.php', $(form).serialize(), function(data) {
                $('#message').val(''); // clears out #message
                // any other code to clear out or reset the form
            });
            return false; // prevent page redirection
        }
    });
});

jQuery在提交后删除输入文本

3 个答案: