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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!---Bootstrap CSS--->
<title>StudioPick</title>
</head>
<body>
<header>
<nav >
<div >
<a style="font-size: 45px; color: #A388E7;" href="#"><strong>StudioPick</a>
<button type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarSupportedContent">
<ul >
<li >
<a aria-curresnt="page" href="index.html">Home</a>
</li>
<li >
<a href="signupprofileselect.html">Sign Up</a>
</li>
<li >
<a href="login.html">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<form id="contactForm">
<div >
<div >
<div style="border-radius: 1rem;">
<div id="signUp">
<div >
<h2 >Sign Up</h2>
<p >Please enter your email and password!</p>
<div >
<label for="firstName">First Name*</label>
<input type="text" id="firstName" >
</div>
<div >
<label for="lastName">Last Name*</label>
<input type="text" id="lastName" >
</div>
<div >
<label for="email">Email*</label>
<input type="email" id="email" >
</div>
<div >
<label for="phoneNumber">Phone Number*</label>
<input type="text" id="phoneNumber" >
</div>
<div >
<label for="userName">Studio Name*</label>
<input type="text" id="studioName" >
</div>
<div >
<label for="password">Enter a Password*</label>
<input type="password" id="password" >
</div>
<button id="subbtn" type="submit"><strong>Sign Up</strong></button>
<button id="reg-btn" >Already Have An Account? Sign In</button>
<div >
<a href="#!" ><i ></i></a>
<a href="#!" ><i ></i></a>
<a href="#!" ><i ></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<form onsubmit="handleNewStudioFormSubmit(event)">
<div >
<div >
<div style="border-radius: 1rem;">
<div id="signUp">
<div >
<h2 >Sign Up</h2>
<p >Please enter your email and password!</p>
<div >
<label for="firstName">First Name*</label>
<input type="text" id="firstName" >
</div>
<div >
<label for="lastName">Last Name*</label>
<input type="text" id="lastName" >
</div>
<div >
<label for="email">Email*</label>
<input type="email" id="email" >
</div>
<div >
<label for="phoneNumber">Phone Number*</label>
<input type="text" id="phoneNumber" >
</div>
<div >
<label for="userName">Studio Name*</label>
<input type="text" id="studioName" >
</div>
<div >
<label for="password">Enter a Password*</label>
<input type="password" id="password" >
</div>
<button id="subbtn" type="submit"><strong>Sign Up</strong></button>
<button id="reg-btn" >Already Have An Account? Sign In</button>
<div >
<a href="#!" ><i ></i></a>
<a href="#!" ><i ></i></a>
<a href="#!" ><i ></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<footer >
<p >© 2022 StudioPick.</p>
<ul >
<li ><a href="#">Privacy</a></li>
<li ><a href="#">Terms</a></li>
<li ><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/[email protected]/dist/umd/popper.min.js"
integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>CodePudding user response：
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?
For example:
function handleNewStudioFormSubmit(e) {
e.preventDefault(); // both this
alert(document.getElementById("name").value);
return false; // and this is required to prevent default
}<form onsubmit="handleNewStudioFormSubmit(event)">
<input id="name" type="text" />
<input type="submit" />
</form>