There are two codes. one works the other doesn't work.
I debugged it and I found that
"var eb = new EventBus("http://192.168.0.27:8081/bridge");"
this line in login.js doesn't work well.
Thank you so much everytime.
working
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//cdn.jsdelivr.net/sockjs/0.3.4/sockjs.min.js"></script>
<script src="vertx-eventbus.js"></script>
</head>
<style>
.news {
font-size: 20pt;
}
</style>
<body>
<div class="news">Latest news:</div>
<br>
<div id="status" class="news"></div>
<script>
var eb = new EventBus("http://192.168.0.27:8081/bridge");
eb.onopen = function() {
// set a handler to receive a message
eb.registerHandler('call', function(error, message) {
console.log('received a message: ' + JSON.stringify(message));
});
// send a message
eb.send('call', {name : 'tim', age : 587});
}
</script>
</body>
</html>
no working - login.html
<!DOCTYPE html>
<!--
login.html
-->
<html>
<head>
<meta charset="UTF-8">
<title>Flat HTML5/CSS3 Login Form</title>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="login-form" id="loginForm">
<input type="text" id="username" placeholder="username" />
<input type="password" id="password" placeholder="password" />
<input class="submit" type="submit" title="Login" value="Login" onclick="check(this.form)" />
<p class="message">
Not registered? Create an account
</p>
</form>
</div>
</div>
<script src="js/login.js"></script>
</body>
</html>
login.js
document.write("<script src='https://code.jquery.com/jquery-1.11.2.min.js'></script>");
document.write("<script src='//cdn.jsdelivr.net/sockjs/0.3.4/sockjs.min.js'></script>");
document.write("<script src='/vertx-eventbus.js'></script>");
function check(form)/*function to check userid & password*/
{
/*the following code checkes whether the entered userid and password are matching*/
if(form.username.value != "" && form.password.value != "") {
var eb = new EventBus("http://192.168.0.27:8081/bridge");
eb.onopen = function() {
// set a handler to receive a message
eb.registerHandler('call', function(error, message) {
console.log('received a message: ' + JSON.stringify(message));
});
// send a message
eb.send('call', {name : 'tim', age : 587});
}
} else {
alert("Input Password or Username")/*displays error message*/
}
}
You have written
document.write("<script src='/vertx-eventbus.js'></script>");
differently than in the working code. There is an extra "/" before "vertx..". Could that be the problem?
Related
I am trying to figure out how to make Javascript error messages be displayed in the DOM and stay there until valid information is added into the form inputs. Right now they appear for a brief moment and then disappear. On top of that, I have to use Bootstrap 5 to stylize the JavaScript Error messages. I've been trying to figure this out all day and I haven't had any luck.
I have my HTML and Javascript down below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Form</title>
<link rel="stylesheet" href="login/login.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<main>
<h1 class="text-primary">Login</h1>
<form id="login_form" name="login_form" method="get">
<div>
<label for="email1">Email:</label>
<input name="email" type="email" autocomplete="email" id="email" class="form-control">
<span class="text-danger">*</span>
<span id="errorName"></span>
</div>
<div>
<label for="password">Password:</label>
<input name="password" type="password" autocomplete="password" id="password" class="form-control">
<span class="text-danger">*</span>
<span id="errorName"></span>
</div>
<div>
<label> </label>
<button type="submit" class="btn btn-primary" id="login">Login
</div>
</form>
</main>
</main>
<script defer src="login/login.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
const $ = selector => document.querySelector(selector);
document.addEventListener("DOMContentLoaded", () => {
$("#login").addEventListener("click", () => {
// get values user entered in textboxes
const email = $("#email");
const password = $("#password");
// create a Boolean variable to keep track of invalid entries
let isValid = true;
// check user entries - add text to error message if invalid
if (email.value == "" || password.value == "") {
email.nextElementSibling.textContent = "You seem to have forgotten your username and password.";
password.nextElementSibling.textContent = "You seem to have forgotten your username and password.";
return false;
} else {
email.nextElementSibling.textContent = "";
password.nextElementSibling.textContent = "";
}
if (email.value == "admin#example.com" && password.value == "password") {
document.writeln("Welcome back Admin!")
} else {
document.writeln("That email and password doesn't seem to be right. Try again.")
}
// submit the form if all entries are valid
if (isValid) {
$("#login_form").submit();
}
});
});
I am trying to get my code to check if the value submitted in "username" already exist in "usernames" list. If it does, would like to have the message displayed and if it does not, add that value to the "usernames" list and submit form.
Don't understand why my code doesn't work. Please see below:
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Validating Form Data</title>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>
<h3>Register your account:</h3>
<p id="errors"></p>
<form id="registration-form" method="POST" action="https://formdump.codeinstitute.net/">
<div class="username">
<label for="username">Username:</label>
<input id="username" name="username" type="text" required>
</div>
<div class="password">
<label for="password">Password:</label>
<input id="password" name="password" type="password" required>
</div>
<input type="submit">
</form>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
CSS
label {
display: block;
}
input {
margin-bottom: 1rem;
}
p {
color: red;
font-weight: bold;
}
JS
let usernames = ["Harry", "Daisy", "Michael", "Sarah", "Sally"];
// Write your code here
let form = document.getElementById("registration-form");
form.addEventListener("submit", handleSubmit);
let errorMsg = document.getElementById("errors");
let uName = form.elements["username"].value;
let abc = usernames.includes(uName);
function handleSubmit(event) {
event.preventDefault();
if (abc) {
errorMsg.innerHTML = `<p>Sorry, the username ${uName} is already in use. Please choose another username.</p>
`;
} else {
usernames.push(uName);
form.submit();
console.log(usernames);
}
}
I tried replacing includes() with indexOf(), but still doesn't work.
As I said in the comment,you need to get the input value correctly each time it submit,so needs to put below code inside handleSubmit,otherwise uName will be null and abc will always be false(due to it execute before submiting)
let uName = form.elements["username"].value;
let abc = usernames.includes(uName);
let usernames = ["Harry", "Daisy", "Michael", "Sarah", "Sally"];
// Write your code here
let form = document.getElementById("registration-form");
form.addEventListener("submit", handleSubmit);
let errorMsg = document.getElementById("errors");
function handleSubmit(event) {
event.preventDefault();
let uName = form.elements["username"].value;
let abc = usernames.includes(uName);
if (abc) {
errorMsg.innerHTML = `<p>Sorry, the username ${uName} is already in use. Please choose another username.</p>
`;
} else {
usernames.push(uName);
form.submit();
console.log(usernames);
}
}
label {
display: block;
}
input {
margin-bottom: 1rem;
}
p {
color: red;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Validating Form Data</title>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>
<h3>Register your account:</h3>
<p id="errors"></p>
<form id="registration-form" method="POST" action="https://formdump.codeinstitute.net/">
<div class="username">
<label for="username">Username:</label>
<input id="username" name="username" type="text" required>
</div>
<div class="password">
<label for="password">Password:</label>
<input id="password" name="password" type="password" required>
</div>
<input type="submit">
</form>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
Here I'm trying to execute the following code but it throws the above error in console log in website page, I am unable to identify the error .
I have coded this webpage in such a way that it should show an error like "enter the user name" and "enter the password" whenever the input boxes are left empty but instead of this it is showing an uncaught type error. Kindly help me to find the solution.
my github code link is:https://github.com/harish-123445/login-form-using-html-css-javascript
function vfun(){
var uname=document.forms["myform"]["uname"].value;
var pword=document.forms["myform"]["pword"].value;
if(uname==null || uname=="" ){
document.getElementById("errorBox").innerHTML =
"enter the user name";
return false;
}
if(pword==null || pword==""){
document.getElementById("errorBox").innerHTML =
"enter the password";
return false;
}
if (uname != '' && pword != '' ){
alert("Login successfully");
}
}
<!DOCTYPE html>
<html >
<head>
<title>sign in form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js.js"></script>
<body>
<div class="box">
<img src="user.png" class="user">
<h1 >LOGIN HERE</h1>
<form class="myform" onsubmit= "return vfun()">
<p>USERNAME </p>
<input type="text" name="uname" placeholder="enter username" >
<p>PASSWORD </p>
<input type="password" name="pword" placeholder="enter password">
<div id="errorBox"></div>
<input type="submit" name="" value="login">
<br><br>
<a href="register.html" >Register for new user</a>
</form>
</div>
</body>
</head>
</html>
I have edited your code. I have called your username and password using getElementById and your two error boxes with different id names and now it is working fine.
function vfun(){
var uname=document.getElementById("name").value;
var psword=document.getElementById("passw").value;
if(uname==null || uname=="" ){
document.getElementById("errorBox2").innerHTML =
"enter the user name";
return false;
}
if(psword==null || psword==""){
document.getElementById("errorBox").innerHTML =
"enter the password";
return false;
}
if (uname != '' && pword != '' ){
alert("Login successfully");
}
}
<!DOCTYPE html>
<html >
<head>
<title>sign in form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js.js"></script>
<body>
<div class="box">
<img src="user.png" class="user">
<h1 >LOGIN HERE</h1>
<form class="myform" onsubmit= "return vfun()">
<p>USERNAME </p>
<input type="text" name="uname" id="name"
placeholder="enter username" >
<div id="errorBox2"></div>
<p>PASSWORD </p>
<input type="password" name="pword" id="passw"
placeholder="enter password">
<div id="errorBox"></div>
<input type="submit" name="" value="login">
<br><br>
<a href="register.html" >Register for new user</a>
</form>
</div>
</body>
</head>
</html>
Please help me on sending specific data only 'Name' and 'ON' or 'OFF' to XML file from a HTML page.
Problem is I couldn't connect all these with each other to get a result like below
<name>RYAN</name>
<BREAKING>ON</BREAKING>
Here is my code below:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>BREAKING NEWS SWITCH</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
</head>
<body>
<br /><br />
<div class="container" style="width:500px;">
<h2 align="center">BREAKING NEWS SWITCH</h2><br /><br />
<form method="post" id="insert_data">
<div class="form-group">
<label>Enter Your Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Your Name Please....?"/>
</div>
<div class="form-group">
<label>BREAKING NEWS</label>
<div class="checkbox">
<input type="checkbox" name="BREAKING" id="BREAKING" unchecked />
</div>
</div>
<input type="hidden" name="hidden_BREAKING" id="hidden_BREAKING" value="OFF" />
<br />
<input type="submit" name="insert" id="action" class="btn btn-info" value="Insert" />
</form>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#BREAKING').bootstrapToggle({
on: 'ON',
off: 'OFF',
onstyle: 'success',
offstyle: 'danger'
});
$('#BREAKING').change(function(){
if($(this).prop('unchecked'))
{
$('#hidden_BREAKING').val('OFF');
}
else
{
$('#hidden_BREAKING').val('ON');
}
});
$('#insert_data').on('submit', function(event){
event.preventDefault();
if($('#name').val() == '')
{
alert("Please Enter Your Name");
return false;
}
else
{
var form_data = $(this).serialize();
$.ajax({
url:"file:///C:/Documents/MY%20Projects/PHP%20toggles/BREAKING%20NEWS/insert.PHP",
method:"POST",
data:form_data,
success:function(data){
if(data == 'done')
{
$('#insert_data')[0].reset();
$('#BREAKING').bootstrapToggle('off');
alert("Data Inserted");
}
}
});
}
});
});
</script>
Here the problem is I can't connect those with the PHP file below.
PHP:
<?php
if(isset($_REQUEST['insert']))
{
$xml = new DOMDocument("1.0", "UTF-8");
$xml->load("C:\Documents\MY Projects\PHP toggles\BREAKING NEWS\TEMPLATE.xml");
$rootTag = $xml->getElementsByTagName("XML")->item(0);
$nameTag = $xml->createElement("name",$_REQUEST['name']);
$BREAKINGTag = $xml->createElement("BREAKING",$_REQUEST['BREAKING']);
$xml->save("C:\Documents\MY Projects\PHP toggles\BREAKING NEWS\TEMPLATE.xml");
}
?>
And thus this xml file is not updating as expected.
XML:
<?xml version="1.0" encoding="UTF-8"?>
<XML>
<name>NAMES INSERTED SHOULD BE HERE</name>
<BREAKING>TOGGLE ON/OFF SHOULD BE HERE</BREAKING>
</XML>
Please help me on that.
I am creating a date input and I want an error alert if the date input is left blank.
currently I have and it doesnt work:
<!Doctype html>
<html>
<head>
<script type="text/javascript">
function validateDate(value) {
var a = document.getElementById("date").value;
if (a = = = "") {
window.alert("Error");
return false;
}
}
</script>
</head>
<body>
<h1>Tee Time Sign-up Form</h1>
<form>
<div id="teeDate">
Date:<input type=“date” id=“date” name=“date”><br>
<button id=teeTime onClick="validateDate()">Submit</button><br>
</div>
</form>
</body>
</html>
Do not put spaces in your operators, use === not = = =, a better use to say if a !== "" if a is NOT an empty string
Try this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Tee Time Sign-up Form</h1>
<form>
<div id="teeDate">
Date:<input type="date" id="date" name="date" /><br />
<button id="teeTime">Submit</button><br />
</div>
</form>
<script type="text/javascript">
var button = document.getElementById("teeTime");
function validateDate(value) {
if (value === "") {
window.alert("Error");
return false;
}
}
button.addEventListener("click", function (e) {
var value = document.getElementById("date").value;
validateDate(value);
});
</script>
</body>
</html>