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>
Related
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");
}
}
});
It's possible to have a <button> outside of the <form> element and tie it to the relevant form using the for attribute. I'm doing this because I want to include a fontAwesome icon in the button, which I cant do with <input> since <input> is a void element(no closing tag). However, If I want to tie an event handler to the form submit event, the event isn't recognized. Why is that? The click event on the button works, but that wont give me access to the form's data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
crossorigin="anonymous"
/>
</head>
<body>
<form id="form0">
<input type="text" name="title" />
<input type="text" name="id" />
</form>
<button type="submit" for="form0"><i class="fas fa-cart-plus"></i></button>
<form id="form1">
<input type="text" name="title" />
<input type="text" name="id" />
</form>
<button type="submit" for="form1"><i class="fas fa-cart-plus"></i></button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/test.js"></script>
</html>
//This works
$(document).on("click", "button", function (event) {
console.log("running click event handler");
});
//This doesn't
$(document).on("submit", "form", function (event) {
console.log(
"running submit event handler, serilized data is: " + $(this).serialize()
);
});
You can use $(this).prev().serialize() to access form above button and get value of that form .
Demo Code:
$(document).on("click", "button", function(event) {
console.log("running click event handler");
console.log(
"running submit event handler, serilized data is: " + $(this).prev().serialize()
);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
</head>
<body>
<form id="form0">
<input type="text" name="title" />
<input type="text" name="id" />
</form>
<button type="submit" for="form0"><i class="fas fa-cart-plus"></i></button>
<form id="form1">
<input type="text" name="title" />
<input type="text" name="id" />
</form>
<button type="submit" for="form1"><i class="fas fa-cart-plus"></i></button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</html>
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>
All I'm trying to do is get the val() of an Text Input. Here is an example.
I don't know if external links are allowed so I will also paste it here :
<div class="input-group">
<input type="text" id="#test" class="form-control" aria-label="..." style='border-radius:4px;'>
</div>
<script>
// Always shows up as undefined..not "".
console.log($("#test").val());
</script>
Does anyone know why I cannot get the value of this element?
You have to remove the # sign from the id attribute :
<input type="text" id="#test" class="form-control" aria-label="..." ..
//_____________________^
Hope this helps.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Why can't I get the input value of the #test?</title>
</head>
<body style='padding:64px;'>
<div class="input-group">
<input type="text" value="test value" id="test" class="form-control" aria-label="..." style='border-radius:4px;'>
</div>
<script>
// Always shows up as undefined..not "".
console.log($("#test").val());
</script>
</body>
</html>
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>