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>
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");
}
}
});
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>
So I'm trying to get an alert through jquery code. I have 3 inputs so login.password and button and when writing your login and password you should get an alert (log+pass). The error that i'm getting is:
GET http://localhost/php5/jquery-3.3.1.min.js net::ERR_ABORTED.
Here is my code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> PHP </title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#send").click(function(){
var log=$("#login").val()
var pass=$("#password").val()
alert(log+pass)
})
})
</script>
</head>
<body>
<input id="login" placeholder="Login"><br>
<input type="password" id="password" placeholder="Password"><br>
<input type="button" id="send" value="send">
<div class="status"></div>
</body>
</html>
try to change
<script src="jquery-3.3.1.min.js"></script>
to
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
it works for me
I have a JS <script> function and then a HTML<form> script and I am trying to implement them into my webpage side by side. However, When I implement them into the page they automatically put themselves one above the other as if there was a <br> in my script.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>test</TITLE>
<BODY>
<script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"></script><form action="http://www.qrz.com/lookup" method="post" style="display:inline"><b>QRZ callsign lookup:</b> <input name="callsign" size="8" type="text" /> <input type="submit" value="Search" /> </form>
</HTML>
All of the information I have found says that I would need to download the .js from the server and modify some of its code and remove the <br>that may be inside it but I am not sure if there is any other way to do it.
<style>
.se-flair {
display: inline-block !important;
}
</style>
Add this to your HTML and it's done.
You can just wrap the script tag in a div with an id or classname and style it like so:
HTML:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>test</TITLE>
<BODY>
<div id='left'>
<script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"></script>
</div>
<form action="http://www.qrz.com/lookup" method="post" style="display:inline"><b>QRZ callsign lookup:</b> <input name="callsign" size="8" type="text" /> <input type="submit" value="Search" /> </form>
</HTML>
CSS
#left {
float: left;
}
If you just want to remove the you could do as mentioned before with the float property, i make the example:
/* Styles go here */ #blockUsr{ float:left; margin: 5px; }
<!DOCTYPE html> <html> <head> <TITLE> test </TITLE> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <BODY> <div id="blockUsr"> <script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"> </script> </div> <form action="http://www.qrz.com/lookup" method="post" style="display:inline"> <b> QRZ callsign lookup: </b> <input name="callsign" size="8" type="text" /> <input type="submit" value="Search" /> </form> </body> </html>
I'm trying to disable a submit button when a file is not selected following a working solution online. Is it something to do with the script type?
This is the example I followed: disable submit button until file selected for upload
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
$(document).ready(
function(){
$('input:submit').attr('disabled',true);
$('input:file').change(
function(){
if ($(this).val()){
$('input:submit').removeAttr('disabled');
}
else {
$('input:submit').attr('disabled',true);
}
});
});
</script>
</head>
<body>
<form action="#" method="post">
<input type="file" name="fileInput" id="fileInput" />
<input type="submit" value="submit" disabled />
</form>
</body>
</html>
Try with Jquery declared because the Jquery is not included:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
$(document).ready(
function(){
$('input:submit').attr('disabled',true);
$('input:file').change(
function(){
if ($(this).val()){
$('input:submit').removeAttr('disabled');
}
else {
$('input:submit').attr('disabled',true);
}
});
});
</script>
</head>
<body>
<form action="#" method="post">
<input type="file" name="fileInput" id="fileInput" />
<input type="submit" value="submit" disabled />
</form>
</body>
</html>
Include the jQuery library in the <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>