Question

我正在使用JSON将数据解析为要处理的PHP代码段。但是，尽管在我的js函数中使用了event.preventDefault（）（以便不保留在同一页面上，而是继续前进到下一页），但它不会处理数据或至少给我任何错误，而是保留在没有任何操作的同一页面。

在chrome控制台中，我可以看到已经解析了一个数组，并且json值不为null。但是，我仍然无法解析数据到服务器。

我认为我的php语法没有错误，因为我已经检查了一下。因此，事实并非如此。

我尝试删除event.preventDefault（），这与预期的一样，使我保持在同一页面上。

    function arrayData(event) {
        var xhttp = new XMLHttpRequest();
        xhttp.open("POST", "SetDeliveryDetailsPOST.php", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send(`json_arr=${json_arr}`);
        event.preventDefault();
    }

    // your form
    var form = document.getElementById("setDeliveryDataForm");

    // attach event listener
    form.addEventListener("submit", arrayData, true);

我希望至少会遇到一些错误，或者处理我的数据并将其发送到下一页。

编辑：html表单

                        <form method="POST" id="setDeliveryDataForm">


                            <div style="margin-top: 15px; margin-bottom: 25px;">

                                <div class="column_1">

                                    <div id="myDIV" class="listHeader">

                                        <h2 style="margin:5px">Add A Parcel Item To Your Delivery</h2>

                                        <div style="margin-top: 15px; margin-bottom: 25px;">

                                            <div class="column_4">                                        
                                                <h3 align="center">Parcel Dimensions in Centimetres (CM)</h3>
                                                    <input type="number" id="length" name="length" placeholder="Length (CM)...">
                                                    <input type="number" id="breadth" name="breadth" placeholder="Breadth (CM)...">
                                                    <input type="number" id="width" name="width" placeholder="Width (CM)...">
                                            </div>


                                            <div class="column_4">
                                                <h3 align="center">Quantity</h3>
                                                    <input type='number' id="quantity" name='quantity' min="1" placeholder="Quantity...">
                                            </div>


                                            <div class="column_4">
                                                <h3 align="center">Fragile</h3>
                                                    <label class='radioButtonContainer'>Yes
                                                        <input type="radio"  id="fragile" name="fragile" value="Yes">
                                                        <span class='checkmark'></span>
                                                    </label>
                                                    <label class='radioButtonContainer'>No
                                                        <input type="radio" id="fragile" name="fragile" value="No">
                                                        <span class='checkmark'></span>
                                                    </label>
                                            </div>


                                            <div class="column_4">
                                                <h3 align="center">Add Item</h3>
                                                <span onclick="newElement()" class="button">Add</span>
                                            </div>
                                        </div>


                                    </div>

                                    <ul id="myUL" class="myUL"></ul>

                                </div>
                            </div>

                            <div style="margin-top: 15px; margin-bottom: 25px;">
                                <div class="column_2">
                                    <label for="dateOfPickup">Date Of Pickup: </label>
                                    <input type="date" name="dateOfPickup" min="2000-01-02" required>

                                    <label for="collectingfrom">Name of Person/Business Collecting From:</label>
                                    <input type="text" name="collectingfromname" id="name" value="" style="margin-bottom: 4%;" required/>

                                    <label for="emailCollecting">Email address of Person/Business Delivering To:</label>
                                    <input type="text" name="emailCollecting"required>

                                    <label for="cellCollecting">Cellphone number of Person/Business Delivering To:</label>
                                    <input type="tel" name="cellCollecting" min="1" required>

                                </div>
                                <div class="column_2">
                                    <label for="timeOfPickup">Time Of Pickup: </label>
                                    <input type="time" name="timeOfPickup" required>

                                    <label for="deliveringTo">Name of Person/Business Delivering To:</label>
                                    <input type="text" name="deliveringToname" id="name" value="" style="margin-bottom: 4%;" required/>

                                    <div class="field">
                                        <label for="notes">Notes:</label>
                                        <textarea name="notes" id="message" rows="6"></textarea>
                                    </div>
                                </div>
                            </div>

                            <input type="submit" value="Next" name="add" id="add" class="button">
                        </form>

Answer 1

您是否尝试将event.preventDefault();作为函数定义的第一行。

如何修复preventDefault（）错误，而不导航到下一页？

1 个答案: