I need a file upload button that does not look like the default "select file"-button.
Therefor I have a styled <button>
and a hidden input[type="file"]
It appears however, that everytime I click on the <button>
the parent <form>
gets submitted and I do not understand why. There is no javascript triggering the form to submit. It submits while the filepicker-dialog is open so the POST
request has no file sent at all.
I want it to submit the form but only after I selected a file (file-input has changed)
<form action="/upload.php" method="post" name="ta_file_upload" enctype="multipart/form-data">
<input type="file" id="tableUpload1" name="files[]" style="visibility:hidden;" onchange="alert();" /> <!-- no alert is fired! -->
<button class="btn btn-dark table-button table-button-upload" onclick="document.getElementById('tableUpload1').click()" title="Upload">UploadButton</button>
</form>
The alert();
is for testing purposes - it does not get triggered: no alert.
The error is not related to a specific browser (tested in chrome + firefox)