I have a form which is is linked to signup.js which when someone presses the button start chatting it should redirect to user.php in my case it's not working
location.href = "user.php";
is giving the problem because i get success when i submit the form. But it doesn't work. It simply stays on the login page and nothing happens but gives sucess
const form = document.querySelector(".signup form"),
continueBtn = form.querySelector(".button input"),
errorText = form.querySelector(".txt-error");
form.onsubmit = (e) => {
e.preventDefault(); //preventing from submitting
}
continueBtn.onclick = () =>{
// AJAX code refernce w3schools
let xhr = new XMLHttpRequest(); //object created
xhr.open("POST", "php/signup.php", true);
xhr.onload = () =>{
if(xhr.readyState === XMLHttpRequest.DONE){
if(xhr.status === 200){
let data = xhr.response;
if(data == "success"){
location.href = "user.php";
}else{
errorText.textContent = data;
errorText.style.display = "block";
}
}
}
}
// send form data to php through ajax
let formData = new FormData(form); //obj created
xhr.send(formData); //sending data to php
}
These are my codes any help will be appreciated. What I am doing is that when the user clicks the submit button an ajax request is being executed to target php script which logs in the user and if user is logged in successfully then echoes back the message "login_successful" to the ajax request. By using if statement I check whether the message is "login_successful" else display the error.
If the message is "login_successful" the script redirects the user to the new page 'user.php' by using
Your form variable is selected with .signup form, which will find the first <form> element within the first element with a signup class. For example:
<div class = "signup">
<form>
...
</form>
</div>
Presumably, you have a form with the class signup, so you want the selector form.signup
Once you select the correct element, your form.onsubmit listener should work.
The same goes for your continueBtn selector - right now it's selecting an <input> element inside another element with the class button. Presumably you want the selector input.button.