gpt4 book ai didi

JavaScript 注册功能

转载 作者:行者123 更新时间:2023-11-28 10:37:06 25 4
gpt4 key购买 nike

在这里,我尝试使用 signUp() 函数来获取用户详细信息并将其存储到数据库中。我已经使用 postman 测试了后端 Javascript 文件(signUp 函数),它工作得很好。

HTML:

<!DOCTYPE html>
<html>

<head>
<title>Login</title>

<link href="css\signup.css" rel="stylesheet" type="text/css">

<script>

function signUp() {
if (document.getElementById("password2").value == document.getElementById("cfmpassword2").value) {
var users = new Object();
users.firstName = document.getElementById("firstName").value;
users.lastName = document.getElementById("lastName").value;
users.username2 = document.getElementById("username2").value;
users.email = document.getElementById("email").value;
users.password2 = document.getElementById("password2").value;


var postUser = new XMLHttpRequest(); // new HttpRequest instance to send user details

postUser.open("POST", "/users", true); //Use the HTTP POST method to send data to server

postUser.setRequestHeader("Content-Type", "application/json");

// Convert the data in "users" object to JSON format before sending to the server.
postUser.send(JSON.stringify(users));
}
else {
alert("Password column and Confirm Password column doesn't match!")
}
}

</script>


</head>

<body>

<div style="margin-top: -703px; margin-left: 1250px; position: absolute;">
<!-- Sign up button -->
<p>Need an account? &nbsp;
<button class="signup" id='signup' onclick="document.getElementById('id02').style.display='block'" style="width:auto; height: 6.1vh;">
Sign Up
</button>
</p>
</div>

<!-- The Sign Up Modal-->
<div id="id02" class="modal2">
<span onclick="document.getElementById('id02').style.display='none'" class="close2" title="Close Modal">&times;</span>

<!-- Modal Content -->
<form class="modal-content2">
<div class="container3">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="firstName"><b>First Name</b></label>
<input type="text" id="firstName" placeholder="Enter First Name" name="firstName" required>

<label for="lastName"><b>Last Name</b></label>
<input type="text" id="lastName" placeholder="Enter Last Name" name="lastName" required>

<label for="username"><b>Username</b></label>
<input type="text" id="username2" placeholder="Enter Username" name="username" required>

<label for="email"><b>Email</b></label>
<input type="text" id="email" placeholder="Enter Email" name="email" required>

<label for="psw"><b>Password</b></label>
<input type="password" id="password2" placeholder="Enter Password" name="psw" required>

<label for="psw-confirm"><b>Confirm Password</b></label>
<input type="password" id="cfmpassword2" placeholder="Confirm Password" name="psw-confirm" required>

<br>
<br>
<p>By creating an account you agree to our <a href="aboutus.html" style="color:dodgerblue">Terms &
Privacy</a>.</p>

<div class="clearfix">
<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn2">Cancel</button>
<button type="submit" class="signupbtn" onclick="signUp()">Sign Up</button>
</div>
</div>
</form>
</div>

</body>

</html>

如果确认密码密码匹配,我将获取用户详细信息并将数据发送到我的数据库服务器。否则,应该会弹出一条警报消息。

但是,在尝试之后,我发现数据库中没有添加任何内容。虽然我的 else 部分有效,但我的浏览器上确实会弹出一条警报消息。

这是由于确认密码错误造成的吗?因为我有一组非常相似的工作代码,只是它不包含“确认密码”列。我从这里得到了确认密码how to check confirm password field in form without reloading page

有人可以帮忙找出问题所在吗?非常感谢!

最佳答案

当点击提交按钮时,您正在调用signUp()

JavaScript 运行,但在准备 XHR 请求时,提交表单,浏览器导航,并取消 XHR 请求。

如果您不提交表单,请勿使用提交按钮。

关于JavaScript 注册功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59824219/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com