每次单击按钮时都在提交表单

Posted 2023-05-08

【中文标题】每次单击按钮时都在提交表单

【英文标题】：Form is being Submitted every time The button is clicked

【发布时间】：2021-08-27 05:43:35

【问题描述】：

我有一个表单，其中保存了 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";
    
);

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

【问题讨论】：

可以去掉 type="submit" 再检查一下吗？

@Mangesh — 所以它变成了一个文本字段？

是的，使用按钮 HTML 元素。否则您也可以为输入点击添加 $("#_add").click(function(event)event.preventDefault() 。您为表单提交添加的相同

@Mangeshso 类型变成按钮？

添加

【参考方案1】：

$("#_add").click(function()        
    $("#formOrder").on('submit', function(e)

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

点击按钮时不要添加。

【讨论】：

注释与提供的示例相同。你想让我删除按钮点击功能吗？

@RoshanZaid — 从您的代码中引用的材料是您的代码，用于向您展示问题所在。它根本没有被编辑。是的，删除第一行和函数的匹配端。

是的，你是最棒的。现在每次我点击它时我都应该错误处理它的空值。谢谢。