Question

请帮忙。仍在学习大量的 JQuery。我正在尝试使用 JQuery 编辑现有订单，但它不起作用。似乎它没有发送任何数据。有趣的部分是相同的语法在添加订单数据时工作正常。但如果我想发布编辑过的数据，它不起作用
如果我使用 .click 即使我得到一个错误：dashboard.php:355 Uncaught TypeError: Failed to build 'FormData': parameter 1 is not type 'HTMLFormElement'。在 HTMLInputElement。 (dashboard.php:355) 在 HTMLInputElement.dispatch (jquery-3.5.1.js:5429) 在 HTMLInputElement.elemData.handle (jquery-3.5.1.js:5233) 如果我使用 .submit 事件，则什么也不会发生，页面会刷新。下面的代码用于订单编辑的 HTML

    // Add New Order Ajax Request
    $("#add-order-form").submit(function(event) {
        if($("#add-order-form")[0].checkValidity()){
            event.preventDefault();
            $("#addOrderBtn").val('Please Wait...');
            $.ajax({
                url: 'assets/php/process.php',
                method: 'post',
                processData: false,
                contentType: false,
                cache: false,
                data: new FormData(this),
                success:function(response){
                    $("#addOrderBtn").val('Place  Order');
                    $("#add-order-form")[0].reset();
                    $("#addOrderModal").modal('hide');
                    Swal.fire({
                        title: ' Order successful! Now Validating Payment',
                        type: 'success'
                    });
                    displayAllOrders();
                }
            });
        }
    });

以上代码运行正常。没有问题没有错误。而是发送 Ajax Request for Order Update。不工作。代码如下。 HTML

     <!-- Edit Order Modal Start --------------------  -->
<div class="modal fade " id="editOrdersModal" >
<div class="modal-dialog modal-dialog-centered my-auto">
<div class="modal-content">
    <div class="modal-header bg-info">
        <h5 class="modal-title text-light">Edit Your Order</h5>
        <button type="button" class="close text-light" data-dismiss="modal">&times;</button>
    </div>
    <div class="modal-body ">
        <form action="#" method="post" id="edit-order-form" class="px3" enctype="multipart/form-data">
            <input type="hidden" name="ordersId" id="ordersId" >
            <div class="form-group">
                <select id="editSelectionType" class="custom-select custom-select-lg form-control form-control-lg" name="editSelectionType" onchange="restrictValue"  >
                    <option selected="true" disabled="disabled" value="">Please Select New Plan</option>
                    <option value="Windscreen" >Front Windshield</option>
                    <option value="Rearscreen">Rear/ Tailgate Glass</option>
                    <option value="Sideglass">Side Panel Grasses</option>
                    <option value="Mirror">Mirror</option>
                </select>
            </div>
            <div class="form-group">
                <input  type="number" name="editOrderQty" id="editOrdeQty" class="form-control form-control-lg" placeholder="Enter New Quantity" min="1"  >
            </div>
            <div class="form-group"><label class=" text-primary my-1">Select Delivery Date</label>
            <input id="editOrderDay" type="date" name="editOrderDay" class="form-control form-control-lg"  >
        </div>
        <div class="form-group"><label class=" text-primary my-1">Attach Updated Screenshot</label>
        <input type="file" name="editOrderImg" id="editing" class="form-control-file border" >
    </div>
    <div class="form-group">
        <input type="submit" name="editOrder" id="editOrderBtn" value="Update Investment Order" class="btn btn-success btn-block btn-lg">
    </div>
</form>
</div>
</div>
</div>
</div>

用于编辑订单的 AJAx 代码

//==========Edit - Update Order ===============================
    $("#editOrderBtn").submit(function(event) {
        if($("#edit-order-form")[0].checkValidity()){
            event.preventDefault();
            $.ajax({
                url: 'assets/php/handleupdate.php',
                method: 'post',
                processData: false,
                contentType: false,
                cache: false,
                data: new FormData(this),
                success:function(response){
                    console.log(response);
                    $("#edit-order-form")[0].reset();
                    $("#editOrdersModal").modal('hide');
                    Swal.fire({
                        title: 'Order update successful',
                        type: 'success'
                    });
                    displayAllOrders();
                }
            });
        }
    });

代码不起作用。空白 Console.log，页面已刷新。使用 .click 会引发错误

Ajax 请求未发布数据图像上传提交事件

0 个答案: