I am using JSON to parse data to a PHP code snippet that is to be processed. However, despite using event.preventDefault() within my js function (so as to not remain on the same page and instead move on to the next one), it does not process the data or at least give me any errors, instead remaining on the same page without doing anything.
In the chrome console, I can see that an array has been parsed and that the json value is not null. However, I am still unable to parse the data through to the server.
I don't think there is an error in my php syntax as I have checked that out. So it doesn't appear to be that.
I have tried removing the event.preventDefault(), which as expected, kept me on the same page.
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);
I expect to at least encounter some errors or have my data be processed and sent to the following page.
Edit: html form
<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>
have you tried moving event.preventDefault(); as the first line in your function definition.