Javascript прерывает загрузку файла в html форме

Question

У меня есть форма загрузки файла, которая проверяет расширение загруженного файла, она работает нормально, пока я не добавлю javascript, который показывает сообщение «ЗАГРУЗКА ....», которое всегда приводит к появлению ошибки неправильного расширения. , даже если это разрешенная форма.

. html

<form id="loader" action="uploadfile.php" method="post" enctype="multipart/form-data" onsubmit="return loading();" />
<label>Upload file:</label>
<input type="file" name="file" id="file" />
<input name="upload" type="submit" />
<input name="action" type="hidden" value="upload" />
</form>
<script>
  function loading() {
    document.getElementById("loader").innerHTML = "<div style='color: red;'>LOADING....</div>";
  }
</script>

uploadfile. php

<?php
$allowedExts = array("txt", "TXT");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if (in_array($extension, $allowedExts))
  {
  if ($_FILES["file"]["error"] > 0)
    {echo $_FILES["file"]["error"]; }
  else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upfiles/thefile.txt");
?>

Answer 1

Благодаря ответу @ Teemu, я смог достичь ожидаемого поведения, я просто переместил id из элемента form в div, и это было сделано, вот новый код:

<form action="uploadfile.php" method="post" enctype="multipart/form-data" onsubmit="return loading();" />
<label>Upload file:</label>
<input type="file" name="file" id="file" />
<input name="upload" type="submit" />
<input name="action" type="hidden" value="upload" />
<div id="loader"></div></form>
<script>
  function loading() {
    document.getElementById("loader").innerHTML = "<div style='color: red;'>LOADING....</div>";
  }
</script>