This question already has answers here:
How to use external ".js" files
(6 answers)
Closed 1 year ago.
Learning JS.. so bare with me.
When I call my function in tag in the HTML body it works without any issue, but if I try to put the data in an external .js file to keep the body clean (practicing for longer functions and functions commonly used) it does not function
Example HTML file snippet of the data:
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript" src="login.js"></script>
</head>
<body>
<table>
<tbody>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
</tbody>
</table>
<button type="button" onClick="getLoginValue();">Submit</button>
</body>
</html>
Example JS file
getLoginValue()
{
var enteredPassword = document.getElementById("password").value;
var enteredEmail = document.getElementById("email").value;
alert(enteredEmail+' '+enteredPassword);
}
Example of HTML file that works:
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript" src="login.js"></script>
</head>
<body>
<table>
<tbody>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
</tbody>
</table>
<button type="button" onClick="getLoginValue();">Submit</button>
<script>
function getLoginValue(){
var enteredPassword = document.getElementById("password").value;
var enteredEmail = document.getElementById("email").value;
alert(enteredEmail+' '+enteredPassword);
}
</script>
</body>
</html>
your external .js content should be :
function getLoginValue(){
var enteredPassword = document.getElementById("password").value;
var enteredEmail = document.getElementById("email").value;
alert(enteredEmail+' '+enteredPassword);
}
my page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="login.js"></script>
</head>
<body>
<table>
<tbody>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
</tbody>
</table>
<button type="button" onClick="getLoginValue();">Submit</button>
</body>
</html>
login.js file:
function getLoginValue(){
var enteredPassword = document.getElementById("password").value;
var enteredEmail = document.getElementById("email").value;
alert(enteredEmail+' '+enteredPassword);
}
because your javascript Load before HTML，
you can put javascript before /body
or
use "onload()" wait HTML load
window.onload = function(){
getLoginValue()
{
var enteredPassword = document.getElementById("password").value;
var enteredEmail = document.getElementById("email").value;
console.log(enteredEmail+' '+enteredPassword);
}
}
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript" src="login.js"></script>
</head>
<body>
<table>
<tbody>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
</tbody>
</table>
<button type="button" onClick="getLoginValue();">Submit</button>
</body>
</html>
Related
Example import found in js file
Please adjust it so that the code is saved in the js file
Hello Please Help Example import found in js file Please adjust it so that the code is saved in the js file
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>table</title>
</head>
<script>
function myim() {
a.innerHTML = import code in b.js
}
</script>
<body >
<div id="a" align="center">
</div>
<p>
<input type="button" name="go" id="bn" value="import" onclick="myim()"></p>
</body>
</html>
file b.js
<table border="1" cellpadding="0" style="border-collapse: collapse" width="80" dir="rtl">
<tr>
<td> <span lang="en">number</span></td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</table>
You can use XMLHttpRequest in javascript to request data from the server.
file.open("GET", "b.js"); can be used to open the file.
file.responseText is used to get data from that file.
Note:
Use this code on web server (local or online) to avoid CORS policy in some browsers.
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>table</title>
</head>
<script>
function myim() {
var file = new XMLHttpRequest();
file.open("GET", "b.js");
file.onreadystatechange = function (){
content = file.responseText;
document.getElementById('a').innerHTML = content;
}
file.send(null);
}
</script>
<body >
<div id="a" align="center"></div>
<p><input type="button" name="go" id="bn" value="import" onclick="myim()"></p>
</body>
</html>
Thank you
So I am learning how to use controllers in angularjs and I am stuck. I created a form using html and tested to see if the controller was responding to the html through the data-binded attribute "message". However "enter your details" does not appear under "Add Event" in the browser. Am I missing something in my code? Is there somewhere in the app.module folder where I should declare a constructor? Let me know your thoughts.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h3>Add Event</h3>
<div ng-app='eventForm' name='AddEventForm' ng-submit='AddEvent();' ng-controller='eventsCtrl'>
{{message}}
<table>
<tr>
<td>Event Name</td>
<td><input type="text" ng-model="event.Name" required /></td>
</tr>
<tr>
<td>Event Location</td>
<td><input type="text" ng-model="event.Location" required /></td>
</tr>
<tr>
<td>Event Description</td>
<td><input type="text" ng-model="event.Description" required /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="submit" ng-disabled="AddEventForm.$invalid"></td>
</tr>
</table>
</div>
<script>
var eventForm = angular.module('eventForm', []);
eventForm.controller('eventsCtrl', function($scope) {
$scope.message = 'Enter your details';
$scope.addEvent = function()
{
}
});
</script>
</body>
</html>
You can like this following
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h3>Add Event</h3>
<form
ng-app="eventForm"
ng-controller="eventsCtrl"
name="AddEventForm"
ng-submit="AddEvent()"
>
{{ message }}
<table>
<tr>
<td>Event Name</td>
<td><input type="text" ng-model="event.Name" required /></td>
</tr>
<tr>
<td>Event Location</td>
<td><input type="text" ng-model="event.Location" required /></td>
</tr>
<tr>
<td>Event Description</td>
<td><input type="text" ng-model="event.Description" required /></td>
</tr>
<tr>
<td colspan="2">
<button type="submit" ng-disabled="AddEventForm.$invalid">
Submit
</button>
</td>
</tr>
</table>
</form>
<script>
var eventForm = angular.module("eventForm", []);
eventForm.controller("eventsCtrl", function($scope, $log) {
$scope.message = "Enter your details";
$scope.AddEvent = function() {
$log.log($scope.event);
};
});
</script>
</body>
</html>
I think you should to use form tag in this situation:
<form ng-app='eventForm' name='AddEventForm' ng-submit='AddEvent();' ng-controller='eventsCtrl'>
I am Consuming Wcf Service into Angular JS Application. My Wcf Service is working correctly and My Angular JS application are able to intract with wcf Service but I am facing one problem. I have an variable in script file called $scope.msg. Here what i trying to achieve if the username and password is correct then i want to redirect the user into next page otherwise if username or password is incorrect then i want to display the messaage that worng username or password . I am getting this error in console application of Google Chrome instaed of returing into Chorme console application i want to dispaly into Angular JS application but i can not ..
Here is the Script code ..
///// <reference path="../angular.min.js" />
var app = angular.module("WebClientModule", [])
.controller('Web_Client_Controller', ["$scope", 'myService', function ($scope, myService) {
$scope.OperType = 1;
//1 Mean New Entry
//To Clear all input controls.
function ClearModels() {
$scope.OperType = 1;
$scope.Username = "";
$scope.Password = "";
}
$scope.login = function () {
var User = {
Username: $scope.Username,
Password: $scope.Password,
};
myService.AuthenticateUser(User).then(function (pl) {
$scope.msg = "Username and password is correct ";
}, function (err) {
$scope.msg = "Password Incorrect !";
console.log("Some error Occured" + err);
});
};
}]);
app.service("myService", function ($http) {
// Create new record
this.AuthenticateUser = function (User) {
return $http.post("http://localhost:52098/HalifaxIISService.svc/AuthenticateUser", JSON.stringify(User));
}
})
Here is the HTML code..
#{
Layout = null;
}
<!DOCTYPE html>
<html ng-app="WebClientModule">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/RegistrationScript/LoginScript.js"></script>
</head>
<body>
<table id="tblContainer" data-ng-controller="Web_Client_Controller">
<tr>
<td>
</td>
</tr>
<tr>
<td>
<div style="color: red;">{{Message}}</div>
<table style="border: solid 4px Red; padding: 2px;">
<tr>
<td></td>
<td>
<span>Username</span>
</td>
<td>
<input type="text" id="username" data-ng-model="Username" required="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Password</span>
</td>
<td>
<input type="password" id="password" required data-ng-model="Password" require="" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="button" id="Login" value="Login" data-ng-click="login()" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script src="~/RegistrationScript/LoginScript.js"></script>
As far i understand add if statement on this line but i am not sure where i will add this ..
myService.AuthenticateUser(User).then(function (pl) {
$scope.msg = "Username and password is correct ";
The issue is you missed to include the error message display code in your html.
SO you can include it just like
<div>
{{msg}}
</div>
Here your full html code
#{
Layout = null;
}
<!DOCTYPE html>
<html ng-app="WebClientModule">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/RegistrationScript/LoginScript.js"></script>
</head>
<body>
<table id="tblContainer" data-ng-controller="Web_Client_Controller">
<tr>
<td></td>
</tr>
<tr>
<td>
<div style="color: red;">{{msg}}</div>
<table style="border: solid 4px Red; padding: 2px;">
<tr>
<td></td>
<td>
<span>Username</span>
</td>
<td>
<input type="text" id="username" data-ng-model="Username" required="" />
</td>
</tr>
<tr>
<td></td>
<td>
<span>Password</span>
</td>
<td>
<input type="password" id="password" required data-ng-model="Password" require="" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="button" id="Login" value="Login" data-ng-click="login()" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script src="~/RegistrationScript/LoginScript.js"></script>
I want to show form value in pop up window which is open after clicking submit button. how can i show form value in pop up window after clicking submit button. My Form is below
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<form name="example" action="" method="post">
<table width="257" border="1">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" value="" name="fname" id="fname" /></td>
</tr>
<tr>
<td colspan="2"><center><input type="submit" name="submit" value="Show Value" /></center></td>
</tr>
</table>
</form>
</body>
</html>
Get data using input id and set form delay for submit and read javascript and jquery basic concept on w3 school
<html>
<head>
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<form name="example" action="" method="post" id="example">
<table width="257" border="1">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" value="" name="fname" id="fname" /></td>
</tr>
<tr>
<td colspan="2"><center> <input type="button" id="btnShow" value="Submit" /></center></td>
</tr>
</table>
</form>
<div id="dialog" style="display: none" align="center">
<label>Name :</label><span id="show_name"></span>
<br>
<label>Father Name :</label><span id="show_fname"></span>
</div>
</body>
</html>
<script>
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "User Details",
width: 300,
height: 150,
});
$("#btnShow").click(function (e) {
e.preventDefault();
var name=$("#name").val();
var fname=$("#fname").val();
$("#show_name").html(name);
$("#show_fname").html(fname);
$('#dialog').dialog('open');
setTimeout(function() {
$("#example").submit();
}, 3000);
});
});
</script>
at first, your button is type="submit", but if you want just show values you need set type="button", and call some function in onclick attribute, what will show your values,like that:
button
<input type="button" name="button" value="Show Value" onclick="myFunction()"/>
and you need add js script for show values:
function myFunction(){
var name = document.getElementById("name").value;
var fname = document.getElementById("fname").value;
alert(name+' '+fname)
}
I've a table named 'pedidos' and a table named 'locais'. For each 'pedidos' there can be several 'locais'. So I'm using this form
In the right column I want the user to type the data for each 'locais' which includes an image file. Then when the user clicks on 'Acrescentar Local' the table on the left is being filled. But instead off adding the image as well it loses the file.
I'm using the code:
<link rel="stylesheet" type="text/css" media="screen" href= "redmond/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="ui.jqgrid.css" />
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script src="grid.locale-en.js" type="text/javascript"></script>
<script src="jquery.jqGrid.src.js" type="text/javascript"></script>
<title>Untitled Document</title>
</head>
<body>
<script language="javascript">
var a=0;
var clone = [];
function addLoc()
{
/* var tmp = jQuery('#foto').clone();
clone.push(tmp[0]);*/
/*document.getElementById('loc_table').innerHTML+="<tr><td>"+document.getElementById('local').value+"</td><td>"+document.getElementById('comp').value+"</td><td>"+document.getElementById('larg').value+"</td><td>"+clone[a]+"</td></tr>";*/
document.getElementById('loc_table').innerHTML+="<tr><td>"+document.getElementById('local').value+"</td><td>"+document.getElementById('comp').value+"</td><td>"+document.getElementById('larg').value+"</td><td><input type='file' id='foto"+a+"'/></td></tr>";
document.getElementById('foto'+a)=document.getElementById('foto');
a++;
/*
"+document.getElementById('foto').value+"</td></tr>";
*/
}
</script>
<table>
<tr>
<td>
<form id='addPed' name='addPed' action='#' method='POST'>
<table>
<tr>
<td><label for="nome">nome</label></td>
<td><input type="text" id="nome" /></td></tr><tr>
<td><label for="desc">descricao</label></td>
<td><input type="text" id="desc" /></td></tr><tr>
<td><label for="datai">data de insercao</label></td>
<td><input type="text" id="datai" /></td></tr><tr>
<td><label for="datae">data de entrega</label></td>
<td><input type="text" id="date" /></td></tr><tr>
<td></td>
<td><input type="button" value="Adicionar pedido"/></td></tr>
</table>
<br/>
LOCAIS:
<br/>
<br/>
<table id="loc_table">
<tr>
<td class="tableheader">local</td>
<td class="tableheader">comprimento</td>
<td class="tableheader">largura</td>
<td class="tableheader">foto</td>
</tr>
</table>
<!-- </form> -->
</td>
<td>
<!-- <form id='addLoc' name='addPed' action='#' method='POST'> -->
<table>
<tr>
<td><label for="local">local</label></td>
<td><input type="text" id="local" /></td></tr><tr>
<td><label for="comp">comprimento</label></td>
<td><input type="text" id="comp" /></td></tr><tr>
<td><label for="larg">largura</label></td>
<td><input type="text" id="larg" /></td></tr><tr>
<td><label for="foto">foto</label></td>
<td><input type="file" id="foto" /></td></tr><tr>
<td></td>
<td><input type="button" value="Acrescentar Local" onclick="addLoc()"/></td></tr>
</table>
</form>
</td>
</tr>
</table>
Can Anyone sugest me a solution please!
Thanks