I have an HTML page responsible for creating new users on my website.
After creating the user, the website must show a pop-up saying the user was created successfully.
Everything works fine, except that I had to configure an "onsubmit= return false" because I didn't find any other way to display the pop-up without the page redirecting immediately after the submission.
Now the form doesn't save the new users that are being created, so I'm trying to change the form value to true...
How can one do that? returning true after the pop-up closes.
Here is my code so far-
document.getElementById("accountForm").addEventListener("submit", openPopup);
let popup = document.getElementById("popup");
let blur = document.getElementById("blur")
function openPopup() {
blur.classList.toggle('active')
popup.classList.add("open-popup");
}
function closePopup() {
document.querySelector('.active').classList.remove('active')
popup.classList.remove("open-popup");
document.getElementById("accountForm").setAttribute("onsubmit", "true");
window.location.replace("/login/");
}
/* General Styling */
* {
box-sizing: border-box;
}
body {
background: #f7f7f7;
margin: 0px;
overflow: scale;
}
#blur {
position: relative;
background: white;
margin: auto;
width: 70vw;
height: 120vh;
}
.text {
position: relative;
font-family: Arial;
top: 5vh;
left: 10vw;
color: black;
}
p[id="create_account"] {
color: #b3b3b6;
font-size: 1vw;
}
p {
font-size: 0.8vw;
color: dimgray;
}
/* Pop-up Styling*/
h2 {
position: relative;
top: 12vh;
margin: auto;
font-size: 2vw;
text-align: center;
color: #4897d8;
}
h4 {
position: relative;
top: 15vh;
margin: auto;
color: lightslategray;
font-size: 1vw;
text-align: center;
}
button[id="ok"] {
position: relative;
top: 23vh;
margin: 0 auto;
display: block;
width: 20vw;
height: 10vh;
background-color: #4897d8;
border: white;
color: white;
cursor: pointer;
font-size: 1.1vw;
}
.close {
position: relative;
top: -26.5vh;
left: 34vw;
cursor: pointer;
transform: translate(0%, -50%);
color: lightslategrey;
font-size: 1.5vw;
}
.popup-container {
visibility: hidden;
position: absolute;
margin-left: 30vw;
margin-top: 10vw;
height: 30vw;
width: 40vw;
font-family: Arial;
color: white;
background: white;
border-radius: 3px;
z-index: 1;
animation: ease-in;
}
.open-popup {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 500ms;
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.container#blur.active {
filter: blur(20px);
}
.popup.active {
filter: blur(20px);
}
/* Create Account Styling */
input {
box-sizing: border-box;
border: 2px solid lightgray;
border-radius: 5px;
padding: 0.5vw;
margin-bottom: 0.5vw;
width: 20vw;
height: 5vh;
}
input[type=text] {
color: #4897d8;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: lightgray;
opacity: 1;
/* Firefox */
}
input[type="submit"] {
width: 19.5vw;
height: 6vh;
background-color: #4897d8;
color: white;
border-radius: 5px;
font-size: 1.1vw;
cursor: pointer;
border: none;
}
<body>
<div class="popup-container" id="popup">
<img src="../../static/images/green_tick.png" alt="user created" style="position:relative; margin: 0 auto; top: 7vh; display: block; width:5vw;height:10vh;">
<h2>Account Creation Succesfull</h2>
<h4>Thanks for registering with job portal. Your account <br>has been created.</h4>
<button type="button" id="ok" onclick="closePopup()">Start Recruiting</button>
<ul class="close" onclick="closePopup()">X</ul>
</div>
<div class="container" id="blur">
<div class="text">
<h1>Create Account
<link rel="stylesheet" href="{% static 'css/recruiters/create_account.css' %}">
</h1>
<p id="create_account">Create an account and let us find the best sales<br>talent that satisfy your company's requirements</p>
<form action="create/created_user" onsubmit="return false" method="post" id="accountForm">
<form onsubmit="return false" method="post" id="accountForm">
<p>Recruiter Name*</p>
<input type="text" name="fullname" placeholder="Full Name" required>
<p>Phone Number</p>
<input type="text" name="phone" placeholder="Phone Number">
<p>Email*</p>
<input type="text" name="email" placeholder="Enter Email Address" required>
<p>Location</p>
<input type="text" name="location" placeholder="Address">
<p>Company Name</p>
<input type="text" name="company" placeholder="Company Name">
<p>Password*</p>
<input type="text" name="passwd" placeholder="Password" required>
<br><br>
<input type="submit" value="Create Account">
</form>
</div>
</div>
</body>
You have invalid HTML, nested form tags with duplicate IDs
You need to submit the form, but if you you actually submit the form, why not show the popup when you return
Here is how to stop and submit when the form is closed
const form = document.getElementById("accountForm")
form.addEventListener("submit", openPopup);
let popup = document.getElementById("popup");
let blur = document.getElementById("blur")
function openPopup(e) {
e.preventDefault(); // stop submission
blur.classList.toggle('active')
popup.classList.add("open-popup");
}
function closePopup() {
document.querySelector('.active').classList.remove('active')
popup.classList.remove("open-popup");
form.submit();
}
/* General Styling */
* {
box-sizing: border-box;
}
body {
background: #f7f7f7;
margin: 0px;
overflow: scale;
}
#blur {
position: relative;
background: white;
margin: auto;
width: 70vw;
height: 120vh;
}
.text {
position: relative;
font-family: Arial;
top: 5vh;
left: 10vw;
color: black;
}
p[id="create_account"] {
color: #b3b3b6;
font-size: 1vw;
}
p {
font-size: 0.8vw;
color: dimgray;
}
/* Pop-up Styling*/
h2 {
position: relative;
top: 12vh;
margin: auto;
font-size: 2vw;
text-align: center;
color: #4897d8;
}
h4 {
position: relative;
top: 15vh;
margin: auto;
color: lightslategray;
font-size: 1vw;
text-align: center;
}
button[id="ok"] {
position: relative;
top: 23vh;
margin: 0 auto;
display: block;
width: 20vw;
height: 10vh;
background-color: #4897d8;
border: white;
color: white;
cursor: pointer;
font-size: 1.1vw;
}
.close {
position: relative;
top: -26.5vh;
left: 34vw;
cursor: pointer;
transform: translate(0%, -50%);
color: lightslategrey;
font-size: 1.5vw;
}
.popup-container {
visibility: hidden;
position: absolute;
margin-left: 30vw;
margin-top: 10vw;
height: 30vw;
width: 40vw;
font-family: Arial;
color: white;
background: white;
border-radius: 3px;
z-index: 1;
animation: ease-in;
}
.open-popup {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 500ms;
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.container#blur.active {
filter: blur(20px);
}
.popup.active {
filter: blur(20px);
}
/* Create Account Styling */
input {
box-sizing: border-box;
border: 2px solid lightgray;
border-radius: 5px;
padding: 0.5vw;
margin-bottom: 0.5vw;
width: 20vw;
height: 5vh;
}
input[type=text] {
color: #4897d8;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: lightgray;
opacity: 1;
/* Firefox */
}
input[type="submit"] {
width: 19.5vw;
height: 6vh;
background-color: #4897d8;
color: white;
border-radius: 5px;
font-size: 1.1vw;
cursor: pointer;
border: none;
}
<body>
<div class="popup-container" id="popup">
<img src="../../static/images/green_tick.png" alt="user created" style="position:relative; margin: 0 auto; top: 7vh; display: block; width:5vw;height:10vh;">
<h2>Account Creation Succesfull</h2>
<h4>Thanks for registering with job portal. Your account <br>has been created.</h4>
<button type="button" id="ok" onclick="closePopup()">Start Recruiting</button>
<ul class="close" onclick="closePopup()">X</ul>
</div>
<div class="container" id="blur">
<div class="text">
<h1>Create Account
<link rel="stylesheet" href="{% static 'css/recruiters/create_account.css' %}">
</h1>
<p id="create_account">Create an account and let us find the best sales<br>talent that satisfy your company's requirements</p>
<form action="create/created_user" method="post" id="accountForm">
<p>Recruiter Name*</p>
<input type="text" name="fullname" placeholder="Full Name" required>
<p>Phone Number</p>
<input type="text" name="phone" placeholder="Phone Number">
<p>Email*</p>
<input type="text" name="email" placeholder="Enter Email Address" required>
<p>Location</p>
<input type="text" name="location" placeholder="Address">
<p>Company Name</p>
<input type="text" name="company" placeholder="Company Name">
<p>Password*</p>
<input type="text" name="passwd" placeholder="Password" required>
<br><br>
<input type="submit" value="Create Account">
</form>
</div>
</div>
</body>
Finally, I found a solution.
Used an event listener on the submit button to prevent the default course of action, then showed the pop-up.
Afterward, removed the pop-up and told the form what action needs to be done and to submit.
This is how it looks!
<script>
const form = document.getElementById("accountForm");
let popup = document.getElementById("popup");
let blur = document.getElementById("blur")
function closePopup(){
document.querySelector('.active').classList.remove('active')
popup.classList.remove("open-popup");
form.action = "/create/created_user";
form.submit()
}
document.getElementById("accountForm").addEventListener("submit", function(event){
event.preventDefault();
blur.classList.toggle('active');
popup.classList.add("open-popup");
});
</script>
# POPUP HTML CONFIGURATION
<div class="popup-container" id="popup">
<img src="../../static/images/green_tick.png" alt="user created" style="position:relative; margin: 0 auto; top: 7vh; display: block; width:5vw;height:10vh;">
<h2>Account Creation Succesfull</h2>
<h4>Thanks for registering with the job portal. Your account <br>has been created.</h4>
<button type="button" id="ok" onclick="closePopup()">Start Recruiting</button>
<ul class="close" onclick="closePopup()">X</ul>
</div>
#FORM CONFIGURATION
<form method="post" id="accountForm">
<p>Recruiter Name*</p>
<input type="text" name="fullname" placeholder="Full Name" required>
<p>Phone Number</p>
<input type="text" name="phone" placeholder="Phone Number">
<p>Email*</p>
<input type="text" name="email" placeholder="Enter Email Address" required>
<p>Location</p>
<input type="text" name="location" placeholder="Address">
<p>Company Name</p>
<input type="text" name="company" placeholder="Company Name">
<p>Password*</p>
<input type="text" name="passwd" placeholder="Password" required>
<br><br>
<input type="submit" value="Create Account">
</form>
Related
I have a HTML JS form for a contact form on my website, but I want it to redirect to a thank your page after the submit button is clicked. I can do that on it's own, but it happens every time I click the button, but I only want it to happen when the required areas are filled in.
I have tried an action tag on the form btw, it doesn't work for some reason.
Code (full screen it too see the button) :
document.getElementById("submit").onclick = function () {
location.href = "/contactty.html";
};
.cntct-bg {
background-color: #4158D0;
background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
overflow: hidden;
}
.contact-cont {
position: absolute;
top: 6%;
width: 100%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
form {
background: #ffffff;
display: flex;
flex-direction: column;
padding: 2vw 4vw;
width: 90%;
max-width: 600px;
border-radius: 10px;
z-index: 1;
}
form h1 {
color: #555555;
font-weight: 800;
margin-bottom: 20px;
font-family: var(--black);
z-index: 1;
}
form input,
form textarea {
border: 0;
margin: 10px 0;
padding: 20px;
outline: none;
background: #f5f5f5;
font-size: 16px;
font-family: var(--medium);
z-index: 1;
}
form textarea {
min-width: 93.33%;
max-width: 93.33%;
min-height: 80px;
z-index: 1;
}
form button {
padding: 15px;
background: #ff5361;
color: #ffffff;
font-size: 18px;
border: 0;
outline: none;
cursor: pointer;
width: 150px;
margin: 20px auto 0;
border-radius: 30px;
z-index: 1;
box-shadow: 0px 8px 0px #a83740;
}
.form button:active {
box-shadow: none;
transform: translateY(8px);
}
<body class="cntct-bg">
<div class="contact-cont">
<form action="/contactty.html" id="contact-form">
<h1>Get in touch</h1>
<input type="hidden" name="contact_number">
<input type="text" name="user_name" placeholder="Your Name" required>
<input type="email" name="user_email" placeholder="Your Email" required>
<textarea name="message" placeholder="Whats on your mind?" required></textarea>
<div class="tscheck">
<input type="checkbox" id="tsy" name="tsy" value="agreed" required>
<label for="tsy">Accept the <span>terms of service</var></span></label>
</div>
<button type="submit" id="submit" name="submit" onclick="submit()">Send</button>
</form>
</div>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</body>
checkAllInput() is validatind data.
I have selected all inputs and then looping through them and validating if (input.value == null || input.value == "") weather it's empty or not.
document.getElementById("submit").onclick = function() {
if (checkAllInput()) {
location.href = "/contactty.html";
}
};
function checkAllInput() {
const inputs = document.querySelectorAll("input");
inpputs.forEach(input => {
if (input.value == null || input.value == "") {
alert("please enter all data");
return false;
} else {
return true;
}
})
}
.cntct-bg {
background-color: #4158D0;
background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
overflow: scroll;
}
.contact-cont {
width: 100%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
overflow: scroll;
}
form {
background: #ffffff;
display: flex;
flex-direction: column;
padding: 2vw 4vw;
width: 90%;
max-width: 600px;
border-radius: 10px;
z-index: 1;
}
form h1 {
color: #555555;
font-weight: 800;
margin-bottom: 20px;
font-family: var(--black);
z-index: 1;
}
form input,
form textarea {
border: 0;
margin: 10px 0;
padding: 20px;
outline: none;
background: #f5f5f5;
font-size: 16px;
font-family: var(--medium);
z-index: 1;
}
form textarea {
min-width: 93.33%;
max-width: 93.33%;
min-height: 80px;
z-index: 1;
}
form button {
padding: 15px;
background: #ff5361;
color: #ffffff;
font-size: 18px;
border: 0;
outline: none;
cursor: pointer;
width: 150px;
margin: 20px auto 0;
border-radius: 30px;
z-index: 1;
box-shadow: 0px 8px 0px #a83740;
}
.form button:active {
box-shadow: none;
transform: translateY(8px);
}
<body class="cntct-bg">
<div class="contact-cont">
<form action="/contactty.html" id="contact-form">
<h1>Get in touch</h1>
<input type="hidden" name="contact_number">
<input type="text" name="user_name" placeholder="Your Name" required>
<input type="email" name="user_email" placeholder="Your Email" required>
<textarea name="message" placeholder="Whats on your mind?" required></textarea>
<div class="tscheck">
<input type="checkbox" id="tsy" name="tsy" value="agreed" required>
<label for="tsy">Accept the <span>terms of service</var></span></label>
</div>
<button type="submit" id="submit" name="submit" onclick="submit()">Send</button>
</form>
</div>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</body>
I hope it's work for you
document.getElementById("submit").onclick = function () {
var count = 0;
var len = document.querySelectorAll('[required]').forEach(current=> {
if(current.value == ''){ count = count + 1;}
});
if(count == 0){
window.location.href = "/contactty.html";
}
};
.cntct-bg {
background-color: #4158D0;
background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
overflow: hidden;
}
.contact-cont {
position: absolute;
top: 6%;
width: 100%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
form {
background: #ffffff;
display: flex;
flex-direction: column;
padding: 2vw 4vw;
width: 90%;
max-width: 600px;
border-radius: 10px;
z-index: 1;
}
form h1 {
color: #555555;
font-weight: 800;
margin-bottom: 20px;
font-family: var(--black);
z-index: 1;
}
form input,
form textarea {
border: 0;
margin: 10px 0;
padding: 20px;
outline: none;
background: #f5f5f5;
font-size: 16px;
font-family: var(--medium);
z-index: 1;
}
form textarea {
min-width: 93.33%;
max-width: 93.33%;
min-height: 80px;
z-index: 1;
}
form button {
padding: 15px;
background: #ff5361;
color: #ffffff;
font-size: 18px;
border: 0;
outline: none;
cursor: pointer;
width: 150px;
margin: 20px auto 0;
border-radius: 30px;
z-index: 1;
box-shadow: 0px 8px 0px #a83740;
}
.form button:active {
box-shadow: none;
transform: translateY(8px);
}
<body class="cntct-bg">
<div class="contact-cont">
<form action="/contactty.html" id="contact-form">
<h1>Get in touch</h1>
<input type="hidden" name="contact_number">
<input type="text" name="user_name" placeholder="Your Name" required>
<input type="email" name="user_email" placeholder="Your Email" required>
<textarea name="message" placeholder="Whats on your mind?" required></textarea>
<div class="tscheck">
<input type="checkbox" id="tsy" name="tsy" value="agreed" required>
<label for="tsy">Accept the <span>terms of service</var></span></label>
</div>
<button type="submit" id="submit" name="submit" onclick="submit()">Send</button>
</form>
</div>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</body>
I hope using java script function will help you out. For the all kinds of validation we can use JQuery to make it smoother and faster(please find out more from the link
https://stackoverflow.com/questions/15060292/a-simple-jquery-form-validation-script#:~:text=you%20can%20use%20jquery%20validator,form. )
Hope this will help you :-).
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
<form name="myForm" action="action_to_be_taken" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
var mylogin = document.getElementById('login'); //form id for login page
var myRegister = document.getElementById('register'); //form id for register page
var mybtn = document.getElementById('btn'); //btn id to perform toggle option
login = () => {
mylogin.style.left = '50px';
myRegister.style.left = '500px';
mybtn.style.left = '0px';
}
register = () => {
mylogin.style.left = '-450px';
myRegister.style.left = '50px';
mybtn.style.left = '110px';
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
/*to set background container*/
.container {
height: 115%;
width: 100%;
background-image: url('../Images/conifers.jpg');
position: absolute;
background-position: center;
}
/*to create white box*/
.form_container {
width: 380px;
height: 480px;
position: relative;
margin: 6% auto;
background: whitesmoke;
padding: 5px;
overflow: hidden;
}
/*Container to create button on for the shadow effect*/
.button_group {
width: 220px;
margin: 34px auto;
position: relative;
box-shadow: 0 0 8px 8px darkseagreen;
border-radius: 30px;
}
/*Button Styling*/
.toggle_btn {
padding: 10px 25px;
background: none;
border: 0;
outline: none;
position: relative;
cursor: pointer;
}
/*style for buttons to toggle*/
#btn {
top: 0;
left: 0;
position: absolute;
width: 110px;
height: 100%;
background: linear-gradient(to right, lightgreen, green);
border-radius: 30px;
transition: .5s;
}
/*icons background container*/
.media_icons {
margin: 30px auto;
text-align: center;
}
/*icons image style*/
.media_icons img {
width: 35px;
margin: 0 12px;
box-shadow: 0 0 10px 2px olivedrab;
cursor: pointer;
border-radius: 50%;
}
/*To style form*/
.form_group {
top: 180px;
position: absolute;
width: 280px;
transition: .5s;
}
/*for input type=text that is textbox*/
.input_area {
width: 100%;
padding: 10px 0;
margin: 5px 0;
border: 0;
border-bottom: 1px solid blue;
outline: none;
background: none;
}
.check_box {
margin: 30px 10px 30px 0;
}
span {
color: rgb(36, 21, 22);
font-size: 14px;
bottom: 65px;
}
.sub_btn {
width: 80%;
padding: 10px 30px;
cursor: pointer;
display: block;
margin: auto;
background: linear-gradient(to right, lightgreen, green);
border-radius: 30px;
border: 0;
outline: none;
}
#login {
left: 50px;
}
#register {
left: 500px;
}
<div class="container">
<div class="form_container">
<div class="button_group">
<div id="btn"></div>
<button type="button" class="toggle_btn" onclick="login()">LOGIN</button>
<button type="button" class="toggle_btn" onclick="register()">REGISTER</button>
</div>
<div class="media_icons">
<img src="~/Images/facebook.png" />
<img src="~/Images/twitter.png" />
<img src="~/Images/youtube.jpg" />
<img src="~/Images/instagram.png" />
</div>
<form id="login" class="form-group">
<input type="text" class="input_area" placeholder="UserName" required/>
<input type="password" class="input_area" placeholder="Password" required />
<input type="checkbox" class="check_box" /><span>Remenber Me</span>
<button type="submit" class="sub_btn">LOGIN</button>
</form>
<form id="register" class="form-group">
<input type="text" class="input_area" placeholder="UserName" required />
<input type="text" class="input_area" placeholder="Enter Email" required />
<input type="text" class="input_area" placeholder="Enter Password" required />
<input type="checkbox" class="check_box" />
<span>I agree with all the terms and conditions </span>
<button type="submit" class="sub_btn">REGISTER</button>
</form>
</div>
</div>
I am not able to find error.Toggle button does not work well.Login and Registration page appears one below the other.Please help me find the mistake.Toggle should work as login button to display login page and register button to display registration form.
I've changed the following code
#login {
left: 50px;
}
#register {
left: 500px;
}
with this
#login {
left: 50px;
position: relative;
}
#register {
left: 500px;
top: 150px;
position: absolute;
}
I gave #login position: relative; so it maintains the container height but now you can use left
I gave #register position: absulute; so you can place it where #login used to be on toggle
var mylogin = document.getElementById('login'); //form id for login page
var myRegister = document.getElementById('register'); //form id for register page
var mybtn = document.getElementById('btn'); //btn id to perform toggle option
login = () => {
mylogin.style.left = '50px';
myRegister.style.left = '500px';
mybtn.style.left = '0px';
}
register = () => {
mylogin.style.left = '-450px';
myRegister.style.left = '50px';
mybtn.style.left = '110px';
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
/*to set background container*/
.container {
height: 115%;
width: 100%;
background-image: url('../Images/conifers.jpg');
position: absolute;
background-position: center;
}
/*to create white box*/
.form_container {
width: 380px;
height: 480px;
position: relative;
margin: 6% auto;
background: whitesmoke;
padding: 5px;
overflow: hidden;
}
/*Container to create button on for the shadow effect*/
.button_group {
width: 220px;
margin: 34px auto;
position: relative;
box-shadow: 0 0 8px 8px darkseagreen;
border-radius: 30px;
}
/*Button Styling*/
.toggle_btn {
padding: 10px 25px;
background: none;
border: 0;
outline: none;
position: relative;
cursor: pointer;
}
/*style for buttons to toggle*/
#btn {
top: 0;
left: 0;
position: absolute;
width: 110px;
height: 100%;
background: linear-gradient(to right, lightgreen, green);
border-radius: 30px;
transition: .5s;
}
/*icons background container*/
.media_icons {
margin: 30px auto;
text-align: center;
}
/*icons image style*/
.media_icons img {
width: 35px;
margin: 0 12px;
box-shadow: 0 0 10px 2px olivedrab;
cursor: pointer;
border-radius: 50%;
}
/*To style form*/
.form_group {
top: 180px;
position: absolute;
width: 280px;
transition: .5s;
}
/*for input type=text that is textbox*/
.input_area {
width: 100%;
padding: 10px 0;
margin: 5px 0;
border: 0;
border-bottom: 1px solid blue;
outline: none;
background: none;
}
.check_box {
margin: 30px 10px 30px 0;
}
span {
color: rgb(36, 21, 22);
font-size: 14px;
bottom: 65px;
}
.sub_btn {
width: 80%;
padding: 10px 30px;
cursor: pointer;
display: block;
margin: auto;
background: linear-gradient(to right, lightgreen, green);
border-radius: 30px;
border: 0;
outline: none;
}
#login {
left: 50px;
position: relative;
}
#register {
left: 500px;
top: 150px;
position: absolute;
}
<div class="container">
<div class="form_container">
<div class="button_group">
<div id="btn"></div>
<button type="button" class="toggle_btn" onclick="login()">LOGIN</button>
<button type="button" class="toggle_btn" onclick="register()">REGISTER</button>
</div>
<div class="media_icons">
<img src="~/Images/facebook.png" />
<img src="~/Images/twitter.png" />
<img src="~/Images/youtube.jpg" />
<img src="~/Images/instagram.png" />
</div>
<form id="login" class="form-group">
<input type="text" class="input_area" placeholder="UserName" required />
<input type="password" class="input_area" placeholder="Password" required />
<input type="checkbox" class="check_box" /><span>Remenber Me</span>
<button type="submit" class="sub_btn">LOGIN</button>
</form>
<form id="register" class="form-group">
<input type="text" class="input_area" placeholder="UserName" required />
<input type="text" class="input_area" placeholder="Enter Email" required />
<input type="text" class="input_area" placeholder="Enter Password" required />
<input type="checkbox" class="check_box" />
<span>I agree with all the terms and conditions </span>
<button type="submit" class="sub_btn">REGISTER</button>
</form>
</div>
</div>
1.First you add display none to id
#register{
display:none;
}
#login{
display:block;
}
Then in file js you just need change style display when ever onclick.
login = () => {
mylogin.style.left = '50px';
myRegister.style.left = '500px';
mybtn.style.left = '0px';
mylogin.style.display='block'
myRegister.style.display='none'
}
register = () => {
mylogin.style.left = '-450px';
myRegister.style.left = '50px';
mybtn.style.left = '110px';
myRegister.style.display='block'
mylogin.style.display='none'
}
I need to show clear X button in chrome with type Password
I am trying
input[type="password"] {
-webkit-appearance: searchfield;
}
input[type="password"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
<input type="password" placeholder="enter text here..." />
If you want native/pure CSS. This should work only in Chrome.
.password {
-webkit-text-security: disc;
}
<input type="search" class="password" placeholder="enter text here..." />
Please check this code.
/**
* Clearable text inputs
*/
$(".clearable").each(function() {
var $inp = $(this).find("input:password"),
$cle = $(this).find(".clearable__clear");
$inp.on("input", function(){
$cle.toggle(!!this.value);
});
$cle.on("touchstart click", function(e) {
e.preventDefault();
$inp.val("").trigger("input");
});
});
/* Clearable text inputs */
.clearable{
position: relative;
display: inline-block;
}
.clearable input[type=password]{
padding-right: 24px;
width: 100%;
box-sizing: border-box;
}
.clearable__clear{
display: none;
position: absolute;
right:0; top:0;
padding: 0 8px;
font-style: normal;
font-size: 1.2em;
user-select: none;
cursor: pointer;
}
.clearable input::-ms-clear { /* Remove IE default X */
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="clearable">
<input type="password" name="" value="" placeholder="">
<i class="clearable__clear">×</i>
</span>
For input[type='password'] X icon is not supported. You have to manually take care of icon and click event or you can try with this
.close-icon {
border: 0 solid transparent;
background-color: transparent;
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
}
.close-icon:after {
content: "X";
display: block;
width: 15px;
height: 15px;
position: relative;
z-index: 1;
right: 35px;
top: 0;
bottom: 0;
margin: auto;
color: black;
cursor: pointer;
}
.search-box:not(:valid)~.close-icon {
display: none;
}
<form>
<input type="password" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset"></button>
</form>
Fiddle And Code:
$(document).ready(function(){
$("input").focus(function(){
$(".fakeplaceholder").addClass("fakeplaceholdertop");
});
$("input").blur(function(){
if(!$('input').val()) {
$(".fakeplaceholder").removeClass("fakeplaceholdertop");
}
});
});
.accountbox {
background-color:#ffffff;
padding: 15px 120px 50px 50px;
}
:focus{outline: none;}
.input1div {
display:inline-block; position: relative;
}
.input1div input {
font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;
}
.input1div input {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;}
.input1div input ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.input1div input:focus ~ .focus-border{width: 100%; transition: 0.4s;}
.fakeplaceholder {
position: absolute;
pointer-events: none;
top: 10px;
color:#8c8c8c;
transition: 0.28s ease all;
}
.fakeplaceholdertop {
top: -10px;
font-size:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="accountbox">
<p style="font-size:25px;font-weight:600;">Sign Up</p>
<form class="accountform">
<div class="input1div">
<input class="firstname" type="text" name="firstname" />
<span class="fakeplaceholder">First Name</span>
<span class="focus-border"></span>
</div>
<br/><br/><br/>
<div class="input1div">
<input type="text" name="lastname" />
<span class="fakeplaceholder">Last Name</span>
<span class="focus-border"></span>
</div>
</form>
</div>
As you can see, If I click on 1 input box, then the other one also do the same animation. How can i make only the clicked input box do this animation.
Expected Result:
On click, the fake placeholder will go up (only the clicked one)
The fake placeholder will stay up, if the input box has some value.
Use $(this).next(".fakeplaceholder").
$("input").focus(function() {
$(this).next(".fakeplaceholder").addClass("fakeplaceholdertop");
});
$("input").blur(function() {
if (!$('input').val()) {
$(this).next(".fakeplaceholder").removeClass("fakeplaceholdertop");
}
});
It will target the next element with the class fakeplaceholder right after the input you focus
$(document).ready(function() {
$("input").focus(function() {
$(this).next(".fakeplaceholder").addClass("fakeplaceholdertop");
});
$("input").blur(function() {
if (!$(this).val()) {
$(this).next(".fakeplaceholder").removeClass("fakeplaceholdertop");
}
});
});
.accountbox {
background-color: #ffffff;
padding: 15px 120px 50px 50px;
}
:focus {
outline: none;
}
.input1div {
display: inline-block;
position: relative;
}
.input1div input {
font: 15px/24px "Lato", Arial, sans-serif;
color: #333;
width: 100%;
box-sizing: border-box;
letter-spacing: 1px;
}
.input1div input {
border: 0;
padding: 7px 0;
border-bottom: 1px solid #ccc;
}
.input1div input~.focus-border {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #3399FF;
transition: 0.4s;
}
.input1div input:focus~.focus-border {
width: 100%;
transition: 0.4s;
}
.fakeplaceholder {
position: absolute;
pointer-events: none;
top: 10px;
color: #8c8c8c;
transition: 0.28s ease all;
}
.fakeplaceholdertop {
top: -10px;
font-size: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="accountbox">
<p style="font-size:25px;font-weight:600;">Sign Up</p>
<form class="accountform">
<div class="input1div">
<input class="firstname" type="text" name="firstname" />
<span class="fakeplaceholder">First Name</span>
<span class="focus-border"></span>
</div>
<br/><br/><br/>
<div class="input1div">
<input type="text" name="lastname" />
<span class="fakeplaceholder">Last Name</span>
<span class="focus-border"></span>
</div>
</form>
</div>
$(document).ready(function(){
$("input").focus(function(){
$(this).next().addClass("fakeplaceholdertop");
});
$("input").change(function(){
if($(this).val()==""){
$(this).next().removeClass("fakeplaceholdertop");
}else{
$(this).next().addClass("fakeplaceholdertop");
}
});
});
.accountbox {
background-color:#ffffff;
padding: 15px 120px 50px 50px;
}
:focus{outline: none;}
.input1div {
display:inline-block; position: relative;
}
.input1div input {
font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;
}
.input1div input {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;}
.input1div input ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.input1div input:focus ~ .focus-border{width: 100%; transition: 0.4s;}
.fakeplaceholder {
position: absolute;
pointer-events: none;
top: 10px;
color:#8c8c8c;
transition: 0.28s ease all;
}
.fakeplaceholdertop {
top: -10px;
font-size:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accountbox">
<p style="font-size:25px;font-weight:600;">Sign Up</p>
<form class="accountform">
<div class="input1div">
<input class="firstname" type="text" name="firstname" />
<span class="fakeplaceholder">First Name</span>
<span class="focus-border"></span>
</div>
<br/><br/><br/>
<div class="input1div">
<input type="text" name="lastname" />
<span class="fakeplaceholder">Last Name</span>
<span class="focus-border"></span>
</div>
</form>
</div>
You are applying animation to all matching elements. Use this to target current element to perform the animation. Try using this
$(this).parent().find(".fakeplaceholder").addClass("fakeplaceholdertop");
$(this).parent().find(".fakeplaceholder").removeClass("fakeplaceholdertop");
You just have to add separate ID's to access the different fields.
<span class="fakeplaceholder" id="first">First Name</span>
<span class="fakeplaceholder" id="last">Last Name</span>
Then apply the fakeplaceholdertop class to the specific element.
$(".firstname").focus(function() {
$("#first").addClass("fakeplaceholdertop");
});
$(".lastname").focus(function() {
$("#last").addClass("fakeplaceholdertop");
});
I am new in html, css and I am getting error when user enter invalid input into the input box then label of particular input field goes down but when user enter
correct input then its work fine.
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
<form id="form">
<div class="group">
<input type="text" required id="name" minlength="4">
<span class="highlight"></span>
<span class="bar"></span>
<label class="labeling">Name</label>
</div>
<div class="group">
<input type="email" required id="email">
<span class="highlight"></span>
<span class="bar"></span>
<label class="labeling">Email</label>
</div>
</form>
I have tried this
<form id="form">
<div class="group">
<input type="text" required id="name" minlength="4">
<span class="highlight"></span>
<span class="bar"></span>
<label class="labeling">Name</label>
</div>
<div class="group">
<input type="email" required id="email">
<span class="highlight"></span>
<span class="bar"></span>
<label class="labeling">Email</label>
</div>
</form>
.group {
margin-top: 40px;
position: relative;
margin-bottom: 45px;
}
input {
font-size: 22px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #ccc;
}
input:focus {
outline: none;
}
label.labeling {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
}
input:focus ~ label.labeling,
input:valid ~ label.labeling {
top: -20px;
font-size: 14px;
color: #5264AE;
}
.bar {
position: relative;
display: block;
width: 309px;
}
.bar:before,
.bar:after {
content: '';
height: 1px;
width: 0;
bottom: 1px;
position: absolute;
transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
input:focus ~ .bar:before,
input:focus ~ .bar:after {
width: 50%;
}
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
$(document).ready(function() {
$("#form").validate({
rules: {
name: {
required: true
},
email: {
required: true
}
},
messages: {
minlength: "your name at least 4 characters long",
email: "Please enter a valid email address"
}
});
});
You have to use some JS too to here as there is no :empty css property for an input box.(using :invalid will mean your placeholder setup will not work!)
Check out this fiddle and let me know your feedback. Thanks!
Used this css:
input.invalid-input ~ label.labeling {
top: -20px;
font-size: 14px;
color: red;
}
and added some js too:
$("input").each(function() {
var $this = $(this);
$this.on("change", function() {
if ($(this).is(':invalid') && $(this).val() != "") {
$(this).addClass("invalid-input");
} else {
$(this).removeClass("invalid-input");
}
});
});