如何有效地清除/休息表格？答案

【问题标题】：How to effectively clear/rest a form?如何有效地清除/休息表格？
【发布时间】：2013-10-03 21:29:59
【问题描述】：

我有一个带有textarea、一些input[type=text] 和其他input[type=file] 的表单。我通过 Jquery Form 插件提交表单，然后我无法以任何方式清除/休息表单。我尝试了 clearFrom 和 resetForm 表单插件选项和其他一些，但似乎都没有工作

HTML

<form action="validade_main_cenas.php" method="POST" enctype="multipart/form-data" class="post-cenas-form" id="post-cenas-form" name="post_cenas_form">
    <div>
        <fieldset>
            <label>cenas</label>
            <textarea name="cenas" rows="" class="ask_cenas_form_input_question" placeholder="cenas your cenas..."></textarea>
        </fieldset>
        <fieldset>
            <div class="image-post-container" id="image-post-container">
                <div id="image-post-preview" class="image-post-preview">
                    <img id="image-preview" name="image-preview" class="image-preview" src="#">
                </div>
            </div>
        </fieldset>
        <fieldset>
            <label>Tags</label>
            <input id="tags" name="tags" class="input-block-level" type="text" placeholder="e.g cenas">
        </fieldset>
        <div id="" class="footer">
            <div id="" class="footer-post-image">
                <button type="button" id="yourBtn" class="btn" onclick="getFile()"><i class="icon-camera"></i> 
                </button>
                <div style='height: 0px;width: 0px; overflow:hidden;'>
                    <input id="upfile" type="file" name="myfile" value="upload" />
                </div>
            </div>
            <div id="" class="footer-submit-button">
                <input type="submit" id="cenas_it" class="btn btn-hunch" value="Hunch" />
            </div>
        </div>
        <!-- close footer !-->
    </div>
    <!-- wrapper para quando existe imagem !-->
</form>
<script type="text/javascript">
    function getFile() {
        document.getElementById("upfile").click();
    }

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#image-preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#upfile").change(function() {
        readURL(this);
        $('#image-post-container').slideDown('fast');
    });
</script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript" src="js/load_questions.js"></script>

$(document).ready(function () {
    var options = { 
        clearForm: true,
        resetForm: true,
        success: function (html) {
            $("ol#list-feed").prepend(html);
            $("ol#list-feed li:first").slideDown(600);
            $("ol#list-feed li div.footer-post").hide();
            resetForm($('#post-cenas-form'));
            document.getElementById('set-width1').reset();
            document.getElementById('upfile').reset();
            document.getElementById('tags').reset();
            //document.getElementById('set-width1').val('');
            //document.getElementById('tags').val('');
            if ($("ol#list-feed > li").size() <= 3) {
                $('#loadmorebutton').hide();
            } else {
                $("ol#list-feed > li:last").remove();
                $('#loadmorebutton').show();
            }
            $('form#post-cenas-form')[0].reset();
            //$("#post-cenas-form").resetForm();
            //$(this).children(':input').val('');
        },
        error: function () {
            alert('ERROR: unable to upload files');
        },
        complete: function () {
            resetForm($('#post-cenas-form'));
            document.getElementById('set-width1').reset();
            document.getElementById('upfile').reset();
            document.getElementById('tags').reset();
            //$('form#post-cenas-form')[0].reset();
            //$(this).children(':input').val('');
        },
    };
    $("#post-cenas-form").ajaxForm(options);
    function resetForm($form) {
        $form.find('input:text, input:password, input:file, select, textarea').val('');
        $form.find('input:radio, input:checkbox')
        .removeAttr('checked').removeAttr('selected');
    }
});

【问题讨论】：

$('#post-cenas-form')[0].reset(); 应该绰绰有余。摆脱其余的。
我以前试过。尽管如此，我还是按照你的建议添加了 $('form#post-question-form')[0].reset(); “成功”和“完成”都没有效果。你能想象会发生什么吗？
谢谢凯文 B！这对我也很有帮助！我通常用一堆“将值设置为”-:-) 来制作一个按钮和一个点击功能
观察您的控制台，您是否看到任何错误？您尝试以其他方式执行该行之前的许多行可能会引发错误，从而阻止最后一个工作。
console (only thing) --> type error: document.getElementById(...) is null --> 指向 jquery 1.9.1

标签： jquery forms ajaxform

【解决方案1】：

你可以使用：

$('#FORM-ID').reset();

更新：忘了说你应该用这个函数扩展 jQuery：

    jQuery.fn.reset = function () {
       $(this).each (function() { this.reset(); });
    }

【讨论】：

在按钮点击之类的时候添加它
不，你不能。 jQuery 对象不支持 reset() 方法。 <form> DOM 元素。
@FrédéricHamidi 谢谢你，我已经更新了评论，现在应该可以了 :)
是的，确实会。顺便说一句，如果你想扩展 jQuery 而不是访问底层 DOM 元素，你应该记住 this 已经是一个 jQuery 对象，如果可能的话，你应该致力于保留链接。因此，$.fn.reset() 的主体应该是return this.each(function() { this.reset(); });（您还可能应该检查当前元素是否真的支持reset()）。