Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript

How To Change Label Text Upon File Being Selected Within Form Using Javascript

Post a Comment
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 m

Solution 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.

Solution 2:

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

<bodyonload="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>functionmyFunction(){
          var profilePic = document.getElementById('profilepic'); /* finds the input */functionchangeLabelText() {
            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>

Solution 3:

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><divclass="changepic-wrap"><formaction="changepicauth.php"method="post"><inputtype="file"name="profilepic"id="profilepic"class="inputfile"><br><labelfor="profilepic"><imgsrc="#" />
          Upload Picture...
        </label><br><divclass="button-wrap"><button>Change Picture</button></div></form></div><script>var profilePic = document.getElementById('profilepic'); /* finds the input */functionchangeLabelText() {
        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>

Post a Comment for "How To Change Label Text Upon File Being Selected Within Form Using Javascript"