getting undefined data on page load

Question

I made a form , here I am trying to get all datails of form to the profile page

Here's form code:

`

    <script type="module">

        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js";
        import { getDatabase, set, ref, get, child } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-database.js";
        const firebaseConfig = {
            
        };

        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
        const db = getDatabase();

        const SelectRole = document.getElementById('selectRole');
        const facebook = document.getElementById('furl');
        const twitter = document.getElementById('turl');
        const insta = document.getElementById('instaurl');
        const linkdin = document.getElementById('lurl');
        const submit = document.getElementById('sub_btn');
        const username = document.getElementById('uname');

        function InsertData() {
            set(ref(db, "TheUsers/" + username.value), {
                Username: username.value,
                //  Password : password.value,
                Role: SelectRole.value,
                FacebookURL: facebook.value,
                TwitterURL: twitter.value,
                InstagramURL: insta.value,
                LinkedinURL: linkdin.value,
                

            })
                .then(() => {
                    alert("Data stored successfully");
                    window.location = "profile.html";
                })
                .catch((error) => {
                    alert("unsuccessful,error" + error);
                });
        }
        //------------------------------------------------------ASSIGN EVENT TO BTN------------------------------------//
        submit.addEventListener('click', InsertData);
    </script>

\` 

After filling the form page... page redirect to the profile page and should have shows all datails ......but heres at profile page all fields shows undefine.

Here's profile page code:

`

   <script type="module">

      import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js";
      import { getDatabase, set, ref, get, child } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-database.js";
      const firebaseConfig = {
       ....
      };

      // Initialize Firebase
      const app = initializeApp(firebaseConfig);
      const db = getDatabase();

      const SelectRole = document.getElementById('selectRole');
      const facebook = document.getElementById('furl');
      const twitter = document.getElementById('turl');
      const insta = document.getElementById('instaurl');
      const linkdin = document.getElementById('lurl');
      const submit = document.getElementById('sub_btn');
      const username = document.getElementById('uname');

      function selectdata() {
         const dbref = ref(db);

         get(child(dbref, "TheUsers/" + username.value)).then((snapshot) => {
            if (snapshot.exists()) {
               username.value = snapshot.val().Username;
               SelectRole.value = snapshot.val().Role;
               facebook.value = snapshot.val().FacebookURL;
               twitter.value = snapshot.val().TwitterURL;
               insta.value = snapshot.val().InstagramURL;
               linkdin.value = snapshot.val().LinkedinURL;


            }
            else {
               alert("No data Found")
            }
         })
            .catch((error) => {
               alert("error" + error);
            })
      }

      // submit.addEventListener('click',selectdata);
      window.onload = selectdata;


   </script>

`

Thanks for any help.