Question

我有一个使用jQuery Form Plugin（http://jquery.malsup.com/form/）提交的表单。实际上我遇到了两个问题。使用此代码：

$(document).ready(function() {  
    var options = {
        target: "#result",
        beforeSubmit: showRequest,
        forceSync: true
    };

    $("#testForm").submit(function() {
        $(this).ajaxSubmit(options);

        return false;
    });

});

表单提交，但表单仍然可见，就像没有提交任何内容一样。在Chrome，Firefox等中，表单消失，成功页面出现。在IE9中，没有任何反应，但表单已正确提交。

$(document).ready(function() {  
        var options = {
            target: "#result",
            beforeSubmit: showRequest,
            forceSync: true
        };

        $("#testForm").submit(function() {
            $(this).ajaxSubmit(options);

            return true;
        });

    });

将.submit（）中的返回值设置为true，表单将消失并加载成功页面，但表单将提交两次。

在这两种情况下，表单都会在Chrome和Firefox中正确提交。

有关我正在做错的任何提示吗？谢谢

Answer 1

<script src="jquery-2.0.3.js"></script>
<script src="jquery_form.js"></script>
<script>

$(document).ready(function() {

                $('#AddVersion').submit(function() {
                    var options = {
                        url:        'upload.php',
                        success:    showResponse
                    };
                    // inside event callbacks 'this' is the DOM element so we first
                    // wrap it in a jQuery object and then invoke ajaxSubmit
                    $(this).ajaxSubmit(options);
                    console.log($(this));
                    //alert("I am herer");

                    // !!! Important !!!
                    // always return false to prevent standard browser submit and page navigation
                    return false;

                });

                function showResponse(data) {
                alert('Total files uploaded are :'+data);
                //alert('uploaded successfully');
            }
            });
</script>
                        <form role="form" id="AddVersion" name="AddVersion"  method="POST" enctype="multipart/form-data">
                            <div class="modal-body">
                                    <input type="hidden" id="htmls_new" name="htmls_new" value="1" /> 

                              <table class="table table-striped table-bordered table-hover">
                                <tbody>
                                    <tr style="font-size:12pt;" class="warning">
                                        <td><p class="text-info">Select File(s)</p></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="form-group">
                                                <input id="input_V_File" name="input_V_File[]" type="file" class="" form="AddVersion" multiple/>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="floatRight">
                                                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>&nbsp;
                                                <input type="submit" form-action="#" form="AddVersion" class="btn btn-success floatRight" value="Submit" />
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                                </table>
                            </div>
                        </form>

ajaxSubmit帮助 - IE9没有加载目标或提交两次

1 个答案: