Question

我有一个包含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>

JS

$(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');
    }
});

Answer 1

您可以使用：

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

<强>更新：忘记提到你应该用这个函数扩展jQuery：

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

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

1 个答案: