So I'm trying to implement login into my website, here is the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter:400,700">
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
<div class="card card-signin my-5">
<div class="card-body">
<h5 class="card-title text-center">Sign In</h5>
<form class="form-signin">
<div class="form-label-group">
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputEmail">Email address</label>
</div>
<div class="form-label-group">
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Remember password</label>
</div>
<button onclick="register()" class="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Sign in</button>
<hr class="my-4">
<button class="btn btn-lg btn-google btn-block text-uppercase" type="submit"><i class="fab fa-google mr-2"></i> Sign in with Google</button>
<button class="btn btn-lg btn-facebook btn-block text-uppercase" type="submit"><i class="fab fa-facebook-f mr-2"></i> Sign in with Facebook</button>
</form>
</div>
</div>
</div>
<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="/__/firebase/8.4.3/firebase-app.js"></script>
<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="/__/firebase/8.4.3/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="/__/firebase/8.4.3/firebase-auth.js"></script>
<script src="/__/firebase/8.4.3/firebase-firestore.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
<script src="login.js"></script>
</body>
</html>
And here is the code for register() in the js file
const firebase = require("firebase");
function register(){
let email = document.getElementById('inputEmail').value
let password = document.getElementById('inputPassword').value
firebase.auth().createUserWithEmailAndPassword(email, password)
.then((userCredential) => {
// Signed in
var user = userCredential.user;
console.log(user); // ...
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorMessage, errorCode);
});
}
However when I try to click the button to invoke the register(), I get a "register is not defined" and if I leave out the import, it'll invoke but then firebase will not be defined.
I was hoping someone could help me out?
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 am a beginner on html, CSS & JSS and I am trying to create a simple alert onclick button to test some concepts. I have created simple contact form with bootstrap design and I would just like to create an alert display the message content on click of "send" button. I have written some code down however the alert is not displaying onclick.
Here is my html file code:
<h1 class="animate__animated animate__backInLeft">Contact me</h1>
<div class="barwrapper">
<div class="bar animate__animated animate__backInLeft animate__slow"></div>
</div>
<h2>Email</h2>
<div class="mb-3">
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<h2>Message</h2>
<div class="mb-3">
<input class="form-control" id="message" rows="3">
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button onclick="getInputValue();" class="btn btn-primary me-md-2" type="button" id="send">Send</button>
</div>
And here is my js file code:
function getInputValue()
{
var inputVal = document.getElementById('#message').Value;
alert(inputVal)
}
My js file seems correctly linked to my html file :
<script src="script.js"></script>
Any idea ?
getElementById requires only the document id string, without the #
function getInputValue()
{
var inputVal = document.getElementById('message').value;
alert(inputVal)
}
You're very close, you need to declare your variable like this:
var inputVal = document.getElementById('message');
See the snippet below:
var inputVal = document.getElementById('message');
function getInputValue() {
alert(inputVal.value)
}
<h1 class="animate__animated animate__backInLeft">Contact me</h1>
<div class="barwrapper">
<div class="bar animate__animated animate__backInLeft animate__slow"></div>
</div>
<h2>Email</h2>
<div class="mb-3">
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<h2>Message</h2>
<div class="mb-3">
<input class="form-control" id="message" rows="3"></input>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button onclick="getInputValue();" class="btn btn-primary me-md-2" type="button" id="send">Send</button>
</div>
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="animate__animated animate__backInLeft">Contact me</h1>
<div class="barwrapper">
<div class="bar animate__animated animate__backInLeft animate__slow"></div>
</div>
<h2>Email</h2>
<div class="mb-3">
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<h2>Message</h2>
<div class="mb-3">
<input class="form-control" id="message" rows="3">
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button onclick="getInputValue();" class="btn btn-primary me-md-2" type="button" id="send">Send</button>
</div>
</body>
<script src="index.js"></script>
</html>
Index.js:
function getInputValue()
{
var inputVal = document.getElementById('message').value;
alert(inputVal)
}
I have created a dynamic inline form with bootstrap 4 and javascript. I would like to fit all my fields in one row when viewed in a desktop/laptop browser. In the mobile view, I want to stack all my fields one below the other and they should be of equal width.
I tried the bootstrap grid column layout and also attempted to fix a width for each field but it does not seem to be working. Please help.
The HTML code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST PAGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="TEST">
<meta name="author" content="TEST">
<!-- <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico"> -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<!-- Begin page content -->
<main role="main" class="container">
<div class="container">
<h3>EXAM SCHEDULE</h3><br>
<form class="form-inline" id="fields" method="post" enctype="multipart/form-data">
<div id="inside-container"></div>
<div class="form-group p-2">
<input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160">
</div>
<div class="form-group p-2">
<input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*">
</div>
<div class="form-group p-2">
<input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01">
</div>
<div class="form-group p-2">
<select class="form-control" id="recurrence" name="recurrence[]">
<option value="0">Once</option>
<option value="7">Weekly</option>
<option value="30">Monthly</option>
<option value="90">Quarterly</option>
<option value="365">Yearly</option>
</select>
</div>
<div class="input-group">
<div class="form-group p-2">
<select class="form-control" id="profile" name="profile[]">
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
<button class="btn btn-success" type="button" onclick="fields();"><span>+</span></button>
</div>
</form>
</div>
<script src="dynamicform.js"></script>
</main>
</body>
</html>
The javascript code is provided below:
var room = 1;
function fields() {
room++;
var objTo = document.getElementById('inside-container')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="form-group p-2"> <input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160"></div><div class="form-group p-2"><input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*"></div><div class="form-group p-2"><input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01"></div><div class="form-group p-2"><select class="form-control" id="recurrence" name="recurrence[]"><option value="0">Once</option><option value="7">Weekly</option><option value="30">Monthly</option><option value="90">Quarterly</option><option value="365">Yearly</option></select></div><div class="input-group"><div class="form-group p-2"><select class="form-control" id="profile" name="profile[]"><option value="1">A</option><option value="2">B</option></select></div><button class="btn btn-danger" type="button" onclick="remove_fields('+ room +');"><span>-</span></button></div><div class="clear"></div>';
objTo.appendChild(divtest)
}
function remove_fields(rid) {
$('.removeclass'+rid).remove();
}
I am unable to fit all the fields in one row in desktop view. I want my inline form to be mobile-responsive as well. Please advise.
See I have changed few things in your code . What I did was just added col-sm for div classes. You can find more about bootstrap grid system via this link. Bootstrap Grid System . Please go through the code because I have removed some codes from your original code. I think you expect this.To see the result please expan the snippet and then with Inspect Element in you browser and then navigate to mobile view . Thanks
Desktop view
Mobile view
var room = 1;
function fields() {
room++;
var objTo = document.getElementById('inside-container')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="form-group p-2 col-sm-3"> <input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160"></div><div class="form-group p-2 col-sm-2"><input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*"></div><div class="form-group p-2 col-sm-2"><input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01"></div><div class="form-group p-2 col-sm-2"><select class="form-control" id="recurrence" name="recurrence[]"><option value="0">Once</option><option value="7">Weekly</option><option value="30">Monthly</option><option value="90">Quarterly</option><option value="365">Yearly</option></select></div><div class="form-group p-2 col-sm-1"><select class="form-control" id="profile" name="profile[]"><option value="1">A</option><option value="2">B</option></select></div> <div class="form-group p-2 col-sm-1"><button class="btn btn-danger btn-lg btn-block" type="button" onclick="remove_fields('+ room +');"><span>-</span></button></div><div class="clear col-sm-1"></div>';
objTo.appendChild(divtest)
}
function remove_fields(rid) {
$('.removeclass'+rid).remove();
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST PAGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="TEST">
<meta name="author" content="TEST">
<!-- <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico"> -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<!-- Begin page content -->
<main role="main" class="container">
<div class="container">
<h3>EXAM SCHEDULE</h3><br>
<form class="form-inline" id="fields" method="post" enctype="multipart/form-data">
<div id="inside-container"></div>
<div class="form-group p-2 col-sm-3">
<input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160">
</div>
<div class="form-group p-2 col-sm-2">
<input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*">
</div>
<div class="form-group p-2 col-sm-2">
<input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01">
</div>
<div class="form-group p-2 col-sm-2">
<select class="form-control" id="recurrence" name="recurrence[]">
<option value="0">Once</option>
<option value="7">Weekly</option>
<option value="30">Monthly</option>
<option value="90">Quarterly</option>
<option value="365">Yearly</option>
</select>
</div>
<div class="form-group p-2 col-sm-1">
<select class="form-control" id="profile" name="profile[]">
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
<div class="form-group p-2 col-sm-1">
<button class="btn btn-success btn-lg btn-block" type="button" onclick="fields();"><span>+</span></button>
</div>
</form>
</div>
<script src="dynamicform.js"></script>
</main>
</body>
</html>
I have created a bootstrap signup form and the following jQuery code is not working. Despite the e.preventDefault() , the form is still being submitted, and the div containing the error message does not appear either.
Also, I have a login form with pretty much the exact same code and that one is working properly
$(function(){
$("#signup-form").on("submit",function(e){
var email=$("#emal");
var name=$("#username");
var ps=$("#password");
var psr=$("#passwordrepeat");
var error=$("#errormessage");
var errorcontainer=$("#errordiv");
if(name.val()=="" && ps.val()=="" && email.val()=="" && psr.val()==""){
error.text("Fields are empty!");
errorcontainer.removeClass("d-none");
errorcontainer.addClass("errorbg");
name.addClass("error");
ps.addClass("error");
email.addClass("error");
psr.addClass("error");
e.preventDefault();
}
});
});
body{
background:#9ec3ff !important;
}
.container{
background:#9ec3ff;
}
.col-lg-6{
margin:auto;
}
#facebook{
background:#568ac2 !important;
border:none;
border-radius:2px !important;
}
#twitter{
background:#6aabdb;
border:none;
border-radius:2px !important;
}
#google{
background:#cb3d2f;
border:none;
border-radius:2px !important;
}
#signupform{
box-shadow:0px 0px 10px #2e51a2;
}
#signupform:hover{
box-shadow:0px 0px 50px #2e51a2;
transition:0.5s;
}
.error{
box-shadow:0px 0px 10px #cb3d2f;
}
.errorbg{
border:2px solid red;
background:#fae3e3;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="signup.js"></script>
<script type="text/javascript" src="jquery.sticky.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css' integrity='sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/' crossorigin='anonymous'>
<link rel="stylesheet" type="text/css" href="signup.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<div class="container">
<div id="errordiv" class="m-auto text-danger font-weight-bold text-center col-lg-6 col-md-8 d-none">
<span id="errormessage"></span>
</div>
<div class="row mt-5">
<div id="signupform" class="col-lg-6 col-md-8 border border-primary text-center">
<span class="m-auto"><strong>Sign Up with</strong></span><br><br>
<div class="m-auto col-xl-10 col-lg-11 col-md-11 col-sm-10">
<button type="button" id="facebook" class="btn btn-primary float-left"><img class="mr-3" src="https://i.imgur.com/9FWWsfx.png"/>Facebook</button>
<button type="button" id="twitter" class="btn btn-primary float-center"><img class="mr-3" src="https://i.imgur.com/LXFDLev.png"/>Twitter</button>
<button type="button" id="google" class="btn btn-primary float-right"><img class="mr-3" src="https://i.imgur.com/AN3CMg9.png"/>Google+</button>
</div>
<br>
<span class="m-auto">Or</span><br>
<br>
<form id="signup-form">
<fieldset class="form-group">
<label for="formGroupExampleInput"><strong>E-mail</strong></label>
<input type="text" class="form-control w-75 m-auto" id="email" placeholder="Enter email" name="signup-email">
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Username</label>
<input type="text" class="form-control w-75 m-auto" id="username" placeholder="Choose username" name="signup-username">
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Password</label>
<input type="password" class="form-control w-75 m-auto" id="password" placeholder="Enter password" name="signup-password">
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Password again</label>
<input type="password" class="form-control w-75 m-auto" id="passwordrepeat" placeholder="Enter password" name="signup-passwordrepeat">
</fieldset>
<div class="checkbox">
<label>
<input type="checkbox"> I have read and agree to the Term of Service and Privacy Policy
</label>
</div>
<input type="submit" name="signup" class="btn btn-primary mb-3" value="Create Account"/>
</form>
</div>
</div>
</div>
</body>
</html>
Use the preventdefault on top of the function.
There are a set of functions which are run in the background when submit is called. In Javascript when a function starts running there is no way it could stop. It only stops when it throws an error or if it returns a value. Using preventdefalut at the last doesn't help because it is too late and the submit function has began to run. When placed at the top of the function it explicitly says that the default submit functions aren't to be run.
$(function(){
$("#signup-form").on("submit",function(e){
e.preventDefault();
var email=$("#emal");
var name=$("#username");
var ps=$("#password");
var psr=$("#passwordrepeat");
var error=$("#errormessage");
var errorcontainer=$("#errordiv");
if(name.val()=="" && ps.val()=="" && email.val()=="" && psr.val()==""){
error.text("Fields are empty!");
errorcontainer.removeClass("d-none");
errorcontainer.addClass("errorbg");
name.addClass("error");
ps.addClass("error");
email.addClass("error");
psr.addClass("error");
}
});
});
body{
background:#9ec3ff !important;
}
.container{
background:#9ec3ff;
}
.col-lg-6{
margin:auto;
}
#facebook{
background:#568ac2 !important;
border:none;
border-radius:2px !important;
}
#twitter{
background:#6aabdb;
border:none;
border-radius:2px !important;
}
#google{
background:#cb3d2f;
border:none;
border-radius:2px !important;
}
#signupform{
box-shadow:0px 0px 10px #2e51a2;
}
#signupform:hover{
box-shadow:0px 0px 50px #2e51a2;
transition:0.5s;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="signup.js"></script>
<script type="text/javascript" src="jquery.sticky.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css' integrity='sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/' crossorigin='anonymous'>
<link rel="stylesheet" type="text/css" href="signup.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<div class="container">
<div id="errordiv" class="m-auto text-danger font-weight-bold text-center col-lg-6 col-md-8 d-none">
<span id="errormessage"></span>
</div>
<div class="row mt-5">
<div id="signupform" class="col-lg-6 col-md-8 border border-primary text-center">
<span class="m-auto"><strong>Sign Up with</strong></span><br><br>
<div class="m-auto col-xl-10 col-lg-11 col-md-11 col-sm-10">
<button type="button" id="facebook" class="btn btn-primary float-left"><img class="mr-3" src="https://i.imgur.com/9FWWsfx.png"/>Facebook</button>
<button type="button" id="twitter" class="btn btn-primary float-center"><img class="mr-3" src="https://i.imgur.com/LXFDLev.png"/>Twitter</button>
<button type="button" id="google" class="btn btn-primary float-right"><img class="mr-3" src="https://i.imgur.com/AN3CMg9.png"/>Google+</button>
</div>
<br>
<span class="m-auto">Or</span><br>
<br>
<form id="signup-form">
<fieldset class="form-group">
<label for="formGroupExampleInput"><strong>E-mail</strong></label>
<input type="text" class="form-control w-75 m-auto" id="email" placeholder="Enter email" name="signup-email">
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Username</label>
<input type="text" class="form-control w-75 m-auto" id="username" placeholder="Choose username" name="signup-username">
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Password</label>
<input type="password" class="form-control w-75 m-auto" id="password" placeholder="Enter password" name="signup-password">
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Password again</label>
<input type="password" class="form-control w-75 m-auto" id="passwordrepeat" placeholder="Enter password" name="signup-passwordrepeat">
</fieldset>
<div class="checkbox">
<label>
<input type="checkbox"> I have read and agree to the Term of Service and Privacy Policy
</label>
</div>
<input type="submit" name="signup" class="btn btn-primary mb-3" value="Create Account"/>
</form>
</div>
</div>
</div>
</body>
</html>
Simply use return false; when validation fails (and preventDefault as well)
like following:
$(function(){
$("#signup-form").on("submit",function(e){
var email=$("#emal");
var name=$("#username");
var ps=$("#password");
var psr=$("#passwordrepeat");
var error=$("#errormessage");
var errorcontainer=$("#errordiv");
if(name.val()=="" && ps.val()=="" && email.val()=="" && psr.val()==""){
error.text("Fields are empty!");
errorcontainer.removeClass("d-none");
errorcontainer.addClass("errorbg");
name.addClass("error");
ps.addClass("error");
email.addClass("error");
psr.addClass("error");
e.preventDefault();
return false; // return false here to disallow from for submitting
}
});
});
I'm working on something that involves ensuring the method of form submission is POST not GET when the method might have been omitted somehow and somewhere. A JS/jQuery function checks each form before submission for a particular class. If the class exists, it goes on to check the method. If the method is a GET, it should ignore it and submit the form. But if it is undefined or empty, it should proceed to set the method to POST then submit.
This is the JQuery used. The HTML follows.
$(document).ready(function() {
$('form').submit(function() {
if (this.find(':submit').is('.ckh-method')) {
if ((this.attr('method') !== "GET" && this.attr('method') == "") || this.attr('method') == undefined) {
this.setAttribute('method', 'POST');
return true;
}
}
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fontawesome-free/web-fonts-with-css/css/fontawesome-all.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form" action="phpFile.php" method="">
<div class="row">
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user-alt"></i>
</span>
<input type="text" class="form-control" placeholder="Username" name="username" id="username" required="required" value=''>
</div>
</div>
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-lock"></i>
</span>
<input type="password" class="form-control" placeholder="Password" name="password" id="password" required="required" value=''>
</div>
</div>
<p class="conditions col-sm-12">Forgot Username or Password?
<div class="text-center col-sm-12 error"></div>
</p>
<div class="col-sm-12" id="btn-hold">
<button type="submit" class="btn btn-success btn-block ckh-method">Log In</button>
</div>
<div class="col-sm-12">
<a type="button" class="btn btn-link btn-block" href="proceed.php">Sign Up</a>
</div>
</div>
</form>
</div>
</body>
</html>
Problem: The form method doesn't change on submission because there is a JS error somewhere in my code. I'm suspecting it has to do with the 'this' keyword. Maybe I used it wrongly. I've tried setting breakpoints so I can identify the issue but the form submits before I can step into the function (in my Developer's tool) and discover the problem. Can someone help me out?
var frm = document.getElementById("form1")
frm.addEventListener("submit" ,checkmethod )
function checkmethod(event){
event.preventDefault();
if(frm.method !="GET") frm.method = "POST";
frm.submit();
}
<form id="form1" action="" >
<button type="submit">submit</button>
</form>
Found your console error. bootstrap js requires jquery so i have corrected the sequence as below
first : Jquery JS
second : Bootstrap JS
also use $(this) instead of just this
use attr for setting attributes instead of setAttribute
$('form').submit(function() {
if ($(this).find(':submit').is('.ckh-method'))
{debugger;
if (($(this).attr('method') !== "GET" && $(this).attr('method') == "") || $(this).attr('method') == undefined) {
$(this).attr('method', 'POST');
return true;
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fontawesome-free/web-fonts-with-css/css/fontawesome-all.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form" action="phpFile.php" method="">
<div class="row">
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user-alt"></i>
</span>
<input type="text" class="form-control" placeholder="Username" name="username" id="username" required="required" value=''>
</div>
</div>
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-lock"></i>
</span>
<input type="password" class="form-control" placeholder="Password" name="password" id="password" required="required" value=''>
</div>
</div>
<p class="conditions col-sm-12">Forgot Username or Password?
<div class="text-center col-sm-12 error"></div>
</p>
<div class="col-sm-12" id="btn-hold">
<button type="submit" class="btn btn-success btn-block ckh-method">Log In</button>
</div>
<div class="col-sm-12">
<a type="button" class="btn btn-link btn-block" href="proceed.php">Sign Up</a>
</div>
</form>
</div>
</body>
</html>
I edited the snippet:
$(document).ready({
$('form').submit(function() {
if ($(this).find(':submit').is('.chk-method')) {
if (($(this).attr('method') !== "GET" && $(this).attr('method') == "") || $(this).attr('method') == undefined) {
$(this).attr('method', 'POST');
return true;
}
}
})
})
Use $(this) instead of 'this' and attr() instead of setAttribute().