Delete a Single HTML Component Inside A Form With JavaScript Fetch() When Multiple Components Exist-CodePudding

The

HTML

<form method="post" enctype="multipart/form-data"> <div >  <?php $user_id = $db_id; // database id imported from header.php $stmt = $connection->prepare("SELECT * FROM lj_imageposts WHERE user_id = :user_id"); $stmt->execute([ ':user_id' => $user_id ]); while ($row = $stmt->fetch()) { $db_image_id = htmlspecialchars($row['image_id']); ?> <div > <img src="image.jpg" /> <div > <input id="title-id-<?php echo $db_image_id; ?>" value="Image Title" type="text" name="image-title[]" placeholder="Image Title" /> </div> <div >  <button name="upload-details-delete" value="<?php echo $db_image_id; ?>" style="background: #cc1f1f;" >DELETE</button> <input type="hidden" name="image-id[]" value="<?php echo $db_image_id; ?>" /> </div> </div> <?php } ?> </div>  <div > <button id="upload-submit" type="submit" name="upload-submit">COMPLETE UPLOADS</button> </div> </form>

JAVASCRIPT

// ---- FETCH var forms = document.querySelectorAll(".upload-form-js"), // image component uploadDetailsComponent = document.querySelectorAll(".upload-details-component"), // delete button deleteButton = document.querySelectorAll(".remove-image"); // URL details var myURL = new URL(window.location.href), pagePath = myURL.pathname; if (uploadDetailsComponent) { uploadDetailsComponent.forEach((item) => { deleteButton.forEach((button) => { button.addEventListener("click", (e) => (item._button = button)); //store this button in the form element }); item.addEventListener("submit", function (evt, btn) { evt.preventDefault(); var formData = new FormData(this); if (this._button) { // submitted by a button? formData.set(this._button.name, this._button.value); // delete this._button; //this only needed if form can be submitted without submit button (aka submitted by javascript) } fetch(pagePath, { method: "post", body: formData, }) .then(function (response) { return response.text(); // }).then(function(data){ // console.log(data); }) .catch(function (error) { console.error(error); }); item.remove(); // removes component from HTML }); }); } // end of if (upload-details-component)

CodePudding user response：

So what you can do is pass the 'event' object, or 'e', when a user submits the form. You can then use e.preventDefault() to stop the form from doing it's default behaviour of submitting the form and then refreshing the page It's a very common thing to do in React with from submissions

What you can then do is have a function run in the background that does the fetch function that makes the HTTP DELETE request. On the frontend, you can then delete the HTML node that contains the image you want to delete.

Just make sure you wait for the response of your fetch, using asycn/await, to determine if you should delete the HTML node from the DOM

Instead of doing this:

fetch(pagePath, { method: "post", body: formData, }) .then(function (response) { return response.text(); // }).then(function(data){ // console.log(data); }) .catch(function (error) { console.error(error); });

Rather do it so:

const fetchData = async () => { try { const res = await fetch(pagePath, { method: "post", body: formData, }) if(res.status === 200) { console.log(res.data) } } catch(err) { console.error(err) } }

CodePudding user response：

I made an event listener on the form. If one of the "delete image" buttons are clicked, I call the deleteImage() function with the id. In any other case (clicking on the submit button) the form will do an old school POST request.

The deleteImage() function will do a fetch request. Here I use a fake data URL to make the example run here on ST. The URL should of course be your real URL endpoint for deleting. In the call back function (the last then()) I find the component with the right id and delete the component from the UI.

const form = document.querySelector('form'); const deleteImage = id => { let deleteReq = new Request(`data:application/json,{"delete":${id},"status":"ok"}`, { method: 'POST', body: `{"delete":${id} }` }); fetch(deleteReq) .then(res => res.json()) .then(json => { if (json.status == 'ok') { // get the image component first by getting the button // and then using closest() to get the div element let deleteBtn = document.querySelector(`button.remove-image[value="${json.delete}"]`); let uploadComponent = deleteBtn.closest('div.upload-details-component'); // remove the component by setting innerHTML empty uploadComponent.innerHTML = ''; } }); }; form.addEventListener('submit', e => { // that button was clicked let button = e.submitter; // there could be more buttons in this form // switch by the name of the button switch (button.name) { case 'upload-details-delete': // stop the form from submitting e.preventDefault(); // call deleteImage with value from the button deleteImage(button.value); break; } // in any other situation continue the submit event e.preventDefault(); // for testing ONLY! this line should be removed in production });

<form method="post" enctype="multipart/form-data"> <div >  <div > <img src="image.jpg" alt="Image 1" /> <div > <input id="title-id-1" value="Image Title" type="text" name="image-title[]" placeholder="Image Title" /> </div> <div >  <button name="upload-details-delete" value="1" style="background: #cc1f1f;" >DELETE</button> <input type="hidden" name="image-id[]" value="1" /> </div> </div> <div > <img src="image.jpg" alt="Image 2" /> <div > <input id="title-id-2" value="Image Title" type="text" name="image-title[]" placeholder="Image Title" /> </div> <div >  <button name="upload-details-delete" value="2" style="background: #cc1f1f;" >DELETE</button> <input type="hidden" name="image-id[]" value="2" /> </div> </div> </div>  <div > <button id="upload-submit" type="submit" name="upload-submit">COMPLETE UPLOADS</button> </div> </form>