How to change text inside with the file name of

Question

I am trying to change the text inside the <label> tags with the chosen file's name from <input type="file" />

I have tried this, but it doesn't work:

<!DOCTYPE html>
<html>    
  <head>
    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      $('#files').on("change",function() {
        console.log("change fired");
        var i = $(this).prev('label').clone();
        var file = $('#files')[0].files[0].name;
        console.log(file);
        $(this).prev('label').text(file);        
      });
    </script>
  </head>
  <body>
    <div class="upload_firmware_container">
      Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>              
      <!-- action="/doUpdate" -->
      <form method="POST" enctype="multipart/form-data">
        <label class="file_input_label" for="files">Browse files</label>
        <input id="files" type="file" name="update">
        <input class="upload_button" type="submit" name="getUpdate" value="Update">
      </form>
    </div>
  </body>
</html>

As you can see I have 2 script sources. The first one is local, and it worked with all my little scripts. I have added the second one because I have found it in the example I got inspired from.

What do you think? jQuery is welcomed.

Resolve:

It did not work because the script has to be after the element in question. Moving the script at the end of the HTML page solved everything.

well it does not work because the script runs BEFORE the element is on the page.... You can not find an element before it exists. — epascarello, Jul 09 '19 at 12:38
Whenever you are targeting a DOM element, make sure the DOM is available when it is targeted or use `window.onload` and write your code inside that event. — Krishna Prashatt, Jul 09 '19 at 12:42
You are very right, indeed ! It works ! Great ! Thank you all ! — bleah1, Jul 09 '19 at 12:48
As a rule of thumb, can I move all of my other scripts at the end of the page even if they do or do not target DOM elements ? And will they work the same ? — bleah1, Jul 09 '19 at 12:53
Scripts should run after the DOM has loaded (most of the time). But better than sticking them at the end of the html file, they should be externalized into their own `.js` file and then call that file right before the closing `
` tag. Also remember that if you have multiple `.js` files, order matters when calling them in the html file. — Sergio, Jul 09 '19 at 13:46

score 1 · Accepted Answer · answered Jul 09 '19 at 14:33

The reason is because html loads top to bottom and your code runs the scripts before any elements are loaded on the page.

One solution:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="upload_firmware_container">
  Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>
  <!-- action="/doUpdate" -->
  <form method="POST" enctype="multipart/form-data">
    <label class="file_input_label" for="files">Browse files</label>
    <input id="files" type="file" name="update">
    <input class="upload_button" type="submit" name="getUpdate" value="Update">
  </form>
</div>
</body>
<script>
  $('#files').on("change",function() {
    console.log("change fired");
    var i = $(this).prev('label').clone();
    var file = $('#files')[0].files[0].name;
    console.log(file);
    $(this).prev('label').text(file);
  });
</script>
</html>

Reference this post for more solutions: stackoverflow.com

How to change text inside with the file name of

Resolve:

1 Answers1