This question already has answers here:
How to prevent buttons from submitting forms
(20 answers)
Closed 1 year ago.
This code was meant to change the innerHTML from 'login' to 'changed' but when I click on the button, the changes work for only a second and changed back to 'login'
please check if I'm doing anything wrong
the html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/64d58efce2.js"
crossorigin="anonymous"
></script>
<script src="script.js" type="text/javascript" defer></script>
<link rel="stylesheet" href="style.css" />
<title>Sign in & Sign up Form</title>
</head>
<body>
</body>
</html>
the javascript code
const main = document.createElement("main")
main.classList.add("foo", "bar")
main.innerHTML =`
<form action="" class="sign-in-form">
<h2 class="title">Sign in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username"/>
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password"/>
</div>
<button type="submit" class="btn solid">Login</button>
<p class="social-text">Or Sign in with social platforms</p>
</form>
`
document.querySelector("body").append(main)
const button = document.querySelector(".btn")
button.addEventListener("click", (event)=>{
event.preventDefault();
button.innerHTML = "changed"
})
You can pass a event to your function and use event.preventDefault() to stop the submission. Otherwise, it will reload the page.
const button = document.querySelector(".btn");
button.addEventListener("click", event => {
event.preventDefault();
button.innerHTML = "changed";
});
<body>
<form action="" class="sign-in-form">
<h2 class="title">Sign in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" />
</div>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password" />
</div>
<button type="submit" class="btn solid">Login</button>
<p class="social-text">Or Sign in with social platforms</p>
</form>
</body>
Related
i have created a registration form using html css and javascript when i click in login button it will display a dropdown menu in another window where all the register username will display in the drop down menu.
i have created another html page and create a dropdown menu but how i can,t understand how to retrieve username fro cloudfirestore to the dropdownmenu[enter image description here]
[enter image description here][1]
<html>
<head>
<meta charset="utf-8">
<title>LogIn</title>
<meta name="description" content="">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.2.1/css/fontawesome.min.css" integrity="sha384-QYIZto+st3yW+o8+5OHfT6S482Zsvz2WfOzpFSXMF9zqeLcFV0/wlZpMtyFcZALm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.2/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="form-box">
<h1 id="title">Sign up</h1>
<form action="">
<div class="input-group">
<div class="input-field">
<i class="bi bi-person-fill"></i>
<input type="text" id="userName" placeholder="User Name">
</div>
<div class="input-field" id="email">
<i class="bi bi-envelope-fill"></i>
<input type="email" id="Email" placeholder="Email">
</div>
<div class="input-field">
<i class="bi bi-lock-fill"></i>
<input type="password" id="password" placeholder="Password">
</div>
<div class="input-field" id="phoneNumber">
<i class="bi bi-phone-fill"></i>
<input type="tel" id="mobileNumber" placeholder="Mobile No">
</div>
<p>Forget Password Click here</p>
</div>
<div class="btn-field">
<button type="button" id="signupBtn">Sign Up</button>
<button type="button" class="disable" id="signinBtn">Sign In</button>
</div>
</form>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
<script>
const firebaseConfig = {
apiKey: "AIzaSyD2izIZyRC1IKqfc5RaZ-HHx0CmxTYNNws",
authDomain: "login-with-firebase-data-ae61f.firebaseapp.com",
projectId: "login-with-firebase-data-ae61f",
storageBucket: "login-with-firebase-data-ae61f.appspot.com",
messagingSenderId: "905524976644",
appId: "1:905524976644:web:643932fd262d0b89346951"
};
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth()
const db = firebase.firestore();
</script>
<script src="myScript.js"></script>
</body>
I create a form which allows to view the form information in a
different page for the user to view using "view" button and I want
a "edit" button to edit the same details of the form by redirecting
to the previous page. I tried using window.history.back(); it didn't
work.
html file Index.html - the form
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="container">
<form action="result.html" method="GET">
<h1>Send us an Enquiry?</h1>
<h3>Fill in the Details Below</h3>
<input type="text" id="name" name="name" placeholder="Enter Name" />
<input type="text" id="email" name="email" placeholder="Enter Email" />
<select name="subject" id="subject" value="Subject">Subject
<option value="Destinations">Destinations</option>
<option value="Pricing">Pricing</option>
<option value="Accommodation">Accommodation</option>
<option value="Other">Other</option>
</select>
<textarea id="details" name="details" placeholder="Enter Details"></textarea>
<input type="submit" class="btn" value="View" onclick="handleSubmit()" />
</form>
</div>
</body>
</html>
The page view the form details result.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="result.js"></script>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</head>
<body>
<div class="container">
<div class="box">
<h1>
Form Details
</h1>
<h2>
Name: <span id="result-name" />
</h2>
<h2>Email: <span id="result-email" />
</h2>
<h2>
Subject: <span id="result-subject" />
</h2>
<h2>Details: <span id="result-details" />
</h2>
<div class="action-btn">
<div class="inner">
<form action="" method="GET">
<input class="btn" type="submit" value="Edit" onclick="returnBack()" />
</div>
</form>
<div class="inner">
<form onsubmit="sendEmail(); reset(); return false;">
<input class="btn-1" type="submit" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
The javascript file result.js
//call function using event listener
window.addEventListener('load',() => {
//create a const variable
const params = (new URL(document.location)).searchParams;
const name = params.get('name');
const email = params.get('email');
const subject = params.get('subject');
const details = params.get('details');
document.getElementById("result-name").innerHTML = name;
document.getElementById("result-email").innerHTML = email;
document.getElementById("result-subject").innerHTML = subject;
document.getElementById("result-details").innerHTML = details;
})
function returnBack(){
window.history.back();
}
I think the type="submit" in tag input is the problem. You should remove it and try again.
I have a problem that is killing me right now because I can't see why it isn't working. I have made a script in one file that works, but when I copy/paste it into the file that I want it to work in, it doesn't work.
Here's the script I just made:
<html>
<body>
<p id="myElement"></p>
<script>
if (window.location.hash == "#hello") {
document.getElementById("myElement").innerHTML = 'Vi har Hello';
} else {
document.getElementById("myElement").innerHTML = '';
}
</script>
</body>
</html>
Here it works, but when I insert it into the file that it was meant for it won't work. Here it is:
<html>
<head>
<title>...</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body id="top">
<div id="forside"></div>
<div class="bgded overlay" style="background-image:url('images/stor_1.png');">
<div id="pageintro" class="hoc clear">
<li>
<p></p><h2>Log ind</h2>
<p id="myElement"></p>
<script>
if (window.location.hash == "#hello") {
document.getElementById("myElement").innerHTML = 'Vi har Hello';
} else {
document.getElementById("myElement").innerHTML = '';
}
</script>
<div id="comments">
<font color="black">
<form action="proces.php" method="post">
<input class="form-control" type="text" id="name" size="22" name="username" placeholder="Brugernavn" required><br>
<input class="form-control" type="password" id="name" size="22" name="pass" placeholder="Kodeord" required><br>
<input type="submit" name="submit" value="Log Ind!">
</form>
</font><br>
<i class="fa fa-chevron-left" aria-hidden="true"> Tilbage til forsiden</i>
</div>
</li>
</div>
</div>
<?php include_once "footer.php"; ?>
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
</body>
</html>
What the script, I am inserting, does is to detect if #Hello is in the URL and if it is, it has to display some text... But it won't work.
Anybody who has an idea about what I could be doing wrong?
your code will only run once when your page document first time load, if you do want to check the hash every time its changed, it is better to put in a change callback.
please also be sure you jQuery relative path is right.
$(function() { // ensure you will execute script after document loaded
$(window).on('hashchange', function() { // put you code in side change callback.
if (window.location.hash == "#hello") {
document.getElementById("myElement").innerHTML = 'Vi har Hello';
} else {
document.getElementById("myElement").innerHTML = '';
}
});
});
<html>
<head>
<title>...</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body id="top">
<div id="forside"></div>
<div class="bgded overlay" style="background-image:url('images/stor_1.png');">
<div id="pageintro" class="hoc clear">
<li>
<p></p>
<h2>Log ind</h2>
<p id="myElement"></p>
<script>
</script>
<div id="comments">
<font color="black">
<form action="proces.php" method="post">
<input class="form-control" type="text" id="name" size="22" name="username" placeholder="Brugernavn" required>
<br>
<input class="form-control" type="password" id="name" size="22" name="pass" placeholder="Kodeord" required>
<br>
<input type="submit" name="submit" value="Log Ind!">
</form>
</font>
<br>
<i class="fa fa-chevron-left" aria-hidden="true"> Tilbage til forsiden</i>
</div>
</li>
</div>
</div>
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
<script type="text/javascript">
$(function() {
$(window).on('hashchange', function() {
if (window.location.hash == "#hello") {
document.getElementById("myElement").innerHTML = 'Vi har Hello';
} else {
document.getElementById("myElement").innerHTML = '';
}
});
});
</script>
</body>
</html>
try adding these
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
at the top in the head section
I am trying to create a login page like facebook. Used html and javascript I managed to create login page with predefined username and password.If you type correct password then it will redirect to a new page. But if you type wrong password or username then it will show error message on the side of textbox like real facebook
my code is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fakebook -Login</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body class="login">
<div id="facebook-Bar">
<div id="facebook-Frame">
<div id="logo"> Facebook </div>
<br>
<br>
<br>
<br>
<div class="loginbox radius">
<h2 style="color:#141823; text-align:center;">Log in to Facebook</h2>
<div class="loginboxinner radius">
<div class="loginheader">
</div>
<div class="loginform">
<form id="login" action="" method="post">
<p>
<input type="text" id="username" name="username" placeholder="Your Email" value="" class="radius" />
</p>
<p>
<input type="password" id="password" name="password" placeholder="Password" class="radius" />
</p>
<p>
<button class="radius title" onclick="check(this.form)" name="client_login">Log In</button>
</p>
<script language="javascript">
function check(form)
{
if(form.username.value == "rohit" && form.password.value == "password")
{
window.open('target.html')
}
else
{
document.getElementById("username").innerHTML = "wrong username"
}
}
</script>
<br>
<br>
forgot your password?</label></td>
| sign up for facebook</label></td>
</form>
</div>
</div>
</div>
</body>
</html>
Here is the facebook error message
i have a simple Jquery script which allow me to place a nice drop down login box but i have a simple issue with it
when i tried to place more than 1 box lets say 5 the script totally messed
i believe its something regarding the DIV id's and duplication but i don't find a way to resolve this problem
JS code
// Login Form
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
html code
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script src="js/login.js"></script>
</head>
<body>
<div id="bar">
<div id="container">
<!-- Login Starts Here -->
<div id="loginContainer">
<span>Login</span><em></em>
<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span>Forgot your password?</span>
</form>
</div>
</div>
<!-- Login Ends Here -->
</div>
</div>
</body>
</html>
Yes, Change the ID's and It will work for more than one.