Javascript window.location.href in chrome doesn't work after POST method
Question
I have change password html form. When user submits that form, I write another <p> </p> element to tell user changed his password or did not and add link to Login page. Both link to Login and Cancel button does the same - redirect to login page. However, after POST method when I click Cancel/redirect to login buttons the screen just keeps loading and never really redirects you there. If I click submit button once again, it sends POST request again so this button works fine no matter how many requests I send. What's wrong with redirection? I can't seem to figure that out. I checked that in Firefox and it seems to work there fine. My code is below:
document.getElementById("btn_cancel").onclick = function(event) { window.location.href = "/login"; }; var token = window.location.href.substring(window.location.href.lastIndexOf("/") + 1); function validate() { var responseText = document.getElementById('error_id'); var password = document.forms["reset-pasword"]["new_password"].value; var confirmPassword = document.forms["reset-pasword"]["repeat_password"].value; if (password !== confirmPassword) { error = "Passwords do not match"; responseText.innerHTML = error; responseText.className = "error_text"; return false; } return true; } document.getElementById("btn_change").onclick = function(event) { event.preventDefault(); var responseText = document.getElementById('error_id'); if (validate() != true) return; var password = document.getElementById("new_password").value; var request = { token: token, password: password }; var xhr = new XMLHttpRequest(); xhr.open('POST', '/update', true); xhr.setRequestHeader('Content-type', 'application/json'); xhr.onload = (res) => { response = res['target']['response']; if (response) { response = JSON.parse(response); responseText.innerHTML = response.message; responseText.className = "error_text"; } else { responseText.innerHTML = "Password changed succesfully. <a href=\\"/login\\">Login</a>"; responseText.className = "success_text"; } }; xhr.send(JSON.stringify(request)); };
<body onload="document.getElementById('reset-pasword').focus();"> <div class="box" id="change_password_panel"> <form name="reset-pasword" id="reset-pasword"> <label for="password">New password</label> <input type="password" placeholder="New Password" id="new_password" name="new_password" required /> <label for="password">Repeat new password</label> <input type="password" placeholder="Repeat Password" id="repeat_password" name="repeat_password" required /> <div style="width: 100%; display: inline-block;margin-top: 10px;"> <div style="float: left;"><button id="btn_change" class="button">Change password</button> </div> <div style="float: right;"><button id="btn_cancel" type="button" class="button">Cancel</button></div> </div> <p id="error_id"></p> </form> </div> </body>
Also, if I click Cancel button first, before clicking Submit, redirection works fine.
If I put window.location.href = "/login"; inside xhr.onload in if and else statements it doesn't work either. So the problem is could be with POST method? I'm really lost with this one..
This is network when I click 'Cancel' before submitting form:
and this is after:
It doesn't even have 'login' in it... I also tried
document.getElementById("btn_cancel").onclick = function (event) { event.preventDefault(); fetch('/login/default.html') .then(window.location.href = "default.html"); };
but it seems it just goes inside window.location.href and never goes out there
2 answers
solution1
0 2019-08-26 07:20:34
我曾经有过类似的问题，但仍然不知道出了什么问题，但是我解决了这个问题，在按钮上添加了<a>标记添加事件。
document.getElementById("btn_cancel").innerHTML = "<a href='/login'>Cancel</a>";
solution2
0 2019-08-26 07:33:56
Can you try
setTimeout(function(){document.location.href = "/login;"},500);
or
window.location.assign("/login");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.