This question already has answers here:
Display A Popup Only Once Per User
(7 answers)
Closed 6 years ago.
There have already been answers to this question but I am still unsure exactly how it works.
Here is my code:
Here is my JavaScript:
<!--PopupScript-->
<script>
// you can use just jquery for this
$(document).ready(function(){
$('#overlay-back').fadeIn(500,function(){
$('#popup').show();
});
$(".close-image").on('click', function() {
$('#popup').hide();
$('#overlay-back').fadeOut(500);
});
});
</script>
Here is the HTML:
<!--Popup Content-->
<div class="container-fluid">
<div id="overlay-back"></div>
<div id="popup">
<img src="Assets/images/Deep_Close.png" class="close-image" />
<form name="Mail_list" action="save.php" method="post">
<h4>Subscription</h4>
<br/>
<div class="form-group">
<label for="first_name">First Name: </label>
<input type="text" name="first_name" id="first_name" size="25" placeholder="First Name" autofocus required />
</div>
<div class="form-group">
<label for="last_name">Last Name: </label>
<input type="text" name="last_name" id="last_name" size="25" placeholder="Last Name" required />
</div>
<div class="form-group">
<label for="email">User Email: </label>
<input type="text" name="email" id="email" size="25" placeholder="Email" required />
</div>
<br/><br/>
<input type="submit" value="Submit Form">
<input type="reset" value="Reset Form">
</form>
</div>
</div>
This solution works great for what I need it for. The problem is that I do not want the popup to show every time someone navigates to the home page, I want the popup to show only once per user or session. I know this can be achieved by using 'cookies', but I do not know exactly how to incorporate it into the JavaScript above.
Any help would be greatly appreciated. Thank you.
You can use localStorage.
Example:
$('#overlay-back').fadeIn(500,function(){
if (localStorage.popupShown !== "true") {
$('#popup').show();
localStorage.popupShown = "true";
}
});
you can try
$(document).ready(function(){
if (sessionStorage.count==0) {
$('#overlay-back').fadeIn(500,function(){
$('#popup').show();
sessionStorage.count = 1;
});
}
$(".close-image").on('click', function() {
$('#popup').hide();
$('#overlay-back').fadeOut(500);
});
});
Related
I'm a novice php programmer and only knew a little about programming. I am trying to develop a job portal system where users can fill in their information to find jobs. My problem right now is very tiny but it's a small change that I want to make. Previously, I didn't put the part of Employment History but now I did. Users can select whether they are experienced or fresh graduate. If they are experienced, a form will be shown so that they can fill in the form.
Now the problem is, the form is hidden, but it leave a huge gap of whitespace between Employement History and other's section.
I've read others similar problems but can't find the right solutions. Can anyone help me by giving me guidance on how to remove the gap?
source code:
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.visibility = 'visible';
} else document.getElementById('ifYes').style.visibility = 'hidden';
}
<label> Have you worked before?</label> <br>
<label for="yesCheck">Experienced Employee</label>
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> <br>
<label for="noCheck">Fresh Graduate</label> <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br>
<div id="ifYes" style="visibility:hidden">
<p> Please describe your employement history, listing the most recent position first</p>
<div>
<p>1</p>
<div class="form-group">
<input class="form-control" id="emp1" name="emp1" placeholder="Employer"></input>
</div>
<div class="form-group">
<input class="form-control" type="text" id="pos1" name="pos1" placeholder="Position">
</div>
<div class="form-group">
<input class="form-control" type="text" id="date1" name="date1" placeholder="Dates [From-To]">
</div>
<div class="form-group">
<input class="form-control" type="text" id="reason1" name="reason1" placeholder="Reasons for Leaving">
</div>
</div>
<div>
<p>2</p>
<div class="form-group">
<input class="form-control" id="emp2" name="emp2" placeholder="Employer"></input>
</div>
<div class="form-group">
<input class="form-control" type="text" id="pos2" name="pos2" placeholder="Position">
</div>
<div class="form-group">
<input class="form-control" type="text" id="date2" name="date2" placeholder="Dates [From-To]">
</div>
<div class="form-group">
<input class="form-control" type="text" id="reason2" name="reason2" placeholder="Reasons for Leaving">
</div>
</div>
<div>
<p>3</p>
<div class="form-group">
<input class="form-control" id="emp3" name="emp3" placeholder="Employer"></input>
</div>
<div class="form-group">
<input class="form-control" type="text" id="pos3" name="pos3" placeholder="Position">
</div>
<div class="form-group">
<input class="form-control" type="text" id="date3" name="date3" placeholder="Dates [From-To]">
</div>
<div class="form-group">
<input class="form-control" type="text" id="reason3" name="reason3" placeholder="Reasons for Leaving">
</div>
</div>
</div>
I try this code based on the code I found on Write in a form by clicking on a button
Thank you in advance for guidance and help.
In CSS, visibility: hidden only makes the element invisible, but it still takes up space.
In your JavaScript code, use the display-property instead, which will completely hide the element:
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.display= 'block';
} else document.getElementById('ifYes').style.display= 'none';
}
I am new to HTML, PHP and JavaScript, so expect mistakes.
I've got the form working and sending contents via email in my PHP file. That works. I'm using the Iframe to keep people on page and that seems to work as intended.
I'm trying to get a bootstrap alert to appear once the form is submitted. So it's collapsed by default and I simply want it to appear once the form is submitted or the button pressed. I cannot figure it out for the life of me. The form will submit as expected but the script does not seems to run with the alert.
The script is within the HTML doc:
<script>
function FormSubmit(){
alert("The form was submitted");
$('#AlertSuccess'.show('fade');
}
</script>
<div id="AlertSuccess" class="alert alert-success collapse">
<!--<a id="CloseAlert" href="#" class="close">×</a> -->
<strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
<iframe name="keepitneat" style="display:none;">
</iframe>
<form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
<input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
<input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
<button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200" value="Submit">send</button>
</form>
</div>
Please make me feel silly and point out the typo or logic mistake as I've been stuck on this for a while.
You have to hide the #AlertSuccess in default and on form submit, call the show() to display the message.
And you have forgot to close the bracket in $('#AlertSuccess'.show('fade');.
It should be
$('#AlertSuccess').show('fade');
function FormSubmit(){
$('#AlertSuccess').show('fade');
}
.hidden{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="AlertSuccess" class="alert alert-success collapse hidden">
<!--<a id="CloseAlert" href="#" class="close">×</a> -->
<strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
<iframe name="keepitneat" style="display:none;"></iframe>
<form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
<input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
<input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
<button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200" value="Submit">send</button>
</form>
</div>
The browser console (F12) should tell you about the syntax error in you javascript. You forgot the closing ) in $('#AlertSuccess'.show('fade');.
$('#AlertSuccess').show('fade');
I am creating a form where the user will register for a website and in that form there are two input fields to help confirm the users password. I am trying to disable the submit button when the passwords are not matching and then reenable it when the passwords do match. I currently have the disable part working but I cannot reenable it.
I have tried looking at this post how to check confirm password field in form without reloading page but I couldn't figure out what I needed to do beyond what I currently have.
Code:
<form id="myform" action="process_registration.php" class="basic-grey" method="post">
<div>
<label for="firstName" id="firstName">* First Name:</label>
<input type="text" name="firstName" id="firstName" minlength=1 required />
</div>
<div>
<label for="lastName" id="lastName">* Last Name:</label>
<input type="text" name="lastName" id="lastName" minlength=1 required />
</div>
<div>
<label for="email" id="email">* Email:</label>
<input type="email" name="email" id="email" minlength=1 required />
</div>
<div>
<label for="username" id="usernameLabel">* Username:</label>
<input type="text" name="username" id="username" minlength=1 required />
</div>
<div>
<label for="password" id="passwordLabel">* Password:</label>
<input type="password" name="password" id="password" minlength=1 required />
</div>
<div>
<label for="passwordConfirm" id="passwordLabelConfirm">* Password Confirmation:</label>
<input type="password" name="passwordConfirm" id="passwordConfirm" minlength=1 required />
<span id="message"></span>
</div>
<div>
<input id="submit" type="submit" name="submit" value="Submit" />
</div>
</form>
<?php include ABSOLUTE_PATH . '_includes/footer.inc.php'; ?>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'>
</script>
<script src='https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js'></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
$('form').validate();
</script>
<script>
$('#password, #passwordConfirm').on('keyup', function() {
if ($('#password').val() == $('#passwordConfirm').val()) {
$('#message').html('Matching').css('color', 'green');
$('submit').prop('disabled', false);
} else
$('#message').html('Not Matching').css('color', 'red');
$('submit').prop('disabled', true);
});
</script>
Your code doesn't work for two reasons:
Because you're using $('submit') instead of $('#submit'). You're mistakenly using submit as though it were the tagname rather than the id of the button.
Because, the else part of your if statement, where the code to re-enable the button is located has no braces {} and thus only executes the first instruction. The second one is considered to be outside the if statement and it's executed always last, thus keeping the button permanently disabled.
Snippet:
(only kept the code essential for demonstration)
/* --- JavaScript --- */
$('form').validate();
$('#password, #passwordConfirm').on('keyup', function() {
if ($('#password').val() == $('#passwordConfirm').val()) {
$('#message').html('Matching').css('color', 'green');
$('#submit').prop('disabled', false);
} else {
$('#message').html('Not Matching').css('color', 'red');
$('#submit').prop('disabled', true);
}
});
<!--- HTML --->
<form id="myform" action="process_registration.php" class="basic-grey" method="post">
<div>
<label for="password" id="passwordLabel">* Password:</label>
<input type="password" name="password" id="password" minlength=1 required />
</div>
<div>
<label for="passwordConfirm" id="passwordLabelConfirm">*
Password Confirmation:</label>
<input type="password" name="passwordConfirm" id="passwordConfirm"
minlength=1 required />
<span id="message"></span>
</div>
<div>
<input id="submit" type="submit" name="submit" value="Submit" />
</div>
</form>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'>
</script>
<script src='//cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js'>
</script>
<script src="//cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js">
</script>
Note: In the answer of the question you linked the code works, because there is only one instruction following else, whereas you have two.
I found out actually that it doesn't always work. Therefor I added a return false to the script.
$('#user_password, #user_password_retype').on('keyup', function () {
if ($('#user_password').val() == $('#user_password_retype').val()) {
$('#message').html('Matching').css('color', 'green');
$("#savebutton").prop('disabled', false);
return true;
} else
$('#message').html('Not Matching').css('color', 'red');
$("#savebutton").prop('disabled',true);
return false;
});
I'm using a button to submit two forms(which will run few scripts at the backend and displays the output on the frontend)".
HTML -
<form id="form2" class="form-wrapper" name="myForm" action="http://10.1.6.65/cgi-bin/testresult2.py" method="get" >
<div class="container">
<label><b> Client Name</b></label>
<input id="clientName_details" placeholder="Enter client name" type="text" name="De_Client_name" required >
<label><b> Version</b></label>
<input id="Version_details" placeholder="Enter version" type="text" name="De_version" >
<label><b> DB Name</b></label>
<input id="dbName_details" placeholder="Enter DB name" type="text" name="De_dbname" >
<label><b> HOST Name</b></label>
<input id="hostName_details" placeholder="Enter HOST name" type="text" name="De_Host">
<label><b> Email</b></label>
<input type="email" class="input-field" placeholder="Enter Email" name="email" value="" required/>
</div>
</form>
<dev class=bottom>
<form id>
<dev class=tag><b>Do you want to proceed with Upgrade : </b> </dev>
<input type="button" id="subbut" value="YES">
<div id="divMsg" style="display:none;">
<img src="http://www.javascriptsource.com/img/ajax-loader.gif" alt="Please wait.." />
</div>
<div id="msg"></div>
</form>
JS -
$(document).ready(function() {
$("#subbut").click(function() {
$(this).parent().append('<img src="data:image/gif;base64,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" />');
$.post($("#form1").attr("action"), $("#form1").serialize(),
function(data) {
$("#msg").append(data);
$.post($("#form2").attr("action"), $("#form2").serialize(),
function(data) {
$("#msg").append(data);
$(this).hide();
});
});
});
});
But only the problem is the loading is for infinite time.But how can we restrict so that as soon as the code behind Execution completes the loading image should be vanished.
Why don't you simple show/Hide divMsg
Here is the code
$(document).ready(function() {
$("#subbut").click(function() {
$("#divMsg").show();
$.post($("#form1").attr("action"), $("#form1").serialize(),
function(data) {
$("#msg").append(data);
$.post($("#form2").attr("action"), $("#form2").serialize(),
function(data) {
$("#msg").append(data);
$("#divMsg").hide();
});
});
});
});
I have 3 forms. I'd like to show each separately. Having the user fillout and then have the completed form slide to the left, and then revealing the proceeding form.
$('.button-action').click(function() {
$('.firstForm').animate({left: '-=150px'}, 500);
});
How would I go about making this happen?
Here is a fiddle that I've tried to work with.
Thank you for your help.
I've changed the divs to have a class called 'wizard' (because that's the way I see what you are trying to do) you can change that however you'd like.
HTML
<div class="promo">
<div class="wrapper">
<div id="signup" class="wizard">
<div class="heading">
<h1>Just need your email to get started</h1>
</div>
<ul>
<li>
<input class="signup-email" type="text" placeholder="Email address" />
</li>
<li>
<button data-next-id="form1" validationDiv="signup" class="continue button button-action">Apply</button>
</li>
</ul>
</div>
<div id="form1" class="wizard">
<h1>One more to go</h1>
<input type="text" placeholder="First Name" />
<input type="text" placeholder="Last Name" />
<input type="text" placeholder="Country" />
<button data-next-id="form2" validationDiv="form1" class="continue button button-action">One more</button>
</div>
<div id="form2" class="wizard">
<h1>Last one</h1>
<input type="text" class="input-text" placeholder="Company Name" />
<button validationDiv="form2" class="button button-action">Done</button>
</div>
</div>
</div>
jQuery
$(".wizard").hide();
$("#signup").show();
$(".continue").click(function () {
var valid = true;
$("#" + $(this).attr("validationDiv")).find("input").each(function () {
if ($(this).val() == "") valid = false;
});
if (valid) {
$(".wizard").slideUp();
$("#" + $(this).attr("data-next-id")).slideDown();
}
});
JSFiddle