每次单击按钮时都会提交表单。

Question

我有一个形式，我要保存2个文件和一个字段。我面临的问题是，每次我点击提交按钮，表单将被提交。尽管文本字段正在重置，但该文件仍然包含以前记录的值。如何在提交表单后在此重置文件。

HTML

<form id="formOrder" autocomplete="off" method="POST"  enctype="multipart/form-data"> 
    <div class="row row-sm">
        <div class="col-lg-8">
            <div class="row row-sm">
                <div class="col-lg-6">
                    <div class="input-group mb-4">
                        <input aria-label="Invoice ID" id="invoiceId" name="invoiceId" class="form-control" placeholder="Invoice ID" type="text">
                        <span class="text-danger"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div>
                <div class="input-group mb-3">
                    <div class="input-group file-browser">
                        <input id="imageLabel" type="text" class="form-control browse-file" placeholder="Select Order Image" readonly>
                        <label class="input-group-btn">
                            <span class="btn btn-default">
                                Browse <input type="file" name="image[]" id="orderImage" style="display: none;" multiple>
                            </span>
                        </label>
                    </div>
                    <div class="orderImagePreview">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group mb-0 mt-3 justify-content-end">
        <div>
            <input type="submit" id="_add" name="_add" class="btn btn-primary btn-size" value="Add"/>
        </div>
    </div>
</form>

JQUERY

// BUTTON CLICK SUBMISSION
$(document).ready(function(e){
    $("#_add").click(function(){        
        $("#formOrder").on('submit', function(e){
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: '../order/add.php',
                data: new FormData(this),
                dataType: 'json',
                contentType: false,
                cache: false,
                processData:false,
                async: false,
                autoUpload: false,
                success: function(response){
                    $('.statusMsg').html('');
                    if(response.status == 1){
                        $('#formOrder')[0].reset(); //FORM TO RESET AFTER SUBMISSION
                        $('.statusMsg').html('<p class="alert alert-success">'+response.message+'</p>');
                        alert('received');
                        $('.orderImagePreview').empty();
                        document.getElementById('#orderImage').value= null; //TO MAKE THE IMAGE LABEL EMPTY
                    }else{
                        $('.statusMsg').html(alert(response.message));
                    }
                    $('#formOrder').css("opacity","");
                    $(".submit").removeAttr("disabled");
                }
            });
        });
    });
});

// Multiple images preview in browser
$(function() {
    var imagesPreview = function(input, placeToInsertImagePreview) {
        if (input.files) {
            var filesAmount = input.files.length;
            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();
                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }
                reader.readAsDataURL(input.files[i]);
            }
        }
    };

    $('#orderImage').on('change', function() {
        imagesPreview(this, 'div.orderImagePreview');
        $( 'div.orderImagePreview' ).empty();
    });
});

$('#orderImage').on("change", function(){
    var input = document.getElementById ("imageLabel");
    var imageCount = $(this)[0].files.length;
    if(imageCount > 0){
        input.placeholder = imageCount+" Image Attached";
    }else{
        input.placeholder = "Select Order Image";
    }
});

我在哪里犯错误？调试应该是用文件重置表单还是表单提交的方法？提前谢谢。

Answer 1

$(“#_add”).click(函数(){$(“#formOrder”).on(提交)，函数(E){

只需在文档加载时创建提交处理程序即可。

点击按钮时不要添加它。