How to clear fields of username, password after cliking logout button?

Question

1.00/5 (2 votes)

See more:

Hello,I am creating single page login and logout project using javascript..my problem is after clicking the logout button the fields is not clearing and is showing previous entered details.plz help me out how to clear the fields after logout...thanks in advance

What I have tried:

<html>
<head>
<title>
Login page
</title>
<style>
.logo
{
float: right;
}
#wel
{
float: right;
}
</style>
</head>
<body onload="GenerateCaptcha();">   
<div  id="frm" style="display: none;" >
<div id="demo"></div>
UserName<input type="text" id="userid"/><div id="erroru"></div>
Password<input type="password" id="pass"/><div id="errorp"></div>     
Enter the Captcha Text:  
<input type="text" id="txtCompare" />  
<input type="text" id="txtCaptcha" style="text-align: center; border: none; font-weight: bold; font-size: 20px; font-family: Modern" /> 		
<input type="button" id="btnrefresh" value="Refresh" onclick="GenerateCaptcha();" />
<button type="submit" onclick="loadDoc()" >submit</button>
</div>
<div id='frm2'>
<div id="frm1" > </div>
<div  id="logout" style="display: none;" >
<button type="submit" onclick="logout();">logout</button>
</div>
</div>
<button id="btn" onclick="show();"><img class="logo" src="signin1.png" width="20px" height="20px" top="75px;"></button>  
<script>
function show(){
var ele = document.getElementById('frm');
if(ele.style.display == 'none')
{
ele.style.display = 'block';
document.getElementById('btn').style.display='none';
}
}
function logout(){

var ele1 = document.getElementById('frm2');
if(ele1.style.display == 'none')
{
ele1.style.display = 'block';
}
else{
ele1.style.display = 'none';	
}
var ele2 = document.getElementById('btn');
if(ele2.style.display == 'none')
{
ele2.style.display = 'block';
}
}
function loadDoc(){
/*console.log("In checkform()");
var xhttp= new XMLHttpRequest();
var url="http://192.168.100.7:8082/login/Login";
var myarr={User:document.getElementById("userid").value,password:document.getElementById("pass").value};
var params=JSON.stringify(myarr);
console.log(params);
var params="inputJsonStr"+ "=" + params;
xhttp.open("POST",url,true);
xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
/*xhttp.onreadystatechange = function()
{
if ((this.readyState == 4) && (this.status == 200)) 
{
console.log("after getting response" + xhttp.responseText);
var my=JSON.parse(this.responseText);
}
};*/
//console.log("before sending request");
//xhttp.send(params);
var emailRegex= /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
var lreg = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");
femail = document.getElementById("userid").value;
fpass=document.getElementById("pass").value;
if (femail == "" || fpass == "")
{
document.getElementById('demo').innerHTML= "enter the email and password";
return false;
}
else if(!emailRegex.test(femail))
{
document.getElementById('demo').innerHTML= "enter the valid email";
return false;
}
else if(!lreg.test(fpass))
{
document.getElementById('demo').innerHTML= "enter the valid password";
return false;
}
else
{
var user="teja";
document.getElementById('frm1').innerHTML='welcome' +user;
var el = document.getElementById('logout');
if(el.style.display == 'none')
{
el.style.display = 'block';
}
var ele = document.getElementById('frm');
if(ele.style.display == 'block')
{
ele.style.display = 'none';
}
}
//else
//{
//alert("success");
//var userid = document.getElementById("userid").value;
//var name   = userid.substring(0, userid.lastIndexOf("@"));
//document.getElementById("wel").innerHTML="Welcome " + name;
//}
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);  
var str2 = removeSpaces(document.getElementById('txtCompare').value);   
if (str1 != str2)             
document.getElementById("demo").innerHTML="please enter correct captchcode"; 
}
function GenerateCaptcha() {  
var chr1 = Math.ceil(Math.random() * 10) + '';  
var chr2 = Math.ceil(Math.random() * 10) + '';  
var chr3 = Math.ceil(Math.random() * 10) + '';    
var str = new Array(4).join().replace(/(.|$)/g, function () { return ((Math.random() * 36) | 0).toString(36)[Math.random() < .5 ? "toString" : "toUpperCase"](); });  
var captchaCode = str + chr1 + ' ' + chr2 + ' ' + chr3;  
document.getElementById("txtCaptcha").value = captchaCode  
}   
/* Validating Captcha Function */  
/* Remove spaces from Captcha Code */  
function removeSpaces(string) {  
return string.split(' ').join('');  
}  
</script>
</body>
</html>

Posted 5-Oct-17 18:52pm

Member 13392362

Updated 7-Oct-17 23:34pm

Add a Solution

Comments

Member 13392362 6-Oct-17 2:36am

i have been asking a couple of times the questions..but none of them answerd my question....this s ridiculous..waste of time to ask a question in ths site

Richard Deeming 6-Oct-17 15:10pm

Well, let's see about getting you a refund for the money you paid for your support contract that guaranteed an answer within two hours, shall we?

Wait, what's that? You didn't pay for a support contract?

Oh, yes. That's right. The people who answer questions here are unpaid volunteers.

So enough with your impatient passive-aggressive comments. Either have some patience and wait for someone who's willing to wade through your code and try to answer your question, or go and do your own research into the problem.

Comments like the one above will end up getting you kicked off the site.

ThilinaMD 7-Oct-17 1:15am

didn't you tried this one. document.getElementById('userid').value=""; in log out function

Member 13392362 9-Oct-17 0:15am

thnks a lot ThilinaMD.. it worked...:)

ThilinaMD 9-Oct-17 12:46pm

you’re welcome, and happy coding

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Answer 1 · 2017-10-07T23:34:00

Solution 1

Try wrapping your controls in a <form> with an id="something" - then, when you logout, or whatever else you do, call something.reset(). This resets all controls within that form element.

HTML DOM Form reset() Method[^]

Posted 7-Oct-17 23:34pm

W∴ Balboos, GHB