提交表单后重置 jQuery 输入字段字符倒计时答案

【问题标题】：Resetting a jQuery input field character countdown after the form has been submitted提交表单后重置 jQuery 输入字段字符倒计时
【发布时间】：2014-01-02 20:39:00
【问题描述】：

我的目标是将表单输入限制为 220 个字符。我可以使用一些服务器端 PHP 和 maxlength 属性来做到这一点。

我的问题与我在页面上显示的字符倒计时有关，该倒计时向用户显示他们在达到可以在输入字段中输入的最大值之前还剩下多少字符。

我已经完成了下面的演示。

演示： http://jsfiddle.net/GPmq8/

您将看到计数器随着用户在输入字段中的输入而减少。这一点是有效的。

用户提交表单后，我希望计数器返回 220（即自行重置）。我怎样才能修改我的脚本来做到这一点？注意，我的表单是通过 AJAX 提交的，所以不会重新加载页面。

【问题讨论】：

标签： javascript jquery html forms

【解决方案1】：

我在您的示例中没有看到任何表单标签，但是您可以尝试在有人单击提交时恢复 input 的值

<input type="text" placeholder="Type something..." class="form-entry" name="form-entry" rows="1" maxlength="220" value="" />
<div><button name='Mybutton' id='MyButton'>Submit</button></div>
<hr />
<span class="countdown"></span>

function updateCountdown() {
    // 220 is the max message length
    var remaining = 220 - jQuery('.form-entry').val().length;
    jQuery('.countdown').text(remaining + '');
}

jQuery(document).ready(function($) {
    updateCountdown();
    $('.form-entry').change(updateCountdown);
    $('.form-entry').keyup(updateCountdown);

    $('#MyButton').click(function(){
        jQuery('.countdown').text('220');
        jQuery('.form-entry').val('');

    });

});

http://jsfiddle.net/GPmq8/

【讨论】：

抱歉，为了简短起见，我省略了表单标签。这种方法的问题是当有人点击提交时 - 计数器重置但表单不再提交。
这是概念，如果您粘贴完整代码我们可以为您提供完整的解决方案，请记住也要在服务器端进行验证，永远不要相信用户
jQuery('.countdown').text('220');当然确实回答了我的问题 - 它在提交后重置倒计时。我相信我能够以某种方式提交表单。谢谢。

【解决方案2】：

在 ajax 调用成功时，重置你的东西。

【讨论】：

【解决方案3】：

提交后只需将输入字段重置为空字符串。您的计数器将由您当前的代码重置。您可以通过将以下行添加到您的 ajax 返回的脚本中（例如，success）。

$.ajax({
     type: "POST",
     url: '/YOUR.php',
     data: formData,
     success: function (data) {
          $('.form-entry').val(''); 
     }
 });

【讨论】：

感谢您的回答。我正在使用的脚本可以在这里找到：github.com/Automattic/liveblog/blob/master/js/liveblog.js - 我不完全确定如何合并 $('.form-entry').val('');喜欢吗？
嗨，我快速阅读了代码。我在liveblog.ajax_request 里面找到了success: success_callback。因此，在带有输入字段的页面中，应该有某种调用 liveblog.ajax_request 及其参数（用于将输入字段的内容发送到 php 脚本）。在那里你必须插入function() { $('.form-entry').val(''); }; 作为第三个参数。
感谢您的调查。我选择避免修改插件，以防将来需要更新。 jcho360 的 jQuery('.countdown').text('220');似乎成功了。为您的答案 +1，因为我知道它对您有帮助。

【解决方案4】：

你可以这样做：

function resetCountdown(){
 $('.countdown').text('220');
 $('.form-entry').val('');  
}

$.ajax( "example.php" )
  .done(function() {
    resetCountdown();
});

【讨论】：