hide pop up based on message under browser's Response tab - browser

Question

in pop up box, we are displaying login form. once user enter wrong email id or password, we are displaying message : Invalid login/pw , but once they enter correct details and click on login button, than user will be logged in.
but issue is pop up box will remain until we close the pop up manually with help of close button as in below image, but i want to hide the pop up box if login is successfull.
enter image description here
Once we click on login, under Response tab, if there is no message, than i want to hide the pop up, if there is message as success":false,"error":"Invalid login or password." , than i don't want to hide the pop up
enter image description here
I tried below code :
Html
<form>
//code for email and pw
<button onclick = "hideWindow()">Login</button>
</form>
Ajax
function hideWindow()
{
var username=jQuery( "#customusername" ).val();
var password=jQuery( "#custompassword" ).val();
url="";
new Ajax.Request(url, {
method: 'POST',
onFailure: function(response){
},
parameters: {
username: username,
password:password
},
onSuccess: function(response)
{
if(response.responseText=="")
{
//trigger to close popup
document.getElementById('something').style.display = 'none';
document.getElementById('ajaxlogin-mask').style.display = 'none';
}
}
});
}
edit
<div class="ajaxlogin-window" id="something">
<form>
<div class="content">
<ul class="form-list">
<li>
<input type="hidden" id="likeproduct_id" name="product_id" value=""/>
<label for="email" class="required"><em>*</em>Email</label>
<div class="input-box">
<input type="text" name="login[username]" value="<?php echo $this->htmlEscape($this->getUsername()) ?>" id="email" title="<?php echo $this->__('Email Address') ?>" />
</div>
</li>
<li>
<label for="pass" class="required"><em>*</em><?php echo $this->__('Password') ?></label>
<div class="input-box">
<input type="password" name="login[password]" id="pass" title="<?php echo $this->__('Password') ?>" />
</div>
</li>
<?php echo $this->getChildHtml('form.additional.info'); ?>
</ul>
</div>
<div class="buttons-set">
<button onclick = "hideWindow()" type="submit" class="button" title="<?php echo $this->__('Login') ?>" name="send" id="send2" ><span><span><?php echo $this->__('Login') ?></span></span></button>
</div>
</div>

Answer 1

As I can see there is some thing wrong with your ajax function try this out:
onSuccess: function(response)
{
document.getElementById('something').style.display = 'none';
document.getElementById('ajaxlogin-mask').style.display = 'none';
}

Answer 2

function hideWindow()
{
var db_username = 'ankit';
var db_password = 'password';
var username=jQuery( "#customusername" ).val();
var password=jQuery( "#custompassword" ).val();
if(username = db_username && password == db_password) {
jQuery('#something').hide();
}
else{
jQuery('#something').prepend('Wrong Cred ');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ajaxlogin-window" id="something">
<form>
<div class="content">
<ul class="form-list">
<li>
<input type="hidden" id="likeproduct_id" name="product_id" value=""/>
<label for="email" class="required"><em>*</em>Email</label>
<div class="input-box">
<input type="text" name="login[username]" value="" id="email" title="Email Address" />
</div>
</li>
<li>
<label for="pass" class="required"><em>*</em>Password</label>
<div class="input-box">
<input type="password" name="login[password]" id="pass" title="Password" />
</div>
</li>
</ul>
</div>
<div class="buttons-set">
<button onclick = "hideWindow()" type="submit" class="button" title="Login" name="send" id="send2" ><span><span>Login</span></span></button>
</div>
Please check the code instead of ajax call i have just added a if condition.
Hope it might help you
Thanks