1

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)

Jonathan
  • 1,955
  • 5
  • 30
  • 50

0 Answers0