How to Change Label Text upon File being Selected within Form using Javascript

Question

thank you for taking a look at my question.

I asked a question similar to this before hand at the link below. Unfortunately, the answer given works in the code snippet but not on my site. I created a blank HTML document and inserted the following code into it. The basics of what i'm trying to do is this. The file input tag will be hidden using CSS. I'm then using the label tag to take over control of the input tag. Once a file is selected i want the file name (not path) to be displayed within the label and also keep the image visible to the user as well. As previously stated in my last question I do NOT wish to use jQuery. Thanks in advance for taking a look at my code and helping out!

Heres my previous question: How do I change HTML Label Text Once File Has Been Selected using Javascript

Heres the code in my 'index2.php' file:

<html>
  <head>
    <script>
      var profilePic = document.getElementById('profilepic'); /* finds the input */

      function changeLabelText() {
        var profilePicValue = profilePic.value; /* gets the filepath and filename from the input */
        var fileNameStart = profilePicValue.lastIndexOf('\\'); /* finds the end of the filepath */
        profilePicValue = profilePicValue.substr(fileNameStart + 1); /* isolates the filename */
        var profilePicLabelText = document.querySelector('label[for="profilepic"]').childNodes[2]; /* finds the label text */
        if (profilePicValue !== '') {
            profilePicLabelText.textContent = profilePicValue; /* changes the label text */
        }
      }

      profilePic.addEventListener('change',changeLabelText,false); /* runs the function whenever the filename in the input is changed */
    </script>
  </head>
<body>
  <div class="changepic-wrap">
    <form action="changepicauth.php" method="post">
      <input type="file" name="profilepic" id="profilepic" class="inputfile">
      <br>
      <label for="profilepic">
        <img src="#" />
        Upload Picture...
      </label>
      <br>
      <div class="button-wrap">
        <button>Change Picture</button>
      </div>
    </form>
  </div>

</body>
</html>

Wrap your "Upload Picture" by <span>...</span> and change its innerHTML. — Alex Kudryashev
– Alex Kudryashev, Commented Aug 8, 2016 at 20:01
I don't want to use <span> tags. Thanks for the advice, but thats not what i'm trying to do. — J. Robinson
– J. Robinson, Commented Aug 8, 2016 at 20:02

Rounin · Accepted Answer · 2016-08-08 20:47:55Z

1

Place the <script>...</script> at the very end of the document, just before </body>.

That way, all of the DOM will already have loaded and you won't need to listen for an onload or an onDOMContentLoaded event.

answered Aug 8, 2016 at 20:47

Rounin

29.9k13 gold badges102 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

J. Robinson Over a year ago

There you go! I knew @Rounin would come around and solve the issue! Thanks buddy!

user3044394 · Accepted Answer · 2016-08-08 20:04:39Z

1

Looking back at your previous question and it's answer. I'm seeing that there is no check to see that the DOM has loaded. If you copied and pasted that code in the answer there is no way it should work on your website.

Try using one of these:

document.addEventListener('DOMContentLoaded', function() { myFunction(); });

or

window.onload = myFunction();

or

<body onload="myFunction()"> <!-- in the html -->

I recommend the first option. You would need to encaplsulate the code that was written for you inside of a function (like myFunction();) and then call it using one of those methods. Otherwise the code is trying to do stuff to the DOM which has not loaded yet.

to Elaborate: You need to put your code inside of the onload function - it doesn't matter what you name it.

<script>
    function myFunction(){
          var profilePic = document.getElementById('profilepic'); /* finds the input */

          function changeLabelText() {
            var profilePicValue = profilePic.value; /* gets the filepath and filename from the input */
            var fileNameStart = profilePicValue.lastIndexOf('\\'); /* finds the end of the filepath */
            profilePicValue = profilePicValue.substr(fileNameStart + 1); /* isolates the filename */
            var profilePicLabelText = document.querySelector('label[for="profilepic"]').childNodes[2]; /* finds the label text */
            if (profilePicValue !== '') {
                profilePicLabelText.textContent = profilePicValue; /* changes the label text */
            }
          }
          profilePic.addEventListener('change',changeLabelText,false); /* runs the function whenever the filename in the input is changed */
    }

window.onload = myFunction();
</script>

edited Aug 8, 2016 at 20:04

answered Aug 8, 2016 at 19:46

user3044394

1353 silver badges15 bronze badges

4 Comments

J. Robinson Over a year ago

I tried all of those different ways, except none of them work. Can you please make your answer more specific towards my question, using my changeLabelText() wording and not using generalized wording such as function(). Thanks.

J. Robinson Over a year ago

Still doesn't work, even after your edit. My new code can be found at this pastebin. pastebin.com/iibrgqkS

user3044394 Over a year ago

You have to put all of your code in the onload. You don't want to call that function. Try what I just posted

J. Robinson Over a year ago

New pastebin. Still doesn't work. I dont want to use a nested function anyways. I really want to make this simple, and not over complicate things. pastebin.com/1iu0zrs6

J. Robinson · Accepted Answer · 2016-08-08 20:59:28Z

I've finally with the help of other people over two questions come to the conclusion. Here is the FINAL code that does work on any browser. Thanks all for your help!

<html>
  <body>
    <div class="changepic-wrap">
      <form action="changepicauth.php" method="post">
        <input type="file" name="profilepic" id="profilepic" class="inputfile">
        <br>
        <label for="profilepic">
          <img src="#" />
          Upload Picture...
        </label>
        <br>
        <div class="button-wrap">
          <button>Change Picture</button>
        </div>
      </form>
    </div>

    <script>
      var profilePic = document.getElementById('profilepic'); /* finds the input */

      function changeLabelText() {
        var profilePicValue = profilePic.value; /* gets the filepath and filename from the input */
        var fileNameStart = profilePicValue.lastIndexOf('\\'); /* finds the end of the filepath */
        profilePicValue = profilePicValue.substr(fileNameStart + 1); /* isolates the filename */
        var profilePicLabelText = document.querySelector('label[for="profilepic"]').childNodes[2]; /* finds the label text */
        if (profilePicValue !== '') {
            profilePicLabelText.textContent = profilePicValue; /* changes the label text */
        }
      }


      profilePic.addEventListener('change',changeLabelText,false); /* runs the function whenever the filename in the input is changed */
    </script>
  </body>
</html>

Collectives™ on Stack Overflow

How to Change Label Text upon File being Selected within Form using Javascript

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related