Displaying An Element After The Last Instance Of A Javascript Fetch() Method

Question

I have some images that are fetched from a MySQL table after initial upload, where details are then added (title, tags etc.) The backend/sanitisation/security etc is handled with PHP and on the frontend the form submission is done with JavaScript fetch() method (so the page doesn't refresh each time an image's details are added). When an image submission has been completed the form instance relating to that particular image is removed with the .remove() javascript method (as you can see in the code below).

This all works fine.

I would like it so when the final image details have been submitted, a link to return to the main the upload page is shown. It's styled like a button and says 'Upload More Images'.

I'm using a simple if/else statement that works on pageload but after the final details have been submitted via the JS fetch() and the last form removed, it doesn't change the display property that I'm setting in the JavaScript?

Any help would be wonderful.

JavaScript

// select all instances of the form for the forEach loop
var form = document.querySelectorAll('.image-upload-details-form');

// upload more images link
var uploadMoreImages = document.querySelector('#upload-images-link')

form.forEach(item => {
    
    item.addEventListener("submit", function (evt) {
    
        evt.preventDefault();

        const formData = new FormData(this);

        fetch("upload-details.php", {
            method: 'post',
            body: formData
        }).then(function(response){
            return response.text()
        }).then(function(text){
            console.log(text)
        }).catch(function (error){
            console.error(error)
        })
        
        // remove a form instance after its details have been submitted to the database
        item.remove();

        // (** THIS BIT ISN'T WORKING **) show or hide 'upload more images' link after final form instance is submitted
        if (item.length === 0) {
            uploadMoreImages.style.display = 'inline-block'
        }

    })

})

// show or hide 'upload more images' link on pageload
if (form.length === 0) {
    uploadMoreImages.style.display = 'inline-block'
} else {
    uploadMoreImages.style.display = 'none'
}

HTML

// form element for each image sits here. Each one is processed with PHP and JavaScript fetch() method.

// Element below is hidden by default, but needs to show after last form elment is submitted to the database with the JavaScript show above

<a id="upload-images-link" href="upload.php">UPLOAD MORE IMAGES</a>

Your code is not waiting for calls to finish. Easiest way? Use `await` and `for of` instead of `forEach` and `then`. You probably want to call them in parallel though, so you should look into `Promise.all` But your core problem will be understood when you realize that the line `item.remove` gets run after your console.logs in the then handlers. — Ruan Mendes, Aug 16 '21 at 18:51
Absolutely mindboggling they've marked that as a duplicate when the structure of the problem is different (albeit similar) and thus not allowed people to answer in the context of the question given above. — pjk_ok, Aug 16 '21 at 19:09
There are already 100s of similar questions. Were you not able to figure out your problem from my suggestion and the linked answer? — Ruan Mendes, Aug 16 '21 at 20:38

Displaying An Element After The Last Instance Of A Javascript Fetch() Method

0 Answers0