We have a small project at which I want to create a login page that takes data from a vue data list and if the data corresponds with the username and passwords introduced in html it will load a new page. I don't exactly know how to properly take and check the data from the vue data list and I searched in the documentation for a while but I got lost and didn't find how exactly to do it so any help would be awesome.
This is the page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="libs/vue/vue.js"></script>
<script type="text/javascript" src="libs/axios/axios.js"></script>
<script src="login.js" defer></script>
</head>
<body id="indexbody">
<div class="Login" id="Login">
<div class="container">
<h1>LOGIN</h1>
<form id="login-form" method="post">
<div class="text-field">
<input type="text" name="username" required autocomplete="off"/>
<span></span>
<label for="username"><b>Username</b></label>
</div>
<div class="text-field">
<input type="password" name="password" required autocomplete="off"/>
<span></span>
<label for="password"><b>Password</b></label>
</div>
<div class="LoginBTN">
<input type="button" value="Login" id="loginBTN" onclick="validate(this.form)"/>
</div>
</form>
</div>
</div>
</body>
</html>
Here is the js file:
var login = new Vue({
el: "#Login",
data: {
loginUsers: [{
"username":"admin",
"password":"admin"
},
{
"username":"Razvan",
"password":"parolamea"
}]
},
methods: {
}
});
function validate(form){
var un=form.username.value;
var pw=form.password.value;
for(var users in loginUsers){
if(un==users.username && pw==users.password){
window.location='table.html';
return;
}
else{
alert("Login failed");
}
}
}
For use the Vue instance variables you have to bind some model variables to the inputs, and move the validate function to a method of the Vue instance. Something like this:
for the html file:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="libs/vue/vue.js"></script>
<script type="text/javascript" src="libs/axios/axios.js"></script>
<script src="login.js" defer></script>
</head>
<body id="indexbody">
<div class="Login" id="Login">
<div class="container">
<h1>LOGIN</h1>
<form id="login-form" method="post">
<div class="text-field">
<input v-model="username" type="text" name="username" required autocomplete="off"/>
<span></span>
<label for="username"><b>Username</b></label>
</div>
<div class="text-field">
<input v-model="password" type="password" name="password" required autocomplete="off"/>
<span></span>
<label for="password"><b>Password</b></label>
</div>
<div class="LoginBTN">
<input type="button" value="Login" id="loginBTN" #click="validate()"/>
</div>
</form>
</div>
</div>
</body>
</html>
and this for the js file:
var login = new Vue({
el: "#Login",
data: {
username: '',
password: '',
loginUsers: [{
"username":"admin",
"password":"admin"
},
{
"username":"Razvan",
"password":"parolamea"
}]
},
methods: {
validate() {
const un = this.username;
const pw = this.password;
for(var userIndex in this.loginUsers){
const user = this.loginUsers[userIndex];
if(un==user.username && pw==user.password){
window.location='table.html';
return;
}
}
alert("Login failed");
}
}
});
Related
I’m working on exercise, a simple chat/store messages, working on localhost, but it’s not working properly. The objective is to send user and message, and store the user and messages sent with a date. Like:(11:32 #USER: Hello world).
This message data (with user,message and date) should be displayed on page, one after another.
I’m doing this with no dependencies, but I cannot seem to make that work. I will post a feedle on it, can someone help me with this?
let messages = document.getElementById("messages");
let textbox = document.getElementById("textbox");
let button = document.getElementById("button");
let username = document.getElementById("username");
button.addEventListener("keyup", function () {
var newMessage = document.createElement("ul");
newMessage.innerHTML = textbox.value;
messages.appendChild(newMessage);
textbox.value = "";
let time = new Date();
});
<!DOCTYPE HTML>
<html>
<head>
<title>Chat</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
<title><b>chatbox</b></title>
<form action="" method="get" class="web-form"></form>
<link rel="icon" href="129663.png"/>
</head>
<body>
</form>
<h1 style="color:rgb(168, 203, 231);text-align:left;">chatbox</h1>
<form class="flex-columns">
<div>
<ul id="messages"></ul>
<label id="user" for="username"><b>Username:</b></label>
<input name="username" type="text" name="name" id="name" required/>
<label id="msg" for="msg"><b>Message:</b></label>
<textarea placeholder="Type message.." name="msg" required></textarea>
</div>
<button type="submit" id="button">Send</button>
</form>
<script src="index.js"></script>
</body>
</html>
Since the button type is submit , on click the form submits and performs its default behavior ( send a get request - effectively refreshing the page ) . To prevent this you will have to accept to add e.preventDefault()
in your event handler code .
let messages = document.getElementById("messages");
let textbox = document.getElementById("textbox");
let button = document.getElementById("button");
let username = document.getElementById("username");
button.addEventListener("click", function (e) {
e.preventDefault();
var newMessage = document.createElement("ul");
newMessage.innerHTML = textbox.value;
messages.appendChild(newMessage);
textbox.value = "";
let time = new Date();
});
<!DOCTYPE HTML>
<html>
<head>
<title>Chat</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
<title><b>Web form</b></title>
<form action="" method="get" class="web-form"></form>
<link rel="icon" href="129663.png"/>
</head>
<body>
<h1 style="color:rgb(168, 203, 231);text-align:left;">Web Form Chat</h1>
<form class="flex-columns">
<div>
<ul id="messages"></ul>
<label id="user" for="username"><b>Username:</b></label>
<input name="username" type="text" name="name" id="name" required/>
<label id="msg" for="msg"><b>Message:</b></label>
<textarea id="textbox" placeholder="Type message.." name="msg" required></textarea>
</div>
<button type="submit" id="button">Send</button>
</form>
<div id="messages">
</div>
<script src="index.js"></script>
</body>
</html>
I am working on vs code extension development(web view) and I want to separate the HTML file and the JS file.
When I use readFileSync() to read the HTML file, it successfully parses the HTML element in the web view, but the Javascript is not working.
I have tried to directly put all the JS code into the tag and it works. Therefore, I think maybe it is the relative path problem. I have tried different types of path:
'../js/main.js', '..\js\main.js'
and also the absolute path from my C drive and they are not working. I really have no idea about it.
My file structure:
My file reader from my extension.ts:
function getWebviewContent(url: vscode.Uri) {
// url.fsPath : xxxx\helloworld\src\html\index.html
return fs.readFileSync(url.fsPath, "utf8");
}
My HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello World Testing</title>
</head>
<body>
<h1> Hello Form </h1>
<div className="form-row">
<div className="form-group col-md-6">
<label>Email</label>
<input type="email" className="form-control" id="inputEmail" ref="email" />
</div>
<div className="form-group col-md-6">
<label>Name</label>
<input type="text" className="form-control" id="inputName" ref="name" />
</div>
</div>
<button type="button" id="greeting" class="btn btn-primary" style="margin: 10px">Submit</button>
<script type="text/javascript" src="../js/main.js"></script>
</body>
</html>
My JS File:
(function() {
const vscode = acquireVsCodeApi();
const btn = document.getElementById('greeting');
btn.onclick = () => {
const name = document.getElementById('inputName').value;
console.log(name)
vscode.postMessage({
command: 'greeting',
text: "Hello, " + name
});
}
}())
I have a new trial and it works, but now I don't know how to reference the correct path in my HTML file.
I changed my file reader function:
function getWebviewContent(url: vscode.Uri) {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello World Testing</title>
</head>
<body>
<h1> Hello Form </h1>
<div className="form-row">
<div className="form-group col-md-6">
<label>Email</label>
<input type="email" className="form-control" id="inputEmail" ref="email" />
</div>
<div className="form-group col-md-6">
<label>Name</label>
<input type="text" className="form-control" id="inputName" ref="name" />
</div>
</div>
<button type="button" id="greeting" class="btn btn-primary" style="margin: 10px">Submit</button>
<script type="text/javascript" src="${url}"></script>
</body>
</html>`;
}
That is how I call the function:
const scriptPathOnDisk = vscode.Uri.file(path.join(context.extensionPath, 'src/js', 'main.js'));
const scriptUri = scriptPathOnDisk.with({ scheme: 'vscode-resource' });
panel.webview.html = getWebviewContent(scriptUri);
When I print out getWebviewContent(), it is a html string and I found that:
<script src="vscode-resource:/c%3A/Users/Kelvinyu/Documents/test/helloworld-vscode-extension/helloworld/src/js/main.js">
I think this is the correct path, but how can I reference this in my html, I want it to be relative.
I've includede an external javascript file "check.js" to my home.html page but it seems that it is not working.
Here's the code for check.js:
function required()
{ var empt=document.forms["form1"]["city_name"].value;
if(empt=="")
{
alert("City name is required");
return false;
}
return true;
}
And code for home.html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Forecast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
<script src="check.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
</head>
<body>
<p>
<form name="form1" action='/weather' method="post" autocomplete="off" onsubmit="required()">
<h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
</p>
</body>
</html>
What's wrong??
Use an inline script in the HTML file:
<script>
your code here
</script>
Because the return value from the handler determines if the event is canceled you need to change this section:
onsubmit="required()"
with:
onsubmit="return required()"
function required(e)
{ var empt=document.forms["form1"]["city_name"].value;
if(empt=="")
{
console.log("City name is required");
return false;
}
return true;
}
<form name="form1" action='/weather' method="post" autocomplete="off" onsubmit="return required()">
<h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
There are a few problems here. Firstly, you can't have a <form> element inside a <p> element, so your HTML should look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Forecast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
<script src="check.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
</head>
<body>
<form name="form1" action="/weather" method="post" autocomplete="off" onsubmit="required()">
<h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
</body>
</html>
Secondly, you need to stop the form from submitting so it can be checked, but if it's fine, you need the form to submit to where the data is. To solve this, make required() fire with the onclick event of the submit button instead of the onsubmit event of the form. Also add an e argument for use later:
<form name="form1" action="/weather" method="post" autocomplete="off">
<h1>City Name:</h1><input class="input1" type="text" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit" onclick="required(e)">
</form>
You also need placeholder text for your input instead of a value, so it isn't actually filled in if people don't touch it:
<input class="input1" type="text" name="city_name" onfocus="this.value=''" placeholder="enter city name here....">
And then make your function look like this:
function required(event) {
event.preventDefault();
var empt=document.forms["form1"]["city_name"].value;
if(!empt) {
alert("City name is required");
return;
}
document["form1"].submit();
}
And that should now work!
Your code as you've written it is working. The alert will never be shown because the value is never empty. To solve this use a placeholder attribute instead of a value in your input element:
placeholder="enter city name here...."
Fixed:
1 - use getElementByID
2 - you have a value set, test for that as well
3 - add return to your onsubmit
function required()
{ let empt=document.getElementById("city_name").value;
if(empt=="" || empt.includes("enter"))
{
//alert("City name is required");
return false
}
return true;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Forecast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
<script src="check.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
</head>
<body>
<p>
<form name="form1" action='/weather' method="post" autocomplete="off" onsubmit="return required()">
<h1>City Name:</h1><input class="input1" type="text" id="city_name" name="city_name" onfocus="this.value=''" value="enter city name here...."> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
</p>
</body>
</html>
I'm trying to submit a form to a server but it must first be validated by a function. However I keep getting a reference Error even though I declared the function. Also, when I click the button it will always submit even if I don't add the click attribute to the button.
<html id="website" class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script>
jQuery(document).ready(function($){
var onlineStatus = true;
var formObjects = null;
//Local Storage or Send to Server
function save(){
if(onlineStatus == false){
formObjects = $('#form').serializeObject();
alert("saving to local: " + formObjects);
alert(formObjects.length);
} else{
alert("submitting!!");
$("#form").submit();
}
}
});
</script>
</head>
<body>
<form id="form" role="form" method="post" action="https://www.webserver.com/echo.php">
<div id="form1" class="container">
<h1>Personal Information</h1>
<div class="form-group">
<label for="name">Name</label>
<input id="name" name="name" type="text" required
placeholder="Enter Name">
</div>
<div class="form-group">
<label for="email">E-mail:</label>
<input id="email" name="email" type="email" required
placeholder="E-mail">
</div>
<button id="submitButton" class="btn btn-default" onclick="save();return false;" >Submit</button>
</div>
</form>
</body>
Scope is everything! save function is defined inside .ready method so it will only be accessible there. You must declare this function outside that scope:
var onlineStatus = true;
var formObjects = null;
//Local Storage or Send to Server
function save(){
//stuff here
}
jQuery(document).ready(function($){
I'm new to HTML and developing and login form. Please find below the code I used. I want to import my JavaScript code into HTML form.please help me.
C:\Program Files\xampp\htdocs\forsiteSystem\thems\js\validation.js
function validateForm()
{
var x=document.forms["login"]["email"].value;
if (x==null || x=="")
{
alert("Email must be filled out");
return false;
}
}
C:\Program Files\xampp\htdocs\forsiteSystem\thems\login.html
<html>
<head>
<title>Login form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/validation.js">
</script>
</head>
<body>
<div>
<form name="login" action="" method="post" onsubmit="return validateForm()">
Email: <input type="text" name="email"><br>
password: <input type="text" name="pass"><br>
<input type="submit" id="Submit_button" >
</form>
</div>
</body>
</html>
Include your js file properly like this:
<script src="js/validation.js">
This code works for me.try
<html>
<head>
<title>Login form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/builder.js">
</script>
</head>
<body>
<div>
<form name="login" action="" method="post" onsubmit="return validateForm()">
Email: <input type="text" name="email"><br>
password: <input type="text" name="pass"><br>
<input type="submit" id="Submit_button" >
</form>
</div>
</body>
</html>
Your js file will be on same directory under js file with this name builder.js.
Code in js file is :
function validateForm()
{
var x=document.forms["login"]["email"].value;
if (x==null || x=="")
{
alert("Email must be filled out");
return false;
}
}
This tag should work:
<script src="js/validation.js"></script>
Script path should be.
<script src="js\validation.js"></script>
Js path shoulb be js/validation.js
<html>
<head>
<title>Login form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/validation.js" type="text/javascript">
</script>
</head>
<body>
<div>
<form action=".\login.php" method="post" onsubmit="return validateForm()">
Email: <input type="text" name="email"><br>
password: <input type="text" name="pass"><br>
<input type="submit" id="Submit_button" >
</form>
</div>
</body>
</html>
this is how you can add js correctly
<script type="text/javascript" src="js/validation.js"></script>