I have two forms inside one div:
Login form
Register form
Register form is hidden while login form is shown as default when you load the page. Im using js script to animate between those two forms by clicking anchor tag.
This causes problems for example while trying to register and you don't go through validation process correctly.
Hypothetical situation:
You've filled all the inputs, click submit button and it turns out that username you've provided is too short. The page will reload and it will show the default form again which is login form. You then again need to click "Register" a tag in order to switch between forms and then you see the error with validation.
I've been trying to read up about ways of doing that for days but seems like I can't specify my problem well enough in a short phrase. Can you guys explain what kind of method should I use and explain how to use it?
HTML:
<div class="login-page">
<div class="form">
<form class="register-form" method="POST">
<input type="text" name="nick" placeholder="username"/>
<input type="password" name="password1" placeholder="password"/>
<input type="password" name="repassword" placeholder="repeat password"/>
<input type="text" name="email" placeholder="e-mail adress"/>
<button>Create</button>
<p class="message">Already have an account? Log in!</p>
</form>
<form class="login-form" method="POST" action="login.php">
<input type="text" name="login" placeholder="username"/>
<input type="password" name="password" placeholder="password"/>
<button>log in</button>
<p class="message">Don't have an account yet? <a id="createacc" href="#">Sign up!</a></p>
</form>
JS:
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow"});
I want the website to remember which form you were filling before the page reloaded instead of always showing the default one (which is login form).
EDIT: In case anyone wondering. Yes, I did create similiar post about this yesterday but I realised that I didn't explain this well enough. Hope this goes through well.
You could make use of sessionStorage, a similar mechanism to cookies that persist only for the current session. When switching the visibility of your forms, set accordingly which one is also shown:
window.sessionStorage.setItem('lastOpenedForm', 'register');
And once the page loads again, fetch the value from there and display that form:
window.sessionStorage.getItem('lastOpenedForm');
Adapted code in snippet below:
var lastOpenedForm = window.sessionStorage.getItem("lastOpenedForm");
// By default show login form; check if we should show register and toggle visibilities
if (lastOpenedForm === "register-form") {
console.log('last opened form was register form');
$(".form form").toggleClass("active-form");
$(".login-page").toggleClass("bigger");
}
$(".message a").click(function() {
$(".form form").toggleClass("active-form");
var activeForm = $('.active-form').eq(0).attr('id');
window.sessionStorage.setItem('lastOpenedForm', activeForm);
console.log('last active form is ' + activeForm);
$(".login-page").toggleClass("bigger");
});
// $("#createacc").click(function() {
// window.sessionStorage.setItem("lastOpenedForm", "register-form");
// });
.login-page {
width: 600px;
height: 290px;
background: #333333;
border-radius: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5), 0 10px 10px 0 rgba(0, 0, 0, 0.24);
transition: all 1s;
}
.login-page.bigger {
height: 420px;
}
.form {
position: relative;
max-width: 360px;
margin: auto;
padding: 45px;
text-align: center;
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
border-radius: 5px;
}
.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #666666;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
cursor: pointer;
border-radius: 5px;
}
.form button:hover,
.form button:active,
.form button:focus {
background: #808080;
}
.form .message {
margin: 15px 0 0;
color: white;
font-size: 16px;
}
.form .message a {
color: #1a8cff;
text-decoration: none;
}
.form form {
/* display: none; */
visibility: hidden;
opacity: 0;
height: 0;
transition: 0.5s easy-in-out all;
}
.form .active-form {
visibility: visible;
opacity: 1;
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="login-page">
<div class="form">
<form id="register-form" method="POST">
<input type="text" name="nick" placeholder="username" />
<input type="password" name="password1" placeholder="password" />
<input type="password" name="repassword" placeholder="repeat password" />
<input type="text" name="email" placeholder="e-mail adress" />
<button>Create</button>
<p class="message">Already have an account? Log in!</p>
</form>
<form id="login-form" method="POST" class="active-form" action="login.php">
<input type="text" name="login" placeholder="username" />
<input type="password" name="password" placeholder="password" />
<button>log in</button>
<p class="message">Don't have an account yet? <a id="createacc" href="#">Sign up!</a></p>
</form>
</div>
Also available in this codepen.
If you're relying on JavaScript then you have a few possible routes.
Use localStorage to set and get the state. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Use a cookie to set and get the state. https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
Use a query string parameter as part of your url and use the Location api to get it. https://developer.mozilla.org/en-US/docs/Web/API/Location
Javascript has no way of remembering state so you must make use of a strategy such as the above. Personally I would opt for localStorage as it has a nice simple API.
You can use localStorage to store the state in your browser.
<div class="login-page">
<div class="form">
<form class="register-form" method="POST" id="register">
<input type="text" name="nick" placeholder="username"/>
<input type="password" name="password1" placeholder="password"/>
<input type="password" name="repassword" placeholder="repeat password"/>
<input type="text" name="email" placeholder="e-mail adress"/>
<button>Create</button>
<p class="message">Already have an account? Log in!</p>
</form>
<form class="login-form" method="POST" action="login.php" id="login">
<input type="text" name="login" placeholder="username"/>
<input type="password" name="password" placeholder="password"/>
<button>log in</button>
<p class="message">Don't have an account yet? <a id="createacc" href="#">Sign up!</a></p>
</form>
var fo;
$(document).ready(function(){
console.log(localStorage.getItem('form'))
$('form').click(function(){fo=$(this).attr('id');
localStorage.setItem('form',fo);
})
})
Working fiddle
You might consider using a URL fragment at the end of your form action attribute--e.g. <form action="example.com/#register">.
URL fragments are typically used to jump to different sections on a page. So in this case, they're probably more semantically meaningful than other options like session storage, cookies, or query strings.
You just need to listen to the document's load event to determine which form is being targeted. Something like this:
$(function () {
if (window.location.hash == "register") {
// show registration form here
}
});
Related
I am working on a system that makes use of a form to enter some data into a database. The system works as expected except for an issue with the display of the form after it has been submitted. When the form is submitted the page reloads and will show the info submitted as placeholder text inside of the form fields, and the "Save Changes" button will display as "Changes Saved!" for a few seconds. However, some of the input fields width property gets altered as well. Specifically my half-width form elements.
The width for these elements is defined as width: calc(50% - 24px), which is 265px. Additionally, there is a 5px padding and 2px border for these elements. This comes out to a total width of 279px, as expected. However, when the form is submitted and the page is reloaded the total width of the element comes out as 265px, retaining the 5px padding and 2px border, but dropping the internal width to 251px. Nowhere in my code is there anything that changes the width ever, and checking with dev tools shows that the width, padding, and border I defined are still there. This has the rather annoying effect of shifting both elements over after the form is submitted. Navigating to another page and back resolves the issue.
I have tried using !important and have checked over all of the code (JavaScript) echoed out from PHP when the submission is successful that interacts with the form in a capacity for changing things, and nothing should have this impact. I only change the color and text of the submit button.
Any help would be greatly appreciated!
Edit 1:
The code below is a snippet of the entire form, excluding the PHP. I have modified the code so that clicking save changes does not submit the form but will show the change for the submit button, as otherwise submitting makes the form vanish. The error does not occur in the snippet of code however as a result of not "reloading" the page.
function success() {
var button = document.getElementById('clientInfoBtn');
var normalColor = button.style.backgroundColor;
var normalValue = button.value;
button.style.backgroundColor = '#33cc33';
button.value = 'Changes Saved!';
setTimeout(function() {
button.style.backgroundColor = normalColor;
button.value = normalValue;
}, 3000);
return false;
}
.standardFormBox {
margin-bottom: 20px;
width: 600px;
}
.standardFormBoxInner {
border: 1px solid silver;
padding: 10px;
display: flex;
flex-wrap: wrap;
}
.standardFormHeading {
font-family: "Helvetica";
font-size: 16pt;
color: white;
background-color: #1975FF;
margin: 0;
padding: 10px;
}
.standardFormBtn {
color: white;
font-size: 14pt;
background-color: #1975FF;
border: none;
padding: 10px 10px;
margin-bottom: 15px;
}
.standardFormBtn:hover {
cursor: pointer;
background-color: #0052cc;
}
.standardFormInput {
font-size: 14pt;
font-family: "Trebuchet MS";
margin-bottom: 10px;
padding: 5px;
}
.sfiMultiLabel {
font-size: 14pt;
font-family: "Trebuchet MS";
}
.sfiHalf {
width: calc(50% - 24px);
}
.sfiText {
font-size: 14pt;
margin: 0;
}
.sfiTextHalf {
width: calc(50% - 10px);
}
.sfiTextFull {
width: 100%;
}
.sfiFull {
width: 100%;
}
.sfiLeft {
margin-right: 20px;
}
<form name="accountInfoForm" method="POST">
<div class="standardFormBox">
<p class="standardFormHeading">Business Billing Information</p>
<div class="standardFormBoxInner">
<p class="sfiText sfiTextHalf">Business Name</p>
<input type="text" name="cBusiness" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiTextHalf">Name On Bank Account</p>
<input type="text" name="cName" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiTextHalf">Billing Email</p>
<input type="email" name="cEmail" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiTextHalf">Street Address</p>
<input type="text" name="cStreet" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiTextHalf">City</p>
<input type="text" name="cCity" placeholder="" class="standardFormInput sfiFull">
<p class="sfiText sfiLeft sfiTextHalf">State</p>
<p class="sfiText sfiTextHalf">ZIP</p>
<input type="text" name="cState" placeholder="" class="standardFormInput sfiLeft sfiHalf">
<input type="text" name="cZip" placeholder="" class="standardFormInput sfiHalf">
<p class="sfiText sfiTextHalf">Phone Number</p>
<input type="text" name="cPhone" placeholder="" class="standardFormInput sfiFull">
</div>
</div>
<input type="submit" name="clientChangeInfo" value="Save Changes" class="standardFormBtn" id="clientInfoBtn" onclick="return success()">
</form>
This has been a nightmare for me. I can not figure out how to simply change the form code that pops up after 5 seconds. When I do change it, the colors, the fonts everything changes on me. I've tried changing 1 thing at time and at one point I got close but I couldn't change the color of the button and in the explore browser the format was all out of wack... If any one can help me, that would be amazing!
original code
$(document).ready(function ()
(function ()
{
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(4800).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(5000).fadeIn(400);
//Hide dialouge and background when the user clicks the close button
$("#btnClose").click(function (e)
{
HideDialog();
e.preventDefault();
});
});
//Controls how the modal popup is closed with the close button
function HideDialog()
{
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
.instructions {
text-align:center;
font-size:20px;
margin: 15vh;
}
/* //////////////////////////////////////////////////////////////////////////////////////////////
// Default Modal Styles //
////////////////////////////////////////////////////////////////////////////////////////////// */
/* This is the background overlay */
.backgroundOverlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .85;
filter: alpha(opacity=85);
-moz-opacity: .85;
z-index: 101;
display: none;
}
/* This is the Popup Window */
.delayedPopupWindow {
display: none;
position: fixed;
width: auto;
max-width: 480px;
height: 310px;
top: 50%;
left: 50%;
margin-left: -260px;
margin-top: -180px;
background-color: #efefef;
border: 2px solid #333;
z-index: 102;
padding: 10px 20px;
}
/* This is the closing button */
#btnClose {
width:100%;
display: block;
text-align: right;
text-decoration: none;
color: #BCBCBC;
}
/* This is the closing button hover state */
#btnClose:hover {
color: #c90c12;
}
/* This is the description headline and paragraph for the form */
#delayedPopup > div.formDescription {
float: left;
display: block;
width: 44%;
padding: 1% 3%;
font-size: 18px;
color: #666;
clear: left;
}
/* This is the styling for the form's headline */
#delayedPopup > div.formDescription h2 {
color: #444444;
font-size: 36px;
line-height: 40px;
}
/*
////////// MailChimp Signup Form //////////////////////////////
*/
/* This is the signup form body */
#delayedPopup #mc_embed_signup {
float: left;
width: 47%;
padding: 1%;
display: block;
font-size: 16px;
color: #666;
margin-left: 1%;
}
/* This is the styling for the signup form inputs */
#delayedPopup #mc-embedded-subscribe-form input {
width: 95%;
height: 30px;
font-size: 18px;
padding: 3px;
margin-bottom: 5px;
}
/* This is the styling for the signup form inputs when they are being hovered with the mouse */
#delayedPopup #mc-embedded-subscribe-form input:hover {
border:solid 2px #40c348;
box-shadow: 0 1px 3px #AAAAAA;
}
/* This is the styling for the signup form inputs when they are focused */
#delayedPopup #mc-embedded-subscribe-form input:focus {
border:solid 2px #40c348;
box-shadow: none;
}
/* This is the styling for the signup form submit button */
#delayedPopup #mc-embedded-subscribe {
width: 100%!important;
height: 40px!important;
margin: 10px auto 0 auto;
background: #5D9E62;
border: none;
color: #fff;
}
/* This is the styling for the signup form submit button hover state */
#delayedPopup #mc-embedded-subscribe:hover {
background: #40c348;
color: #fff;
box-shadow:none!important;
cursor: pointer;
}
<div class="instructions">Wait for 5 seconds</div>
<div id="bkgOverlay" class="backgroundOverlay"></div>
<div id="delayedPopup" class="delayedPopupWindow">
<!-- This is the close button -->
[ X ]
<!-- This is the left side of the popup for the description -->
<div class="formDescription">
<h2>Sign Up and <span style="color: #40c348; font-weight: bold;">Save $25!</span></h2>
<p>Sign up for our Deal Alerts and save
$25 Off of your first order of $50 or more!</p>
</div>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div class="mc-field-group">
<label for="mce-FNAME">First Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address
<span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_2aabb98e55b83ba9d3bd551f5_e6c08b53b4" value="">
</div>
<div class="clear">
<input type="submit" value="Save Money!" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</form>
</div>
<!-- End MailChimp Signup Form -->
</div>
THIS IS THE CODE I WOULD LIKE TO CHANGE THE FORM TO -
<button type="button" button-data-id="1" id="lead_button_form" div class="form_box" >
Enter A Valid Name and Email
<form class="form-horizontal validate formdetails show" name="optin" id="optin" form action="" accept-charset="utf-8" method="post">
<!-- Name -->
<input type="text" name="name" placeholder="Name" /><br/>
<!-- Email field (required) -->
<input type="text" name="email" placeholder="Email" /><br/>
<!-- Campaign token -->
<!-- Get the token at: https://app.getresponse.com/campaign_list.html -->
<input type="hidden" name="campaign_token" value="G" />
<!-- Thank you page (optional) -->
<input type="hidden" name="thankyou_url" value="https://reviewtheinside.com/Easy-eCash-Review-and-Bonuses.htm"/>
<!-- Add subscriber to the follow-up sequence with a specified day (optional) -->
<input type="hidden" name="start_day" value="0" />
<!-- Forward form data to your page (optional) -->
<input type="hidden" name="forward_data" value="" />
<!-- Subscriber button -->
<input type="submit" button type="button" button-data-id="1" id="lead_button" value="SUBMIT"/>
<div class="clearfix"></div>
<div class="mbr-row">
<div class="inner-addon right-addon"><p id="smtp-error"></p></div>
</div>
</form>
are you sure you are calling the function properly
(function ()
{
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(4800).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(5000).fadeIn(400);
//Hide dialouge and background when the user clicks the close button
$("#btnClose").click(function (e)
{
HideDialog();
e.preventDefault();
});
})(); //call the function
//Controls how the modal popup is closed with the close button
function HideDialog()
{
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
I have a form which I am trying to validate with JS. Problem is for the life of me I can’t get it to work.
Can anybody tell me where I’m going wrong? In the example below I am just rying to validate the Email field.
Regards,
Marc
function validateEmail() {
var x = document.forms["myForm"]["Email"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}
#contact-area {
width: 500px;
max-height:200px;
margin-top: 0px;
float:left;
}
#contact-area input, #contact-area textarea {
padding: 3px;
width: 520px;
font-family:'Lato', sans-serif;
font-size: 14px;
margin: 0px 0px 0px 0px;
border: 1px solid #ccc;
}
#contact-area textarea {
height: 90px;
}
#contact-area textarea:focus, #contact-area input:focus {
border: 1px solid #ffc423;
}
#contact-area input.submit-button {
width: 100px;
float: left;
background-color:#ffc423;
color:black;
margin-top:13px;
cursor:pointer;
}
#contact-area input.submit-button:hover {
background-color:#002b51;
color:white;
}
label {
float:left;
text-align:left;
margin-right:15px;
width:100px;
padding-top:10px;
padding-bottom:5px;
font-size:15px;
color:#ffc423;
font-weight:700;
}
textarea {
resize: none;
}
<div id="contact-area">
<form method="post" action="contactengine.php" name="myForm" onsubmit="return contact-validation()">
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name">
<label for="Company">Company:</label>
<input type="text" name="Company" id="Company">
<label for="Email">Email:</label>
<input type="email" name="Email" id="Email">
<label for="Message">Message:</label>
<textarea name="Message" rows="20" cols="20" id="Message" title="Your message | max 300 characters"></textarea>
<input type="submit" name="submit" value="Submit" class="submit-button">
</form>
<div style="clear: both;"></div>
</div>
This is wrong:
onsubmit="return contact-validation()">
You have no JavaScript method called contact-validation().
Even if you did, dashes are not valid in function names.
Try this instead:
onsubmit="return validateEmail()">
Change
x = document.forms["myForm"]["Email"].value;
to
x = document.getElementById("Email").value;
It targets the element directly by its id so if the DOM structure changes your JavaScript will still work. Also, the validation is checking the Email input, but the error message is for Name. You may want to leverage HTML5 validation with the required attribute as well.
You should also avoid the onsubmit attribute as it tightly couples the HTML and JavaScript. This can be achieved by the following:
<!-- use a button instead of an input for buttons, it is more semantically correct -->
<button id="btn-submit">Submit</button>
<script>
document.getElementById("btn-submit").addEventListener("click", function(evt){
evt.preventDefault();
if (validateEmail()) {
document.getElementById("myForm").submit();
}
});
</script>
Remove the onsubmit= from the form tag if you use this approach.
I have this huge form I'm making and there's an also huge problem with it.
In some "areas". only the last input works.
For example here:
[...]
<div class="main_data">
<span class="info">main data</span><br>
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Email" required>
<input type="text" name="website" placeholder="Website" required>
<input type="text" name="telephone" placeholder="Telephone" required>
<input type="text" name="address" placeholder="Address" required>
<input type="text" name="city" placeholder="City" required>
<input type="text" name="country" placeholder="Country" required>
</div>
[...]
Every input appears to be disabled(?) and I can only write on Country.
This also happens on some other areas of the form, for example here:
[...]
<div class="detailed_info">
<span class="info">detailed info</span>
<input type="text" name="activity_areas" placeholder="Activity Areas" required>
<input type="text" name="company_valences" placeholder="Description of Company Valences" required>
<input type="text" name="where_operates" placeholder="Markets / Countries where it operates" required>
<input type="text" name="where_operates" placeholder="Annual Turnover (Value EUR)" required>
[...]
I can only write on Annual Turnover.
I tried switching z-index's to check out if it was something over it but I didn't find anything wrong.
I'll paste the css of only the first part, I belive if I find what's happening on the first one I'll be able to correct the second.
.main_data{
width: 100%;
padding: 30px 0;
background: rgba(238, 238, 238, 0.9);
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
text-align: center;
}
.main_data .info{
display: block;
width: 100%;
margin: 0 0 10px 0;
font-size: 20px;
font-family: 'Futura-Light-Italic', sans-serif;
}
.main_data input{
border: 0;
padding: 5px 0;
margin: 0;
width: 80%;
background: #FFF;
color: #000;
text-align: center;
font-family: 'Futura', sans-serif;
}
.main_data input:focus{
border: 0;
}
I'm still afraid that it might not have nothing to do with the form so I'll leave you guys a link to the page so can try inspecting some elements if you want.
To bring up the form you click Join the City as One of Us: link
I'm really needing help as this form must be ready today.
Please ask questions if you don't understand something! I will obviously try to help you helping me.
EDIT: I'm using Google Chrome
Change the line-height on .oneofus.
.oneofus {
width: 88%;
position: absolute;
z-index: 12;
top: 0;
line-height: 1px; /* this is the problem remove it or make it bigger (74px or more) */
}
Set the position of the inputs to relative..
.main_data input {
position: relative;
}
Im building an HTML5 Phonegap app for iOS. This submit button is a normal html input submit like this:
<input type="text" autocorrect="off" autocapitalize="off" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<input class="signin" type="submit" value="Sign in">
.signin {
padding: inherit;
background: #006ad9;
width: 243px;
height: 50px;
border: 0px;
margin-top: 3px;
color: #fff;
font-size: 1.2em;
}
This si how it looks on the iOS similator:
Even those input text's are rounded, my CSS has no such style for it!
Why is this happening?
Try
input[type=submit] {
-webkit-appearance: none;
border-radius: 0;
}
Put this at the top of the css and then set styles for your classes