I made this log-in and register form in which an onclick submit button of the form its display which form is submitted, left or right to implement it. I have used onclick property and passed a function to it fun() which has one parameter of the type no. So I used two functions fun(0) and fun(1) used to display a message which forms submitted by the user but it does not display the message.
And also I have a problem with the CSS it's not scaling according to the screen size as I used bootstrap for CSS and try the width, position property scale in % but then also it's not working.
function fun(Number n) {
if (n === 1) {
document.getElementsByClassName('m1').style.display = 'none';
} else {
document.getElementsByClassName('m2').style.display = 'none';
}
document.getElementsByClassName('modal').style.display = 'flex';
}
body {
background: linear-gradient(45deg, #fff722, #ff26f9);
font-weight: bold;
letter-spacing: 2px;
font-family: open sans, helvetica neue, Helvetica, Arial, sans-serif;
text-align: center;
}
input[type=radio] {
width: 9%;
}
input, #e {
width: 100%;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.row {
position: relative;
}
form {
font-size: 20px;
border-bottom: solid 5px #dedfe0;
border-right: solid 5px #dedfe0;
padding: 5px;
width: 500px;
margin: 80px;
}
label {
font-family: arial;
color: #0000ff;
}
#log {
position: absolute;
top: 20px;
right: 20px;
transform: translate(50, 50);
}
button:hover {
opacity: 0.8;
}
.modal, .modal1 {
display: none;
justify-content: center;
align-items: center;
border-radius: 6px;
z-index: 1;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
width: 500px;
height: 300px;
background: linear-gradient(45deg, #fff722, #ff26f9);
position: absolute;
text-align: center;
padding: 2%;
justify-content: center;
align-items: center;
border: solid 5px rgba(100, 0, 50, 0.5);
left: 500px;
top: 180px;
}
.close {
position: absolute;
right: 25px;
top: 0;
color: black;
font-size: 50px;
font-weight: bold;
}
.close:hover, .close:focus {
color: red;
cursor: pointer;
}
.animate {
animation: zoom 10000;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(2)
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<form class="jumbotron" class="column" id="register">
<h1 class="container " style="border: solid 3px grey; color:magenta;
"><b>REGISTER<b></b></h1><br>
<label>First Name:</label><input type="text"><br>
<label>Last Name:</label> <input type="text"><br>
<label>D.O.B:</label> <input type="date"><br>
<label>City:</label> <input type="text"><br>
<label>Mobile No.: </label>
<select style=" width: 20%;">
<option>+91</option>
<option>+92</option>
<option>+93</option>
<option>+94</option>
<option>+95</option>
</select> <input type="text"><br>
<label>Gender:</label>
<div style=" "> <input type="radio" value="Male" name="Gender">Male
<input type="radio" value="Female" name="Gender">Female
<input type="radio" value="Other" name="Gender">Other<br></div>
<label>Employment Status:</label>
<select id="e">
<option>Employed</option>
<option>Unemployed</option>
</select><br><br><br>
<input type="submit" onclick="fun(0)" class="btn-info btn-lg" value=Register>
<input type="reset" class="btn-info btn-lg" value=Reset>
</form>
<div class="column" id="log">
<form class="jumbotron">
<h1 style="border: solid 3px grey; color:magenta;"><b>LOG-IN</b></h1><br>
<label>Email-Id:</label><input type="email"><br>
<label>Username:</label><input type="text"><br>
<label>Password:</label><input type="Password" min,="5"></br><br><br>
<input type="submit" class="btn btn-info btn-lg " onclick="fun(1)" value="LOG-IN">
</form>
</div>
</div>
<nav class="modal">
<div class="modal-content">
<span onclick="document.querySelector('.modal').style.display='none'" class="close">×</span>
<div style="border:solid 5px #dedfe0" class="container">
<h3 class='m1'>Left form submited</h3>
<h3 class='m2'>Right form submited</h3>
</div>
</div>
</nav>
</body>
<script type="text/javascript">
</script>
</html>
Related
I am struggling to figure out how to refactor my JS for form validation. I figured out how to target each element using there ID, I just feel there has to be a better way to clean up this code using an array though. Any help would be appreciated. The commented out JS was my attempt at beginning to refactor.
"use strict"
//clunky code for error-img:
const fNameInput = document.getElementById("first-input");
const lNameInput = document.getElementById("last-input");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
fNameInput.addEventListener("blur", function(){
const errorImg1 = document.getElementById("error-img1");
if(!fNameInput.value){
errorImg1.classList.add("visible");
} else{
errorImg1.classList.remove("visible");
}
});
lNameInput.addEventListener("blur", function(){
const errorImg2 = document.getElementById("error-img2");
if(!lNameInput.value){
errorImg2.classList.add("visible");
} else{
errorImg2.classList.remove("visible");
}
});
emailInput.addEventListener("blur", function(){
const errorImg3 = document.getElementById("error-img3");
if(!emailInput.value){
errorImg3.classList.add("visible");
} else{
errorImg3.classList.remove("visible");
}
});
passwordInput.addEventListener("blur", function(){
const errorImg4 = document.getElementById("error-img4");
if(!passwordInput.value){
errorImg4.classList.add("visible");
} else{
errorImg4.classList.remove("visible");
}
});
// attempt at making clean code that applies to all inputs:
// const inputs = document.getElementsByTagName("input");
// const errorImgs = document.getElementsByClassName("error-img");
// //learn forEach loop:
// inputs[i].addEventListener("blur", () => {
// inputs.forEach(element => {
// if(!element.value){
// }
// });
// });
#import url(https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap);
body{
margin: 0;
background-image: url(images/bg-intro-desktop.png);
background-color: rgba(255, 0, 0, .5);
font-family: 'Poppins', sans-serif;
}
.container{
margin: 6rem auto;
height: auto;
width: 70%;
display: grid;
grid-template-areas:
"left right"
"left right";
grid-auto-columns: minmax(0, 32rem);
}
.left-container{
grid-area: left;
}
.left-heading{
color: white;
font-size: 2.7rem;
line-height: 3rem;
font-weight: 700;
position: relative;
top: 30%;
}
.left-content{
color: white;
font-size: .9rem;
font-weight: 400;
position: relative;
top: 29%;
}
.right-container{
grid-area: right;
}
.right-top-container{
background-color: hsl(248, 32%, 49%);
border-radius: .5rem;
height: 11.5%;
margin: auto auto 1.5rem auto;
box-shadow: 0px 6px 1px rgba(0, 0, 0, .2);
}
.top-text-special{
color: white;
font-weight: 600;
font-size: .85rem;
position: relative;
top: 50%;
left: 72%;
transform: translate(-50%, -50%);
}
.top-text{
color: white;
font-weight: 400;
}
.right-form{
background-color: white;
height: 23rem;
border-radius: .5rem;
padding: 1.5rem;
padding-top: 2.5rem;
box-shadow: 0 7px 1px rgba(0, 0, 0, .15);
display: grid;
grid-template-areas:
"fname"
"lname"
"email"
"password"
"submit-btn"
"bottom-text";
}
input{
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: .8rem;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 0 0 1.5rem;
height: 3rem;
width: 90%;
border: solid;
border-width: .09rem;
border-radius: .4rem;
border-color: hsl(246, 25%, 77%);
}
.first-name-div{
grid-area: fname;
position: relative;
}
.last-name-div{
grid-area: lname;
position: relative;
}
.email-div{
grid-area: email;
position: relative;
}
.password-div{
grid-area: password;
position: relative;
}
.submit-btn-div{
grid-area: submit-btn;
}
#submit-btn{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 97.1%;
height: 3rem;
border-radius: .4rem;
background-color: hsl(154, 59%, 51%);
border: none;
color: white;
box-shadow: 0 2px .5px rgba(0, 0, 0, .4);
cursor: pointer;
}
.right-footer-text{
grid-area: bottom-text;
}
.footer-text{
position: relative;
top: 1%;
left: 58%;
transform: translate(-50%, -50%);
color: grey;
font-size: .7rem;
font-weight: 600;
}
.footer-span{
color: hsl(0, 100%, 74%);
}
.error-img{
display: none;
position: absolute;
bottom: 75%;
right: 5%;
}
.visible{
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FrontEndMentor#3</title>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="images/favicon-32x32.png" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="left-container">
<h1 class="left-heading">Learn to code by <br>
watching others</h1>
<p class="left-content">See how experienced developers solve problems in real-time. <br>
Watching scripted tutorials is great, but understanding how <br>
developers think is invaluable.</p>
</div>
<div class="right-container">
<div class="right-top-container">
<p class="top-text-special">Try it free 7 days <span class="top-text">then $20/mo. thereafter</span></p>
</div>
<div class="right-form">
<form action="#" class="form">
<div class="first-name-div">
<input type="text" name="fname" id="first-input" placeholder="First Name">
<span><img class="error-img" id="error-img1" src="images/icon-error.svg" alt=""></span>
</div>
<div class="last-name-div">
<input type="text" name="lname" id="last-input" placeholder="Last Name">
<span><img class="error-img" id="error-img2" src="images/icon-error.svg" alt=""></span>
</div>
<div class="email-div">
<input type="email" name="email-address" id="email" placeholder="example#email.com">
<span><img class="error-img" id="error-img3" src="images/icon-error.svg" alt=""></span>
</div>
<div class="password-div">
<input type="password" name="password" id="password" placeholder="Password">
<span><img class="error-img" id="error-img4" src="images/icon-error.svg" alt=""></span>
</div>
<div class="submit-btn-div">
<button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
</div>
</form>
</div>
<div class="right-footer-text">
<p class="footer-text">By clicking the button, you are agreeing to our <span class="footer-span">Terms and Services</span></p>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
(Not all styling is complete, will do when JS is cleaned up)
To improve your JS logic you can apply the 'Don't Repeat Yourself' principle, or DRY. This means that you should avoid code repetition by genericising the logic as much as possible. The corollary effect of this is that the code can be made to work for an infinite number of form fields, so long as the HTML structure around them is consistent.
Here's an example of this for your use case. Note the use of a single class applied to all the fields to be validated, and also how DOM traversal is used to find the error img related to the current field only.
"use strict"
const fields = document.querySelectorAll('.to-validate').forEach(el => {
el.addEventListener('blur', e => {
let field = e.target;
field.closest('div').querySelector('.error-img').classList.toggle('visible', !field.value.trim().length);
});
});
#import url(https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap);
body {
margin: 0;
background-image: url(images/bg-intro-desktop.png);
background-color: rgba(255, 0, 0, .5);
font-family: 'Poppins', sans-serif;
}
.container {
margin: 6rem auto;
height: auto;
width: 70%;
display: grid;
grid-template-areas: "left right" "left right";
grid-auto-columns: minmax(0, 32rem);
}
.left-container {
grid-area: left;
}
.left-heading {
color: white;
font-size: 2.7rem;
line-height: 3rem;
font-weight: 700;
position: relative;
top: 30%;
}
.left-content {
color: white;
font-size: .9rem;
font-weight: 400;
position: relative;
top: 29%;
}
.right-container {
grid-area: right;
}
.right-top-container {
background-color: hsl(248, 32%, 49%);
border-radius: .5rem;
height: 11.5%;
margin: auto auto 1.5rem auto;
box-shadow: 0px 6px 1px rgba(0, 0, 0, .2);
}
.top-text-special {
color: white;
font-weight: 600;
font-size: .85rem;
position: relative;
top: 50%;
left: 72%;
transform: translate(-50%, -50%);
}
.top-text {
color: white;
font-weight: 400;
}
.right-form {
background-color: white;
height: 23rem;
border-radius: .5rem;
padding: 1.5rem;
padding-top: 2.5rem;
box-shadow: 0 7px 1px rgba(0, 0, 0, .15);
display: grid;
grid-template-areas: "fname" "lname" "email" "password" "submit-btn" "bottom-text";
}
input {
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: .8rem;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 0 0 1.5rem;
height: 3rem;
width: 90%;
border: solid;
border-width: .09rem;
border-radius: .4rem;
border-color: hsl(246, 25%, 77%);
}
.first-name-div {
grid-area: fname;
position: relative;
}
.last-name-div {
grid-area: lname;
position: relative;
}
.email-div {
grid-area: email;
position: relative;
}
.password-div {
grid-area: password;
position: relative;
}
.submit-btn-div {
grid-area: submit-btn;
}
#submit-btn {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 97.1%;
height: 3rem;
border-radius: .4rem;
background-color: hsl(154, 59%, 51%);
border: none;
color: white;
box-shadow: 0 2px .5px rgba(0, 0, 0, .4);
cursor: pointer;
}
.right-footer-text {
grid-area: bottom-text;
}
.footer-text {
position: relative;
top: 1%;
left: 58%;
transform: translate(-50%, -50%);
color: grey;
font-size: .7rem;
font-weight: 600;
}
.footer-span {
color: hsl(0, 100%, 74%);
}
.error-img {
display: none;
position: absolute;
bottom: 75%;
right: 5%;
/* following rules only for this demo */
width: 20px;
height: 20px;
background-color: #C00;
}
.visible {
display: block;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap" rel="stylesheet">
<div class="container">
<div class="left-container">
<h1 class="left-heading">Learn to code by <br> watching others</h1>
<p class="left-content">See how experienced developers solve problems in real-time. <br> Watching scripted tutorials is great, but understanding how <br> developers think is invaluable.</p>
</div>
<div class="right-container">
<div class="right-top-container">
<p class="top-text-special">Try it free 7 days <span class="top-text">then $20/mo. thereafter</span></p>
</div>
<div class="right-form">
<form action="#" class="form">
<div class="first-name-div">
<input type="text" name="fname" id="first-input" placeholder="First Name" class="to-validate" />
<span><img class="error-img" src="images/icon-error.svg" alt=""></span>
</div>
<div class="last-name-div">
<input type="text" name="lname" id="last-input" placeholder="Last Name" class="to-validate" />
<span><img class="error-img" src="images/icon-error.svg" alt=""></span>
</div>
<div class="email-div">
<input type="email" name="email-address" id="email" placeholder="example#email.com" class="to-validate" />
<span><img class="error-img" src="images/icon-error.svg" alt=""></span>
</div>
<div class="password-div">
<input type="password" name="password" id="password" placeholder="Password" class="to-validate" />
<span><img class="error-img" src="images/icon-error.svg" alt=""></span>
</div>
<div class="submit-btn-div">
<button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
</div>
</form>
</div>
<div class="right-footer-text">
<p class="footer-text">By clicking the button, you are agreeing to our <span class="footer-span">Terms and Services</span></p>
</div>
</div>
</div>
It's worth noting, though, that what you're doing can be achieved simply by adding the required attribute to your input elements. Then there's no JS required at all.
You can do this with required attribute and css invalid selector. No need to code anything. But by default the error will show up.
input + span{
display: none;
color: red;
}
input:invalid + span{
display: inline-block;
}
<form action="#" class="form">
<div class="first-name-div">
<input type="text" name="fname" id="first-input" placeholder="First Name" required>
<span>X</span>
</div>
<div class="last-name-div">
<input type="text" name="lname" id="last-input" placeholder="Last Name" required>
<span>X</span>
</div>
<div class="email-div">
<input type="email" name="email-address" id="email" placeholder="example#email.com" required>
<span>X</span>
</div>
<div class="password-div">
<input type="password" name="password" id="password" placeholder="Password" required>
<span>X</span>
</div>
<div class="submit-btn-div">
<button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
</div>
</form>
Now if you want it to show up, you would have to do what you are doing with blur and add a class it it was interacted with. Using foucsout with event delegation you just have to add one event listener to the form.
document.querySelector("form").addEventListener("focusout", function (e) {
const input = e.target.closest('input');
if (input) input.classList.add('touched');
});
input + span{
display: none;
color: red;
}
input.touched:invalid + span{
display: inline-block;
}
<form action="#" class="form">
<div class="first-name-div">
<input type="text" name="fname" id="first-input" placeholder="First Name" required>
<span>X</span>
</div>
<div class="last-name-div">
<input type="text" name="lname" id="last-input" placeholder="Last Name" required>
<span>X</span>
</div>
<div class="email-div">
<input type="email" name="email-address" id="email" placeholder="example#email.com" required>
<span>X</span>
</div>
<div class="password-div">
<input type="password" name="password" id="password" placeholder="Password" required>
<span>X</span>
</div>
<div class="submit-btn-div">
<button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
</div>
</form>
I made admin panel with HTML CSS and JavaScript and I made buttons to move about menus, but when I test console and player menu that doesn't work like that not changed menu section.
How it looks in full-screen
And for test I put console log 123, but that still doesn't work. May CSS be the problem? Or may it's HTML the problem? Because in console it doesn't give me any error. Just clear Google Chrome console.
const playerMenuButton = document.getElementById('playerMenuButton')
const playerMenu = document.getElementById('playerMenu')
playerMenuButton.addEventListener('click', () => {
console.log(123)
});
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
.main-container {
width: 100%;
height: 50vh;
background-color: #000;
position: relative;
margin: 0px;
opacity: 1;
}
.buttons-container{
height: 44px;
width: 100%;
bottom: 0px;
position: absolute
}
.button {
width: 120px;
height: 32px;
margin-left: 20px;
background-color: #434343;
text-decoration: none;
border: none;
color: #fff;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif
}
.chat {
color:#434343 ;
background-color: #434343 ;
text-decoration: none;
border: none;
color: #fff;
width: 100%;
height: 32px;
border-radius: 0px;
outline: none;
}
.div-chat {
position:absolute;
margin-left: 20px;
bottom: 60px;
width: 193vh;
}
.playerMenu {
width: 100%;
height: 50vh;
background-color: #000;
transform: translate(00%, -100%);
opacity: 0;
}
.PlayerInfo {
font-size: 9px;
margin-top: 5px;
margin-left: 20px;
}
h1 {
color: #fff;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif
}
.playerMenu input {
margin-top: 10px;
margin-left: 20px;
}
.playerMenu.show {
opacity: 1;
}
<!doctype html>
<html>
<head>
<title>AdminPanel | By Richok</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main-container">
<div class="div-chat">
<input class="chat" type="text">
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
<div id = "playerMenu" class="playerMenu">
<input class="chat" type="text">
<div class="PlayerInfo">
<h1>Name:</h1>
<h1>Social Club:</h1>
<h1>$</h1>
<h1>Phone number</h1>
<h1>Home:</h1>
<h1>Warns:</h1>
<h1>Fraction:</h1>
<h1>Bussiens</h1>
<h1>Login</h1>
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
</body>
<script src="js/app.js"></script>
</html>
The problem was in the css, I added position:relative; and z-index:1; to class .button so now you can add event to them and click without problem
const playerMenuButton = document.getElementById('playerMenuButton');
const playerMenu = document.getElementById('playerMenu');
playerMenuButton.addEventListener('click', () => {
console.log(123)
});
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
.main-container {
width: 100%;
height: 50vh;
background-color: #000;
position: relative;
margin: 0px;
opacity: 1;
}
.buttons-container{
height: 44px;
width: 100%;
bottom: 0px;
position: absolute
}
.button {
width: 120px;
height: 32px;
margin-left: 20px;
background-color: #434343;
text-decoration: none;
border: none;
color: #fff;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif;
position:relative;
z-index:1;
}
.chat {
color:#434343 ;
background-color: #434343 ;
text-decoration: none;
border: none;
color: #fff;
width: 100%;
height: 32px;
border-radius: 0px;
outline: none;
}
.div-chat {
position:absolute;
margin-left: 20px;
bottom: 60px;
width: 193vh;
}
.playerMenu {
width: 100%;
height: 50vh;
background-color: #000;
transform: translate(00%, -100%);
opacity: 0;
}
.PlayerInfo {
font-size: 9px;
margin-top: 5px;
margin-left: 20px;
}
h1 {
color: #fff;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif
}
.playerMenu input {
margin-top: 10px;
margin-left: 20px;
}
.playerMenu.show {
opacity: 1;
}
<!doctype html>
<html>
<head>
<title>AdminPanel | By Richok</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main-container">
<div class="div-chat">
<input class="chat" type="text">
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
<div id = "playerMenu" class="playerMenu">
<input class="chat" type="text">
<div class="PlayerInfo">
<h1>Name:</h1>
<h1>Social Club:</h1>
<h1>$</h1>
<h1>Phone number</h1>
<h1>Home:</h1>
<h1>Warns:</h1>
<h1>Fraction:</h1>
<h1>Bussiens</h1>
<h1>Login</h1>
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
</body>
<script src="js/app.js"></script>
</html>
I am trying to redirect on same page, it is redirect after database storage. But giving me following error
This page isn’t working
localhost is currently unable to handle this request. HTTP ERROR 500
My script is successfully saving record on database using php with jquery but after inserting data, it's giving me the above page error.
I have to refresh or press f5 in order to come on same page.
here is my code
$(document).ready(function() {
$("input").prop('required', true);
/*---------------------------------------------------------*/
$(".next_btn").click(function() { // Function Runs On NEXT Button Click
$(this).parent().next().fadeIn('slow');
$(this).parent().css({
'display': 'none'
});
// Adding Class Active To Show Steps Forward;
$('.active').next().addClass('active');
});
$(".pre_btn").click(function() { // Function Runs On PREVIOUS Button Click
$(this).parent().prev().fadeIn('slow');
$(this).parent().css({
'display': 'none'
});
// Removing Class Active To Show Steps Backward;
$('.active:last').removeClass('active');
});
});
#import url(http://fonts.googleapis.com/css?family=Droid+Serif);
/* Above line is to import google font style */
.content {
width: 960px;
margin: 20px auto;
}
.main {
float: left;
width: 650px;
margin-top: 80px;
}
#progressbar {
margin: 0;
padding: 0;
font-size: 18px;
}
.active {
color: red;
}
fieldset {
display: none;
width: 350px;
padding: 20px;
margin-top: 50px;
margin-left: 85px;
border-radius: 5px;
box-shadow: 3px 3px 25px 1px gray;
}
#first {
display: block;
width: 350px;
padding: 20px;
margin-top: 50px;
border-radius: 5px;
margin-left: 85px;
box-shadow: 3px 3px 25px 1px gray;
}
input[type=text],
input[type=password],
select {
width: 100%;
margin: 10px 0;
height: 40px;
padding: 5px;
border: 3px solid rgb(236, 176, 220);
border-radius: 4px;
}
textarea {
width: 100%;
margin: 10px 0;
height: 70px;
padding: 5px;
border: 3px solid rgb(236, 176, 220);
border-radius: 4px;
}
input[type=submit],
input[type=button] {
width: 120px;
margin: 15px 25px;
padding: 5px;
height: 40px;
background-color: sienna;
border: none;
border-radius: 4px;
color: white;
font-family: 'Droid Serif', serif;
}
h2,
p {
text-align: center;
font-family: 'Droid Serif', serif;
}
li {
margin-right: 52px;
display: inline;
color: #c1c5cc;
font-family: 'Droid Serif', serif;
}
p.eml {
color: red;
font-size: 17px;
font-family: sans-serif;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?php
$link=mysqli_connect("localhost","root","sm123#",'crud');
if(isset($_POST["btnsave"]))
{
$email=$_POST["email"];
$password=$_POST["pass"];
$qry="insert tbusr values(null,'$email','$password')";
$res=mysqli_query($link,$qry);
if(mysqli_affected_row($link)==1)
{
echo "Data inserted";
}
else
{
echo "Not";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Myform</title>
<meta content="noindex, nofollow" name="robots">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="custom.js"></script>
<script>
$(document).ready(function() {
$("#email").change(function() {
var a = $("#email").val();
$('.eml').empty();
$('.eml').append(a);
console.log(a);
});
});
</script>
</head>
<body>
<div class="content">
<!-- Multistep Form -->
<div class="main">
<form action="index.php" class="regform" method="post">
<!-- Progress Bar -->
<ul id="progressbar">
<li class="active">Create Account</li>
<li>Please View link</li>
<li>Confirm Your Details</li>
</ul>
<!-- Fieldsets -->
<fieldset id="first">
<h2 class="title">Create your account</h2>
<p class="subtitle">Step 1</p>
<input class="text_field" name="email" placeholder="Email" type="text" id="email">
<input class="text_field" name="pass" placeholder="Password" type="password">
<input class="text_field" name="cpass" placeholder="Confirm Password" type="password">
<input class="next_btn" name="next" type="button" value="Next">
</fieldset>
<fieldset>
<h2 class="title">Please View link</h2>
<p class="subtitle">Step 2</p>
<p>Please click On <b>View</b> to open verfication link tab</p>
<input class="pre_btn" type="button" value="Previous">
<input class="next_btn" name="next" type="button" value="View">
</fieldset>
<fieldset>
<h2 class="title">Confirm Your Details</h2>
<p class="subtitle">Step 3</p>
<p>Please click here to confirm your email address</p>
<p class="eml"></p>
<input class="pre_btn" type="button" value="Previous">
<input class="submit_btn" name="btnsave" type="submit" value="Confirm Email">
</fieldset>
</form>
</div>
</div>
</body>
</html>
I am making a contact form(which doesn't need to actually contact someone). I want to make it so that when you press the send/submit button, it refreshes the page so that it appears that message has been sent. I am not using Javascript but any ways to do this through Javascript would be appreciated. This is my contact form. This isn't a duplicate because I would prefer if there was a way to do this through Html BUT js answers would be accepted
http://jsfiddle.net/egndc24s/1/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<section class="section1">
<div class="sec1title">
<h1>Get in touch</h1>
</div>
</section>
<section class="section2">
<div class="contactform">
<h5>Drop us a line...</h5>
<form action="#">
<label for="firstname"><i class="cntfrmicn fa fa-user"></i> <input class="form-fields" name="firstname" type="text"></label> <label for="email"><i class="cntfrmicn fa fa-envelope"></i> <input class="form-fields" name="email" type="text"></label> <label for="contact"><i class="cntfrmicn fa fa-phone"></i> <input class="form-fields" name="contact" type="text"></label> <label for="textarea"><i class="cntfrmicn fa fa-comment"></i>
<textarea class="form-fields" cols="30" id="" name="textarea" rows="10"></textarea></label> <button class="form-fields button" type="submit" value="Send">Send <i class="fa fa-paper-plane"></i></button>
</form>
</div>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'>
</script>
<div class="contmap" style='overflow:hidden;height:550px;width:100%;'>
<div id='gmap_canvas' style='height:100%;width:100%;'></div>
<div>
<small>embed google maps</small>
</div>
<div>
<small>free web directories</small>
</div>
<style>
#gmap_canvas img{max-width:none!important;background:none!important}
</style>
</div>
<script type='text/javascript'>
function init_map(){var myOptions = {zoom:14,center:new google.maps.LatLng(-37.898677,144.640630),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(-37.898677,144.640630)});infowindow = new google.maps.InfoWindow({content:'<strong>My Location<\/strong><br>Eagle Stadium<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
</script>
</section>
</div>
</body>
</html>
\\\\\\
* {
margin:0px;
padding:0px;
}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }
body {
background: #1c1c1c;
color: #333;
font-weight: normal;
font-size: 1em;
font-family: 'Roboto', Arial, sans-serif;
}
input:focus, textarea:focus, keygen:focus, select:focus {
outline: none;
}
::-moz-placeholder {
color: #666;
font-weight: 300;
opacity: 1;
}
::-webkit-input-placeholder {
color: #666;
font-weight: 300;
}
/* contact from design */
.container {
padding: 20px 50px 70px;
}
.sec1title {
text-align: center;
}
.sec1title h1 {
font-size: 40px;
margin: 25px;
text-transform: uppercase;
color: red;
font-weight: 400;
}
.section2 {
position: relative;
overflow: hidden;
}
.section2 .contactform {
position: absolute;
top: 0;
right: 10%;
z-index: 99;
background: #393939;
padding: 30px 40px 70px;
box-sizing: border-box;
}
.section2 .contactform input.form-fields,
.section2 .contactform button.form-fields,
.section2 .contactform textarea.form-fields {
padding: 0 0 0 40px;
display: block;
box-sizing: border-box;
width: 350px;
font-size: 16px;
background: #323232;
margin: 7px 0;
border: 1px solid #00C1A8;
color: #6BECDB;
opacity: 0.5;
min-height: 45px;
text-shadow: none;
position: relative;
}
.section2 .contactform textarea.form-fields {
padding: 8px 40px;
resize: none;
}
.section2 .contactform button.form-fields.button {
color: #16F1D4;
font-size: 14px;
padding: 0;
text-transform: uppercase;
}
.section2 .contactform button.form-fields.button:hover {
background: #00C1A8;
color: #fff;
cursor: pointer;
opacity: 1;
}
.section2 .contactform button.form-fields.button i {
margin-left:10px;
}
.section2 .contactform h5 {
color: #16F1D4;
font-size: 16px;
margin-bottom: 15px;
}
.section2 .contactform label .cntfrmicn {
color: #00C1A8;
padding: 14px;
position: absolute;
z-index: 99;
}
#media only screen and (max-width: 660px) {
.container {
padding: 10px 20px 30px;
}
.contmap {
height: 475px !important;
}
.sec1title h1 {
font-size: 28px;
}
.section2 .contactform { padding: 10px; right: 0; width: 100%; }
.section2 .contactform input.form-fields, .section2 .contactform button.form-fields, .section2 .contactform textarea.form-fields {
width: 100%;
}
}
You can set the form's submit button's onClick event handler to reload the page with location.reload() or location = location (fallback for older browsers).
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<section class="section1">
<div class="sec1title">
<h1>Get in touch</h1>
</div>
</section>
<section class="section2">
<div class="contactform">
<h5>Drop us a line...</h5>
<form action="#">
<label for="firstname"><i class="cntfrmicn fa fa-user"></i> <input class="form-fields" name="firstname" type="text"></label> <label for="email"><i class="cntfrmicn fa fa-envelope"></i> <input class="form-fields" name="email" type="text"></label> <label for="contact"><i class="cntfrmicn fa fa-phone"></i> <input class="form-fields" name="contact" type="text"></label> <label for="textarea"><i class="cntfrmicn fa fa-comment"></i>
<textarea class="form-fields" cols="30" id="" name="textarea" rows="10"></textarea></label> <button class="form-fields button" type="submit" value="Send" onClick="refreshPage()">Send <i class="fa fa-paper-plane"></i></button>
</form>
</div>
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'>
</script>
<div class="contmap" style='overflow:hidden;height:550px;width:100%;'>
<div id='gmap_canvas' style='height:100%;width:100%;'></div>
<div>
<small>embed google maps</small>
</div>
<div>
<small>free web directories</small>
</div>
<style>
#gmap_canvas img{max-width:none!important;background:none!important}
</style>
</div>
<script type='text/javascript'>
function refreshPage(){
console.log("Refreshing page");
location.reload ? location.reload() : location = location;
}
</script>
</section>
</div>
</body>
</html>
Calling location.reload() from javascript will reload the page.
Which url in your backend is handling the form?
If it is the same url as this page, the browser will refresh it for you.
<form action="">
If it is another one, redirect to this page. You can do it server-side or client side.
Another solution using javascript would be to send an ajax request and add on the form onsubmit="location.reload(true)".
https://www.w3schools.com/jsref/event_onsubmit.asp
https://www.w3schools.com/jsref/met_loc_reload.asp
I'm facing a problem while integrating a project from codepen into ASP.NET. While I download the project and test it on atom it works perfectly, but when I try to transfer it to ASP.NET (copy paste) it stops working, it just switch between log in / register without moving. I'm new to ASP.NET so maybe I'm missing something... It gives a green warning on the double <html> and <body> tags maybe the problem is there, I just don't know how to fix it. Any help is welcome thanks on advance.
The original codepen: Codepen Link
Note: only edit I made was adding / on non closing <> elements because ASP.NET told me to.
var $loginMsg = $('.loginMsg'),
$login = $('.login'),
$signupMsg = $('.signupMsg'),
$signup = $('.signup'),
$frontbox = $('.frontbox');
$('#switch1').on('click', function () {
$loginMsg.toggleClass("visibility");
$frontbox.addClass("moving");
$signupMsg.toggleClass("visibility");
$signup.toggleClass('hide');
$login.toggleClass('hide');
})
$('#switch2').on('click', function () {
$loginMsg.toggleClass("visibility");
$frontbox.removeClass("moving");
$signupMsg.toggleClass("visibility");
$signup.toggleClass('hide');
$login.toggleClass('hide');
})
setTimeout(function () {
$('#switch1').click()
}, 1000)
setTimeout(function () {
$('#switch2').click()
}, 3000)
body{
background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
font-family: 'Roboto', sans-serif;
}
.container{
/*border:1px solid white;*/
width: 600px;
height: 350px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
display: inline-flex;
}
.backbox{
background-color: #404040;
width: 100%;
height: 80%;
position: absolute;
transform: translate(0,-50%);
top:50%;
display: inline-flex;
border-radius: 15px;
}
.frontbox{
background-color: white;
border-radius: 20px;
height: 100%;
width: 50%;
z-index: 10;
position: absolute;
right:0;
margin-right: 3%;
margin-left: 3%;
transition: right .8s ease-in-out;
}
.moving{
right:45%;
}
.loginMsg, .signupMsg{
width: 50%;
height: 100%;
font-size: 15px;
box-sizing: border-box;
}
.loginMsg .title,
.signupMsg .title{
font-weight: 300;
font-size: 23px;
}
.loginMsg p,
.signupMsg p {
font-weight: 100;
}
.textcontent{
color:white;
margin-top:65px;
margin-left: 12%;
}
.loginMsg button,
.signupMsg button {
background-color: #404040;
border: 2px solid white;
border-radius: 10px;
color:white;
font-size: 12px;
box-sizing: content-box;
font-weight: 300;
padding:10px;
margin-top: 20px;
}
/* front box content*/
.login, .signup{
padding: 20px;
text-align: center;
}
.login h2,
.signup h2 {
color: #35B729;
font-size:22px;
}
.inputbox{
margin-top:30px;
}
.login input,
.signup input {
display: block;
width: 100%;
height: 40px;
background-color: #f2f2f2;
border: none;
margin-bottom:20px;
font-size: 12px;
}
.login button,
.signup button{
background-color: #35B729;
border: none;
color:white;
font-size: 12px;
font-weight: 300;
box-sizing: content-box;
padding:10px;
border-radius: 10px;
width: 60px;
position: absolute;
right:30px;
bottom: 30px;
cursor: pointer;
}
/* Fade In & Out*/
.login p {
cursor: pointer;
color:#404040;
font-size:15px;
}
.loginMsg, .signupMsg{
/*opacity: 1;*/
transition: opacity .8s ease-in-out;
}
.visibility{
opacity: 0;
}
.hide{
display: none;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'/>
<link href="stylelogin.css" rel="stylesheet" />
</head>
<body>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="backbox">
<div class="loginMsg">
<div class="textcontent">
<p class="title">Don't have an account?</p>
<p>Sign up to save all your graph.</p>
<button id="switch1">Sign Up</button>
</div>
</div>
<div class="signupMsg visibility">
<div class="textcontent">
<p class="title">Have an account?</p>
<p>Log in to see all your collection.</p>
<button id="switch2">LOG IN</button>
</div>
</div>
</div>
<!-- backbox -->
<div class="frontbox">
<div class="login">
<h2>LOG IN</h2>
<div class="inputbox">
<input type="text" name="email" placeholder=" EMAIL"/>
<input type="password" name="password" placeholder=" PASSWORD"/>
</div>
<p>FORGET PASSWORD?</p>
<button>LOG IN</button>
</div>
<div class="signup hide">
<h2>SIGN UP</h2>
<div class="inputbox">
<input type="text" name="fullname" placeholder=" FULLNAME"/>
<input type="text" name="email" placeholder=" EMAIL"/>
<input type="password" name="password" placeholder=" PASSWORD"/>
</div>
<button>SIGN UP</button>
</div>
</div>
<!-- frontbox -->
</div>
</form>
</body>
</html>
<script src="jslogin.js"></script>
</body>
</html>
Try adding e.preventDefault to your functions to avoid jQuery triggering things it doesn't have to do.
$('#switch1').on('click', function (e) {
e.preventDefault();
$loginMsg.toggleClass("visibility");
$frontbox.addClass("moving");
$signupMsg.toggleClass("visibility");
$signup.toggleClass('hide');
$login.toggleClass('hide');
})
$('#switch2').on('click', function (e) {
e.preventDefault();
$loginMsg.toggleClass("visibility");
$frontbox.removeClass("moving");
$signupMsg.toggleClass("visibility");
$signup.toggleClass('hide');
$login.toggleClass('hide');
})
I got this working in this jsFiddle, so please check it out, try it on your code and let us know if it works or not.
Hope it helps you.