Form Submitting on input change, but does not log onsubmit event. How to check if input submitted or not?

Question

I have a form that submits on input change. I have added an onsubmit event on form to log, if submit happens. But it does not log my submit.

Here is my code:

<label for="id_cover_picture">Upload Cover</label>
<form action="" method="get" id="change_cover_picture_form">
    <input type="file" name="cover_pic" id="id_cover_picture" style="display: none;">
</form>

Here is my JS code:

    <script>
        const change_cover_picture_form = document.getElementById('change_cover_picture_form');
        const form_cover_img = document.getElementById('id_cover_picture');

        form_cover_img.addEventListener('input', () => {
            console.log('input changed ...');
            // even if it reloads , there will be data on localStorage
            localStorage.setItem('input_change', 'input change ... cover image')
            change_cover_picture_form.submit();
        })

        change_cover_picture_form.onsubmit = () => {
            console.log('Form submitted ...');
            // even if it reloads , there will be data on localStorage
            localStorage.setItem('submit_cover', 'submitted ... cover image')
        }
    </script>

I am logging the input change and submitting the form, but not logging the submit...

Please correct me, how to confirm submit, and why the onsubmit is not working. I have even tried with, addEventListener('submit')

Expected Answer:

Log the submit, and perform some action if submit happens

Answer 1

There's no way to submit the form. Add a submit input to the form and then click that.