When I press the submit button for my form, it calls JQuery to stop the page from refreshing, but it says that the function is not found (load).
I get multiple errors in the console, here is a screenshot: https://gyazo.com/ed25b9f8c1c8b0a6ecafedbad4d4e9ef
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<title>TheTawk | Sign up</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('form').submit(function (event){
event.preventDefault();
var firstName = $("#firstName").val();
var lastName = $("#lastName").val();
var email = $("#email").val();
var username = $("#username").val();
var password = $("#password").val();
var signUp = $("#signUp").val();
$(".form-message").load("classes/register",{
firstName: firstName,
lastName: lastName,
email: email,
username: username,
password: password,
signUp: signUp
});
});
});
</script>
</head>
<body>
<?php include 'includes/header.php'; ?> <br><br>
<div class="container">
<div class='row justify-content-md-center'>
<div class='col-md-auto'>
<form autocomplete="off" action="" ="classes/register" method="post">
<input type="text" class="form-control" name="firstName" id="firstName" autofocus="on" placeholder="First name"><br>
<input type="text" class="form-control" name="lastName" id="lastName" placeholder="Last name"><br>
<input type="text" class="form-control" name="email" id="email" placeholder="Email"><br>
<input type="text" class="form-control" name="username" id="username" placeholder="Username"><br>
<input type="password" class="form-control" name="password" id="password" placeholder="Password"><br>
<button type="submit" class="btn btn-primary" name="signUp" name="signUp" style="width: 100%;">Sign up</button>
<p class="form-message"></p>
</form>
</div>
</div>
</div>
<?php include 'includes/footer.php'; ?>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
Thanks,
Ethan!
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 have tried all codes avaliable but nothing worked.
Here is the Code :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script>
var text1 = document.getElementById("inhouse");
var text2 = document.getElementById("sahodaya");
function showsum() {
var first_number = parseFloat(text1.value);
if (isNaN(first_number)) first_number = 0;
var second_number = parseFloat(text2.value);
if (isNaN(second_number)) second_number = 0;
var result = first_number + second_number;
document.getElementById("total").value = result;
}
</script>
<title>Sahodaya 25 Report - Form</title>
</head>
<body>
<div class = "container my-3">
<form method="POST">
<fieldset disabled>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Name</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="<?php echo $_SESSION['name']?>" name = "name" value="<?php echo $_SESSION['name']?>">
<label for="disabledTextInput2" class="form-label my-2">Email</label>
<input type="text" id="disabledTextInput2" class="form-control" placeholder="<?php echo $_SESSION['email']?>" name = "email" value="<?php echo $_SESSION['email']?>">
</fieldset>
<label for="inhouse" class="form-label">Inhouse Training Done In Hours</label>
<input type="number" id="inhouse" class="form-control" placeholder="Type Here" name = "inhouse" required oninput="showsum()"><br>
<label for="sahodaya" class="form-label">Sahodaya Training Done In Hours</label>
<input type="number" id="sahodaya" class="form-control" placeholder="JSSC + PSCC (Both)" name = "sahodaya" oninput="showsum()" required><br>
<label for="total" class="form-label">Total Hours Done</label>
<input type="number" id="total" class="form-control" name = "total" value="0"><br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
But this Code is Not Wokring I tried all Solutions Available on Stack Overflow that I seen till now but nothing helped much So i m posting this if somebody can help.
I want to add the value in inhouse and sahodaya and show it in total input field.
But when I m running this it's not wokring. How can i fix this Error.
Try the below code. It should fix the issue.
Full working code snippet:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script>
function add_number() {
var first_number = parseFloat(document.getElementById("inhouse").value);
if (isNaN(first_number)) first_number = 0;
var second_number = parseFloat(document.getElementById("sahodaya").value);
if (isNaN(second_number)) second_number = 0;
var result = first_number + second_number;
document.getElementById("total").value = result;
}
</script>
<title>Sahodaya 25 Report - Form</title>
</head>
<body>
<div class="container my-3">
<form method="POST">
<fieldset disabled>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Name</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="<?php echo $_SESSION['name']?>" name="name" value="<?php echo $_SESSION['name']?>">
<label for="disabledTextInput2" class="form-label my-2">Email</label>
<input type="text" id="disabledTextInput2" class="form-control" placeholder="<?php echo $_SESSION['email']?>" name="email" value="<?php echo $_SESSION['email']?>">
</fieldset>
<label for="inhouse" class="form-label">Inhouse Training Done In Hours</label>
<input type="number" id="inhouse" class="form-control" placeholder="Type Here" name="inhouse" required onkeyup="add_number()"><br>
<label for="sahodaya" class="form-label">Sahodaya Training Done In Hours</label>
<input type="number" id="sahodaya" class="form-control" placeholder="JSSC + PSCC (Both)" name="sahodaya" onkeyup="add_number()" required><br>
<label for="total" class="form-label">Total Hours Done</label>
<input type="number" id="total" class="form-control" name="total" value="0"><br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
You should wrap the document.getElementById call inside the function or should move the script block below your form.
Your document will be rendered line by line by the browser. Since you've your script tag before the form element. the elements were not available when you call the document.getElementById("inhouse") so the var first_number gets undefined and when the form is rendered the element will be available. But still your var is undefined. That's why your code is not getting executed.
I've also refactored your function to arrow function and removed few unnecessary methods.
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Sahodaya 25 Report - Form</title>
</head>
<body>
<div class = "container my-3">
<form method="POST">
<fieldset disabled>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Name</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="<?php echo $_SESSION['name']?>" name = "name" value="<?php echo $_SESSION['name']?>">
<label for="disabledTextInput2" class="form-label my-2">Email</label>
<input type="text" id="disabledTextInput2" class="form-control" placeholder="<?php echo $_SESSION['email']?>" name = "email" value="<?php echo $_SESSION['email']?>">
</fieldset>
<label for="inhouse" class="form-label">Inhouse Training Done In Hours</label>
<input type="number" id="inhouse" class="form-control" placeholder="Type Here" name = "inhouse" required oninput="showSum()"><br>
<label for="sahodaya" class="form-label">Sahodaya Training Done In Hours</label>
<input type="number" id="sahodaya" class="form-control" placeholder="JSSC + PSCC (Both)" name = "sahodaya" oninput="showSum()" required><br>
<label for="total" class="form-label">Total Hours Done</label>
<input type="number" id="total" class="form-control" name = "total" value="0" disabled><br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script>
var text1 = document.getElementById("inhouse");
var text2 = document.getElementById("sahodaya");
var resultField = document.getElementById("total");
const showSum = () => {
resultField.value = Number(text1.value) + Number(text2.value);
}
</script>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
i tried to apply validation system uses jQuery i include bootstrap CDN and jQuery and jQuery validation. while input name works fine and input title doesn't work.
hi, i tried to apply validation system uses jQuery i include bootstrap CDN and jQuery and jQuery validation. while input name works fine and input title doesn't work.
hi, i tried to apply validation system uses jQuery i include bootstrap CDN and jQuery and jQuery validation. while input name works fine and input title doesn't work.
$(document).ready(function () {
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$("#myform").validate({
rules: {
title: {
required: true,
minlength:2,
maxlength:5,
},
name: {
required: true,
minlength:2,
maxlength:5,
},
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rules</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.19.2/dist/jquery.validate.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div class="container">
<form id="myform">
<div class="form-group">
<label>Categories <span class="text-hightlight">*</span></label>
<select class="form-control" name="category_id" id="category_id">
<option>select</option>
<option value="1">title</option>
<option value="2">name</option>
</select>
</div>
<div class="form-group">
<label>title <span class="text-hightlight">*</span></label>
<input type="text" name="titre" id="title" class="form-control"/>
</div>
<div class="form-group">
<label>name <span class="text-hightlight">*</span></label>
<input type="text" name="name" id="name" class="form-control"/>
</div>
<button class="btn btn-theme" type="submit" >cherche</button>
</form>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
You have a typo here: <input type="text" name="titre" id="title" class="form-control"/>
titre should be title
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.