How can i get my function to send data to firestore after user creation?

Question

I ended up changing my code and found a function that worked, but when I add it to my createuserwithemailandpassword function nothing happens. I see a error or something happening in the console, but it goes away too quickly for me to see what the issue is. How can i find out what the problem is and resolve it? Thanks!

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Initialize variables
const auth = firebase.auth();
const db = firebase.firestore();

const element = document.querySelector('form');
element.addEventListener('submit', event => {
  event.preventDefault();


  // renamed from newStudio
  // don't use alert - it blocks the thread
  console.log("debug: retrieving data... please wait");

  // Get data
  const studioName = document.getElementById("studioName").value,
    email = document.getElementById("email").value,
    password = document.getElementById("password").value,
    firstName = document.getElementById("firstName").value,
    lastName = document.getElementById("lastName").value,
    phoneNumber = document.getElementById("phoneNumber").value;

  console.log({ studioName, firstName, email }); // note added braces here

  // Validate input fields
  if (!validate_email(email) || !validate_password(password)) {
    // TODO: replace this alert with updating the form with an error message
    alert("Error with email or password");
    return false; // cancel submission
  }

  if (
    !validate_field(firstName) ||
    !validate_field(lastName) ||
    !validate_field(phoneNumber) ||
    !validate_field(studioName)
  ) {
    // TODO: replace this alert with updating the form with an error message
    alert("One or More Extra Fields is Outta Line!!");
    return false; // cancel submission
  }
 
  console.log("Info grab successful")

  auth
    .createUserWithEmailAndPassword(email, password)
    .then((credential) => {

      db.collection("users")
        .doc(credential.user.uid)
        .collection("studiopick/studios/users")
        .add({
          studioName: studioName,
          firstName: firstName,
          lastName: lastName,
          email: email,
          phoneNumber: phoneNumber,
          uid: user.uid,
        });
    })

    const uid = firebase.auth().currentUser;

  // once the above tasks succeed, navigate to the dashboard.
  window.location.href = "studiodash.html?id=" + uid;


  return false;

});




// Validate Functions
function validate_email(email) {
  expression = /^[^@]+@\w+(\.\w+)+\w$/;
  if (expression.test(email) == true) {
    // Email is good
    return true;
  } else {
    // Email is not good
    return false;
  }
}

function validate_password(password) {
  // Firebase only accepts lengths greater than 6
  if (password < 6) {
    return false;
  } else {
    return true;
  }
}

function validate_field(field) {
  if (field == null) {
    return false;
  }

  if (field.length <= 0) {
    return false;
  } else {
    return true;
  }
}

body{
    background-color: #E5E5E5 !important;
}
.navbar-light {
    background-color: transparent;
}
.navbar-nav{
    justify-content: space-between;
}
.navbar-brand {
    font-size: 35px;
}
.nav-item{
    color: #686868 !important;
    font-size: 20px;
    padding-right: 15px;
}
.nav-item2{
    background-color: #9370DB !important;
    border-radius: 15px !important;
    width: 95px !important;
    text-align: center !important;
    font-size: 20px;
    color: #ffffff;
}
#alert{
    position: relative;
    right: -3px !important;
}
.currentuser{
    position: relative;
    top: 120px !important;
    left: -80px;
    margin-bottom: 10px;
    border: 0;
    background-color: transparent;
    font-size: 10pt;
}
.socials{
    text-align: center !important;
    margin-top: 35px;
    top: 45px !important;
}

.card-dark{
    background-color: #E5E5E5;
    
}

/*---Buttons---*/
#firstName{
    border-color: #000000;
}
#lastName{
    border-color: #000000;
}
#email{
    border-color: #000000;
}
#phoneNumber{
    border-color: #000000;
}
#fullName{
    border-color: #000000;
}
#password{
    border-color: #000000;
}
#studioName{
    border-color: #000000;
}
#subbtn{
    position: relative;
    right: -110px;
    background-color: #9370DB;
}

<!DOCTYPE html>
<html>

<head>
    <!---Required meta tags--->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="CSS/studiosignup.css">
    <script>"https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"</script>
    <!---Required meta tags--->

    <!---Like Button JavaScript--->
    <script src="https://kit.fontawesome.com/f6dcf461c1.js" crossorigin="anonymous"></script>
    <!---Like Button JavaScript--->

    <!---Bootstrap CSS--->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <!---Bootstrap CSS--->

    <title>StudioPick</title>

</head>

<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container-fluid">
                <a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="signupprofileselect.html">Sign Up</a>
                        </li>
                        <li class="nav-item2">
                            <a class="nav-link" href="login.html">Login</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <form class="container py-5 h-100" id="contactForm">
        <div class="row d-flex justify-content-center align-items-center h-100">
            <div class="col-12 col-md-8 col-lg-6 col-xl-5">
                <div class="card-dark text-white" style="border-radius: 1rem;">
                    <div class="card-body p-5 text-center" id="signUp">
                        <div class="mb-md-5 mt-md-4 pb-5">
                            <h2 class="text-black fw-bold mb-2 text-uppercase">Sign Up</h2>
                            <p class="text-black mb-5">Please enter your email and password!</p>

                            <div class="text-black form-outline form-white mb-4">
                                <label class="form-label" for="firstName">First Name*</label>
                                <input type="text" id="firstName" class="form-control form-control-lg">
                            </div>
                            <div class="text-black form-outline form-white mb-4">
                                <label class="form-label" for="lastName">Last Name*</label>
                                <input type="text" id="lastName" class="form-control form-control-lg">
                            </div>
                            <div class="text-black form-outline form-white mb-4">
                                <label class="form-label" for="email">Email*</label>
                                <input type="email" id="email" class="form-control form-control-lg">
                            </div>
                            <div class="text-black form-outline form-white mb-4">
                                <label class="form-label" for="phoneNumber">Phone Number*</label>
                                <input type="text" id="phoneNumber" class="form-control form-control-lg">
                            </div>
                            <div class="text-black form-outline form-white mb-4">
                                <label class="form-label" for="userName">Studio Name*</label>
                                <input type="text" id="studioName" class="form-control form-control-lg">
                            </div>
                            <div class="text-black form-outline form-white mb-4">
                                <label class="form-label" for="password">Enter a Password*</label>
                                <input type="password" id="password" class="form-control form-control-lg">
                            </div>

                            <button class="text-black btn px-5" id="subbtn" type="submit"><strong>Sign Up</strong></button>
                            <button id="reg-btn" class="currentuser">Already Have An Account? Sign In</button>
                            <div class="socials">
                                <a href="#!" class="text-black"><i class="fab fa-facebook-f fa-lg"></i></a>
                                <a href="#!" class="text-black"><i class="fab fa-twitter fa-lg mx-4 px-2"></i></a>
                                <a href="#!" class="text-black"><i class="fab fa-google fa-lg"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <form onsubmit="handleNewStudioFormSubmit(event)">
        <div class="row d-flex justify-content-center align-items-center h-100">
            <div class="col-12 col-md-8 col-lg-6 col-xl-5">
                <div class="card-dark text-white" style="border-radius: 1rem;">
                    <div class="card-body p-5 text-center" id="signUp">
                        <div class="mb-md-5 mt-md-4 pb-5">
                            <h2 class="text-black fw-bold mb-2 text-uppercase">Sign Up</h2>
                            <p class="text-black mb-5">Please enter your email and password!</p>

                            <div class="text-black form-outline form-white mb-4">
                                <label class="form-label" for="firstName">First Name*</label>
                                <input type="text" id="firstName" class="form-control form-control-lg">
                            </div>
                            <div class="text-black form-outline form-white mb-4">
                                <label class="form-label" for="lastName">Last Name*</label>
                                <input type="text" id="lastName" class="form-control form-control-lg">
                            </div>
                            <div class="text-black form-outline form-white mb-4">
                                <label class="form-label" for="email">Email*</label>
                                <input type="email" id="email" class="form-control form-control-lg">
                            </div>
                            <div class="text-black form-outline form-white mb-4">
                                <label class="form-label" for="phoneNumber">Phone Number*</label>
                                <input type="text" id="phoneNumber" class="form-control form-control-lg">
                            </div>
                            <div class="text-black form-outline form-white mb-4">
                                <label class="form-label" for="userName">Studio Name*</label>
                                <input type="text" id="studioName" class="form-control form-control-lg">
                            </div>
                            <div class="text-black form-outline form-white mb-4">
                                <label class="form-label" for="password">Enter a Password*</label>
                                <input type="password" id="password" class="form-control form-control-lg">
                            </div>

                            <button class="text-black btn px-5" id="subbtn" type="submit"><strong>Sign Up</strong></button>
                            <button id="reg-btn" class="currentuser">Already Have An Account? Sign In</button>
                            <div class="socials">
                                <a href="#!" class="text-black"><i class="fab fa-facebook-f fa-lg"></i></a>
                                <a href="#!" class="text-black"><i class="fab fa-twitter fa-lg mx-4 px-2"></i></a>
                                <a href="#!" class="text-black"><i class="fab fa-google fa-lg"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <footer class="my-5 pt-5 text-muted text-center text-small">
        <p class="mb-1">© 2022 StudioPick.</p>
        <ul class="list-inline">
            <li class="list-inline-item"><a href="#">Privacy</a></li>
            <li class="list-inline-item"><a href="#">Terms</a></li>
            <li class="list-inline-item"><a href="#">Support</a></li>
        </ul>
    </footer>
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>

    <!-- TODO: Add SDKs for Firebase products that you want to use
        https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-firestore.js"></script>

    <!-- Our script must be loaded after firebase references -->
    <script src="Javascript/studiosignup.js"></script>

    <!----More Bootstrap--->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
        crossorigin="anonymous"></script>
    <!----More Bootstrap--->
</body>

</html>

score 0 · Accepted Answer · answered Oct 18 '22 at 13:38

0

It seems like your return false to prevent default redirect behavior is not enough. Does it help if you run handleNewStudioFormSubmit function as an actual <form> submit action, with the event passed in, to run preventDefault on the event?

How can i get my function to send data to firestore after user creation?

1 Answers1