Почему при вызове формы для загрузки файлов не успеваю выбрать файл и страница перезагружается?

Question

[ligisayan]

Всем привет! Есть задача стилизовать форму для загрузки файлов input[type=file]. Нашел изящное решение, которое привожу в коде. На html страничках все работает замечательно, но когда переношу на сайт (инпут с кнопкой обзор) возникает такой баг: при клике на кнопку всплывает системное меню, но не успеваешь даже выбрать файл или отводишь мышь от меню и страница внезапно перезагружается и пишет, что обновление. Как можно это исправить? логин/пароль: demo

<p>
  <input type="file" name="upload" id="upload_hidden" style="position: absolute; display: block; overflow: hidden; width: 0; height: 0; border: 0; padding: 0;" onchange="document.getElementById('upload_visible').value = this.value;" />
  <input type="text" readonly="1" id="upload_visible" onclick="document.getElementById('upload_hidden').click();" />
  <button onclick="document.getElementById('upload_hidden').click();">Обзор</button>
</p>

Answer 1

[Алексей Уколов]

Нужно поставить кнопке type="button". В том браузере, в котором вы тестируете, дефолтный type - submit, а действие по умолчанию вы в обработчике не отменяете, вот форма и отправляется.