I want to show a particular DIV only after i get the response from my server.
What I am trying to do is, a password recovery function for my users. I get their registered email ID, and then I checked it with my database. If it is present in my database, I send a message back inside a div, stating the password has been sent to your mail ID. If it is an un-registered email ID, I send a different message stating email id not registered.
Here are my two divs:
DIV To get my users email ID
<div id="fgpass" >
<div id="newpass">
<div style="position: absolute;top: 10%;left: 10%;">
<center><h2>PASSWORD RECOVERY</h2></center>
<h4> Enter Your Registered</h4>
<h4>E-Mail Address :</h4>
<f:view>
<h:form>
<center>
<h:inputText id="cmailid" required="true" value="#{forgotPass.mailid}"/>
<h:commandButton value="Submit" action="#{forgotPass.fpass}">
</h:commandButton>
</center>
</div>
</div>
</h:form>
</div>
</div>
DIV to show the server response message
<div id="msg" onclick="$('#msg').hide();">
<div style="position: absolute;top: 20%;left: 2%;">
<span style="font-size: medium;">
<h:outputLabel value="#{forgotPass.finalresult}"/>
</span>
</div>
</div>
My CSS
#fgpass {
position: absolute;
left: 65%;
top: 4%;
border-color: #009900;
border-width: 3px;
border-radius: inherit;
z-index: 800;
}
#newpass{
position: absolute;
z-index: 1000;
height:160px;
width: 250px;
color: midnightblue;
visibility: hidden;
background-color: lavender;
-moz-border-radius: 8px;
border-radius: 8px;
border-width: 3px;
border-color:#444;
}
#msg {
z-index: 5000;
width:160px;
height: 150px;
-moz-border-radius: 8px;
border-radius: 8px;
border-width: 3px;
border-color:#444;
position: absolute;
left: 85%;
top:3%;
cursor: pointer;
background-color: navajowhite;
}
My problem is that the msg DIV is always visible on the screen whenever page loads or reloads. I want it to be visible only if it gets the response from my server . Is there any JQUERY or JAVASCRIPT or simple CSS method to do this?
When the page loads you need to hide the div. Adding an extra style to #msg will do that
#msg
{
display: none;
}
If you are using AAJAX to get the response from the server then you can use the below code
$("#msg").show();
inside the success callback function for the ajax request. jQuery AJAX
Using jquery function you could
$(document).ready(function(){
$("#msg").hide();
// later after ajax?
$.ajax(url).success (function(data) {
$("#msg").show();
return false;
});
});
<form method='post' action='#'>
<input type='text' name='email' placeholder="person#example.com">
<input type='submit' name="send" value='submit'>
</form>
<?php
//connect you database here
//after user submits the email check if the email exits
$sql = 'select * from yourtable where email='.$_POST['email'];
$res = mysql_query($sql);
if(mysql_count_rows($res)==1){
?>
<script>
var unhide_div = document.getElementById('mydiv');
unhide_div.style.visibility = 'visible';
</script>
<?php
}else{
die('Email verification failed!!!');
}
?>
If the email is checked your message is shown here!!
Related
I have textarea with a static content. So I disabled the textarea to prevent any modification in the content. But I want to modify some part of this content. How can I do this ?
I have created a select box as follows :
<div class="scroll-inside">
<?php if($transactionalTemplates->num_rows() > 0) {
foreach($transactionalTemplates->result_array() as $template) { ?>
<a href="#" class="transactionalTemplate" data-text="<?php echo $template['TemplateText']?>">
<?php echo $template['TemplateText'];?>
</a>
<?php }
}
?>
</div>
When I select an item, the selected item will pasted to the following textarea
<textarea placeholder="Enter your message here.." maxlength="160" class="messageTransactional" name="messageTransactional" id="messageTransactionalEnglish"></textarea>
here is my script code:
$('.transactionalTemplate').click(function() {
$('.messageTransactional').val($(this).data('text'));
flag = true;
$('.messageTransactional').keypress(function(e) {
e.preventDefault();
});
});
After adding the content to textarea, I prevent typing new content using the above function.
here is an example:
Suppose Dear (123), thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call (123) is my content.
I need to edit this content as Dear John, thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call 91xxxxxxxx
Which means, I need to change the content in paranthesis, keeping the format static.
I would highly suggest not using a textarea. There is no real way to stop that. You would need to do it yourself and try to catch every possibility to change that.
Instead, a simple text-input usually looks the best.
Alternatively, if it has to be seamless, you can use a contenteditable span, like this:
Dear <span contenteditable="true">(please enter your name here)</span>, thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call <span contenteditable="true">(please enter your tel. number here)</span>
I was bored so did a pretty cool solution, it's not perfect though and still needs work for production.
const $editable = $('.editable')
const $inputs = $('.input')
const $save = $('#save')
const popup = function(e) {
const $this = $(this)
$this
.find('input')
.addClass('active')
.focus()
}
const onBlur = function(e) {
const $this = $(this)
const $parent = $this.parent()
const value = $this.val()
$parent.find('input')
.removeClass('active')
if (value) {
$parent
.find('.value')
.text($this.val())
}
}
const onSave = function(e) {
const $pre = $('pre')
console.log('save', $pre.text())
}
$editable.on('click', popup)
$inputs.on('blur', onBlur)
$save.on('click', onSave)
body {
padding: 1em;
}
pre {
white-space: normal;
font-family: sans-serif;
}
.editable {
border-bottom: 1px dotted #3cf;
color: #3cf;
min-width: 1em;
min-height: 1em;
position: relative;
}
.editable input {
position: absolute;
width: 80px;
transform: translate(-70px, 0%);
border: 1px solid #aaa;
padding: .5em;
border-radius: 5px;
text-align: center;
opacity: 0;
visibility: hidden;
transition: .4s opacity ease, .4s transform;
}
.editable input:focus,
.editable input.active {
transform: translate(-70px, -100%);
opacity: 1;
visibility: visible;
outline: none;
}
.editable:focus {
outline: none;
}
.button {
float: right;
padding: .5em 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name="messageTransactional" />
<pre id=="messageTransactional">
Dear <span class="editable" id="name"><span class="value">name</span><input type="text" class="input" /></span>, thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call <span class="editable" id="phone"><span class="value">phone</span><input type="text" class="input" /></span> is my content.
</pre>
<button id="save" class="button">save</button>
When doing a login, is there a message that pops up in the form itself
instead of alert popup message? Instead of popup screen, I want it to just show a message, login success, and disappear and then redirect.
alert("Login successful.")
Natively there is not.
You're thinking of a modal. Check out a jquery UI modal dialog example at https://jqueryui.com/dialog/#modal-message
This is a simple example of a custom messagebox. You can design it however you like
https://jsfiddle.net/mba25ma8/1/
html:
<div id="messageBox">Loggin successfull</div>
<input type="text" placeholder="Login name">
<button>Login</button>
css:
#messageBox {
display:none;
background-color: blue;
border: 1px solid #abc;
color: white;
position: fixed;
padding: 20px;
top:0;
left: 50%;
height: 50px;
}
jQuery:
$(function(){
$("button")
.on("click", function(){
$("#messageBox")
.slideDown("fast",function(){
$(this).delay(2000).slideUp("fast");
});
// redirect to new page here
});
});
$('.login_links_register').click(
function () {
$("body").addClass("removeScroll");
$(".login_form_container").show();
$("#registerForm").show();
$(".login_form_container").css('top', '0px');
/*$('.overlay').addClass('visible');*/
});
$(document).on('click', ".close_button",
function (event) {
var negativeHeight = -1 * ($('.login_form_container').offset().top + $(this).parents('.login_form_container').height());
$(".login_form_container").css('top', negativeHeight);
//$(".login_form_container").slideUp();
/*$('.overlay').removeClass('visible');*/
setTimeout(function () {
$('.overlay').addClass('displayNone');
$(".login_links").removeClass("popup_opened");
$("#loginForm").hide();
$("#registerForm").hide();
$("body").removeClass("removeScroll");
}, 500); /*Execute a set of statements after a statement completion. To make it faster reduce the milliseconds*/
});
input[type="text"], input[type="password"] {
border: 1px solid #aaa;
}
.header2 {
background-color:#E1E3E5;
/*have to change */
/*padding: 15px 0;*/
}
.right {
float: right;
clear:both;
/*To avoid problems caused by float - but check it may cause some problems check for it*/
}
/*Instead overflow:auto(or) hidden*/
.clearboth::after {
clear: both;
content:"";
display: block;
visibility: hidden;
}
.displayNone {
display: none;
}
.emailField, .passwordField {
width: 200px;
padding: 5px;
}
/*to remove unnecessary margin caused by ul element */
.login_links_list {
/*margin:10px 0;*/
padding: 0px;
margin: 0;
}
.login_links.right {
margin-right: 70px;
/*Same as Login container*/
}
/*login_link ul li element*/
.login_links_list_ele, .login_links_list_label
/*can apply al these properties to anchor tag instead li */
{
float: left;
list-style: outside none none;
transition: all 0.5s ease 0s;
}
.login_links_list_label {
padding: 15px;
}
.login_links_register, .login_links_login {
/*border-right:1px solid #ccc;
border-left: 1px solid #ccc;*/
float:left;
padding:15px;
}
.login_form_container.right {
border: 1px solid #aaa;
margin-right: 70px;
/* For better alignment. Instead kissing the edge of the screen*/
transition: all 1s ease 0s;
position: relative;
top: -173px;
/* For Styling. instead displayNone*/
z-index: 2;
}
/*positioning close button*/
.close_button {
cursor: pointer;
float: right;
position: relative;
top: -15px;
right: -15px;
width: 17px;
}
.loginDiv.right {
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="headers header2 clearboth" id="header2">
<nav class="login_links right">
<ul class="login_links_list right">
<li class="login_links_list_label">Are you a member?</li>
<li id="login_links_register" class="login_links_list_ele login_links_register">Register</li>
<li id="login_links_login" class="login_links_list_ele login_links_login">login</li>
</ul>
</nav>
</div>
<div class="login_form_container right displayNone">
<form class="right registerForm" id="registerForm" method="POST" action="lib/registration_validate.php">
<img class="close_button close_popup close_register_form" src="image/close_icon.png"></img>
<div class="register_input">
<input autocomplete="off" class="register_links emailID" type="text" placeholder="Email ID" name="email"/>
</div>
<div class="register_input">
<input type="password" autocomplete="off" class="register_links password" placeholder="Password" name="password"/>
</div>
<div class="register_input">
<input autocomplete="off" class="register_links conf_password" type="password" placeholder="Confirm Password" name="confirmPassword"/>
</div>
<div class="register_submission">
<input type="submit" value="Register" name="submit" class="register_button"></input>
<div class="custom_checkbox_div">
<input id="custom_checkbox" class="custom_checkbox_input" type="checkbox" value="Remember Me" name="remMeCheckbox"/>
<label for="custom_checkbox" class="custom_checkbox_label"></label>
<label class="custom_checkbox_string" for="custom_checkbox">Remember Me</label>
</div>
</div>
This is in my HTML page. I have negative top to show and hide forms for better views.
Please clear me the following doubts
1) I have to send the data to server when user submits form. I do client-side and server-side validation. If client-side validation fails, I 'll show the errors in the form itself. If there is any server-side error, how do i show this in the form?
My ideas:
I have to insert some php error tags in the html page and change my filetype to php from html so that if there is any server side error i ll insert the error in those tags.
<span class="error">* <?php echo $emailErr;?></span>
Something like the above.
(or)
Take the user to another php page where user re-enter the details. and handles all the error in the same page.
2) What are the problems with this type of negative top form design?
Please let me know the problems and suitable solutions so that i get clean design. I don't want the code only the idea.
There are couple of ways to do it but I am gonna stay low here by giving more of a hint to what you can do.
Using AJAX to submit form?
If the validation fails in PHP...
Create an associative array containing all the error messages and a key like submitError set to TRUE.
json_encode the array and die or return it.
In your JavaScript AJAX success callback, check for the existence of submitError key in the response.
If true, parse and display all messages from the JSON response you received. Done!
NOT using AJAX?
You can utilize $_SESSION to store the errors and related messages & set a flag for error.
When the page loads/submits, check if $_SESSION contains that flag.
If it does, pull the messages from session and display to the user.
Once displayed, clear those things from $_SESSION
These things can be done for small applications. If you are using some kind of framework like CodeIgniter or Laravel, you may want to check their session flash methods.
About Negative Top Form Design
I don't see much of a problem there unless it's covering up something vital beneath it when opened. Specially on mobile version( if you plan to do that).
I want the "log in block" to be hidden to my users once they are logged in. It is very confusing to still see the log in section. My users think that their log in didn't work when in actuality, they are successfully logged in. I have tried inserting the following into my CSS block, but I need a condition to make it visible when users are NOT logged in.
display: none;
Here is my HTML code for this section:
<DIV id="hp-content">
<DIV id="hp-left-column">
<DIV id="hp-sign-header">
</DIV>
<DIV id="hp-sign">
<input type="textbox" class="ui-txt-general medium required" id="swsignin-txt-username" />
<input type="password" class="ui-txt-general medium required" id="swsignin-txt-password" />
<a title="Sign into my site." onclick="joelSignIn();" class="" id="swsignin-btn-submit"><img src="/cms/lib06/CA01000567/Centricity/Template/2/signin.png" alt="Sign In" /></a>
</DIV>
Here is my CSS code for this section:
#hp-sign-header{
width: 288px;
height: 27px;
margin: 20px 0px 10px 0px;
background: transparent url(/cms/lib06/CA01000567/Centricity/Template/2/sign-header.png) no-repeat scroll top center;
}
#hp-sign{
width: 218px;
height: auto;
margin-left: 35px;
}
#swsignin-txt-username, #swsignin-txt-password {
border: 1px solid #0C304E;
color: #6994B9;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 15px;
line-height: 15px;
height: 47px;
margin: 0px 0px 10px 0px;
padding: 0px;
text-align: center;
width: 221px;
}
#swsignin-txt-username {
background: transparent url(/cms/lib06/CA01000567/Centricity/Template/2/username.png) no-repeat scroll top left;
}
#swsignin-txt-password {
background: transparent url(/cms/lib06/CA01000567/Centricity/Template/2/password.png) no-repeat scroll top left;
}
Here is the JAVASCRIPT code for this section:
function joelSignIn(){
var data = "{Username: '" + addslashes($('#swsignin-txt-username').val()) + "',Password: '" + addslashes($('#swsignin-txt-password').val()) + "'} ";
var success = "window.location.reload()";
var failure = "if (result[0].reason === 'TOU') { DisplayTOU(); } else { CallControllerFailure(result[0].errormessage); }";
var callPath = "../site/SiteController.aspx/SignIn";
CallController(callPath, data, success, failure);
}
So my question is, do I need to insert HTML code, CSS code and/or JAVASCRIPT code to make this work? And what is the code that I need to insert and where? I have tried researching and playing around, but to no avail. Any advice would be MUCH appreciated. Thank you!
You can't log in using javascript alone. Javascript is a client-side language, meaning it only operates on the user's computer. 'Logging in' suggests your visitors have something to log in to. That's usually a database running on the computer you're using to host your website, typically called the server. This can only be done at the server-side.
I'm trying to understand why the message generated by jquery it's changing position everytime a field gets empty!
So, if the message is generated by the feedback of ajax it's placed in the proper place which is right beneath the login box. If the field (input box) is empty on submit the ajax script is not called and the message of empty field it's shows right on but 40px or more beneath.
The jquery script:
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#loginform").submit(function(){
$('#loginform input[type=text]').each(function(n,element){
if ($(element).val()=='') {
$(".message").html('<p>O campo '+element.id+' tem de ter um valor!</p>').fadeIn("slow").delay(2000).fadeOut(1000);
return false;
}
else{
$.post("login.php", { usrname:$("#Nome").val(), passwd:$("#Palavra-passe").val()}, function(data){
if(data == '1'){
$("#subLog").hide();
$(".message").html('<p>Login efectuado com sucesso, a redirecionar...</p>').fadeIn("slow").delay(2000).fadeOut(1000, function (){
$("#login").fadeOut('slow', function(){
location.reload();
});
});
}
else{
$("#subLog").hide();
$(".message").html('<p>Erro! Tente novamente por-favor!</p>').fadeIn("slow").delay(1500).fadeOut(1000, function(){
$("#subLog").fadeIn('fast');
});
}
});
}
});
return false;
});
});
//-->
</script>
The css message style:
.message{
text-align:center;
color: white;
background: rgba(0, 0, 0, .5);
margin-top: 65px;
padding: 4px;
font-weight: bold;
font-size: small;
border: 2px solid white;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}
the form:
<div class="box" id="login" style="width: 326px; height: 228px; top: 39%; background-image: url('images/loginBox.png');background-repeat: no-repeat;">
<form id="loginform" action="" method="post">
<fieldset style="display: block">
<legend></legend>
<input id="Nome" class="transparent" type="text">
<input id="Palavra-passe" class="transparent" type="password">
<input id="subLog" type="submit" value="Login">
</fieldset>
</form>
<div class="message"></div>
UPDATE:
The submit button get's hidden when the ajax instruction is called therefore the position changes 65px. To correct this small problem I have removed the margin-top property from the css rule and changed the position with .css('margin-top', 'value'). This way I change the value to the different messages and both get displayed in the same screen position. Thank you.
Well, i don't know exactly how it looks after the ajax response, but if you leave the field empty you just need to take off this line from css
margin-top: 65px;
and it's ok.
look here: http://jsfiddle.net/Ature/2/
P.S. i also added
$('div.message').hide();
to avoid having the div message display before any warning is generated
EDIT - maybe you have other rules affecting your div. if the other rules are loaded before you insert this you can add the line
margin-top: 0px;
to override them.
moreover: remeber to clear your cache when you reload yopur page!