In my angularJS project I'm getting below error. Can you please help me?
Error
angular.min.js:117Error: [$parse:syntax] http://errors.angularjs.org/1.5.6/$parse/syntax?p0=Shoping&p1=is%20an%20unexpected%20token&p2=8&p3=Online%20Shoping%20-%20login&p4=Shoping%20-%20login
at Error (native)
at localhost:8082/onlineshopping/angular.min.js:6:412
at Object.s.throwError (localhost:8082/onlineshopping/angular.min.js:228:143)
at Object.s.ast (localhost:8082/onlineshopping/angular.min.js:220:47)
at Object.td.compile (localhost:8082/onlineshopping/angular.min.js:229:420)
at kc.parse (localhost:8082/onlineshopping/angular.min.js:258:213)
at g (localhost:8082/onlineshopping/angular.min.js:125:278)
at k (localhost:8082/onlineshopping/angular.min.js:105:129)
at $ (localhost:8082/onlineshopping/angular.min.js:77:397)
at $b (localhost:8082/onlineshopping/angular.min.js:61:398)
My HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Online Shopping - Login Page</title>
<script src="angular.min.js"></script>
<!-- <link rel="stylesheet" href=".\WEB-INF\lib\css\Styles.css"/> -->
</head>
<body ng-app>
<div style="text-align:center">
<h1>{{Online Shoping - login}}</h1>
<form action="login_submit" name="login" method="get">
Email Address: <input type="email" placeholder="username#mail.com" required/><br><br>
Password: <input type="password" placeholder="password" required/><br><br><br>
<input type="submit" value="Login"/>
</form>
</div>
</body>
</html>
you just need to update the <h1></h1> tage like
<h1>Online Shoping - {{login}}</h1>
or you can also use <h1></h1> like
{{'Online Shopping - '+ login}}
for more details click fiddler link here
This is wrong {{Online Shoping - login}} because Online Shoping is not a value nor valid syntax. You can use a string and concatenate the value:
{{'Online Shopping - '+ login}}
Or simply interpolate where needed only:
<h1>Online Shopping - {{login}}</h1>
Related
I'm trying to publish form template to my main page which sits in different location:
my Code looks like this:
<!DOCTYPE HTML>
<html>
<head>
<script src="js/Jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Test</title>
<style>
html
{
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
</style>
</head>
<body>
<select name="Template_Picker" id="Template_Picker">
<option value="payment">payment</option>
<option value="identity">identity</option>
</select>
<br>
<div id="Templates_Pages">
<button class="Template" value="Send" id="Template_Button">Show selected</button>
</div>
<form action="test/submit.php" method="post" id="submit_template">
<input type="hidden" id="payment" name="payment" value="payment">
<center id="output">
</center>
</form>
</body>
<script src="test/template.js"></script>
</html>
I'm trying to take my form template which looks like this:
<div id="template" class="template">
<input type="text" placeholder="Full Name" name="Full_Name">
<input type="text" placeholder="Credit Card" name="Credit_Card">
</div>
and place her on my main page, so the JS looks like this:
$(".Template").click(function(){
template_p = ($('#Template_Picker').val());
$.get("test\\"+template_p+".php",function(output){
$("#template_p").append(output);
//template_p = payment when choosing
});
});
when on my JS i choose "template_p" it doesnt work, but when i'm using the center id "output" it works, why?
Thanks in Advance.
It appears like you cannot append an output to an "input" tag.
so i kept using the "center" tag instead.
I have a form in Angular JS 1.5.11.
I have it set up to show an error message for empty required fields on form submit. I need to add the ability to also detect if an email is valid on submit.
So far, I can't get this to work. I tried using the "built-in" email field validation, the tried an ng-pattern. Still, no matter what you type in the field, it shows no error. Only the empty field show an error.
<div class="row">
<div class="col-md-12">
<div class="form-group" ng-class="{ 'has-error' : abc.myForm.$submitted && abc.myForm.email.$error.required && abc.myForm.email.$error.pattern }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="abc.user.email" ng-pattern="emailFormat" required>
<p class="help-block error-block">Enter a valid email address.</p>
</div>
</div>
</div>
See the whole form at https://plnkr.co/edit/3lAMOM3agSMGC9AAr2IT?p=preview
Update
To clarify, I am using novalidate because I don't want to use the HTML5 built-in error message. If I remove that, I get
instead of
First of all, sorry for misinterpreting the question. For getting the state of any input feild inside a form, You could use $valid state for that. Like for your form, you could call like {{abc.myForm.email.$valid}} inside your form and this would return true or false.
See, type email is HTML5 property and if you put no validate in form, default validation of HTML5 will not work. Remove novalidate from form and use it.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as abc">
<p>Hello {{abc.name}}!</p>
<form name="abc.myForm" ng-submit="abc.save(abc.user)" >
<div class="row">
<div class="col-md-12">
<div class="form-group" ng-class="{ 'has-error' : abc.myForm.$submitted && (abc.myForm.email.$error.required || abc.myForm.email.$error.pattern) }">
<label>Email</label>
<input ng-pattern = '/^(([^<>()\[\]\.,;:\s#\"]+(\.[^<>()\[\]\.,;:\s#\"]+)*)|(\".+\"))#(([^<>()[\]\.,;:\s#\"]+\.)+[^<>()[\]\.,;:\s#\"]{2,})$/i' type="email" name="email" class="form-control" ng-model="abc.user.email" required="" />
<p class="help-block error-block">Enter a valid email address.</p>
</div>
</div>
</div>
<p ng-show="abc.myForm.email.$error.pattern">
Not valid email!
</p>
<input type="submit" class="btn btn-primary">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" type="text/css" href="login.css"> -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
</head>
<body ng-app="loginApp">
<div class="container">
<div class="login_logo">
</div>
<div class="form_container" ng-controller="loginCtrl" >
<div class="error_msg" ng-if="form_login.username.$dirty" ng-messages="form_login.username.$error">
<div class="alertmsg" ng-message="required">Username and password are required</div>
</div>
<div class="form_left">
<form class="form_login" name="form_login" ng-submit="submitForm()" novalidate>
<div class="usr"><input id="username" name="username" ng-model="username" type="text" autofocus="autofocus" required /></div>
<div class="psw"><input id="password" name="password" ng-model="password" type="password" required /></div>
</form>
</div>
<div class="form_right">
<a class="submit" href="" ng-click="submitForm()">submit</a>
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript">
var app=angular.module("loginApp",["ngMessages"]);
app.controller("loginCtrl", function($scope){
$scope.username = "";
$scope.password = "";
$scope.submitForm=function(){
};
});
</script>
</body>
</html>
Now I have a login page as it shows above, I'm trying to do the validation with ngMessages
If I have to use <a> which is outside of form to submit it instead of button, how should I do?
How can I make sure error messages are displayed when username or password is empty, and only after user submit the form.
How to prevent user from resubmitting form with <a>?
To show error messages only after form submit, add a variable '$scope.submitted = true;'.
In order to prevent re-submit submit button can be disabled.
Please refer following link for detailed explanation.
https://scotch.io/tutorials/angularjs-form-validation
Hope it helps.
You can check the validation result in your controller function with:
if ($scope.form_login.$valid) {
...
}
The form in angularjs will be validated auto. For all form members you can check the doc
I am new to angular js. please help me with the below issue
I have a form with a controller loginController. I have two text boxes user.email and user.password.
I want to post the data to servlet onclick of the Log in button.
I have written the following code, but when i click Log in, the data is not getting posted on to the server. Also there is no error message.
Below is my JSP file
`
<html ng-app="practiceApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel ="stylesheet" type="text/css" href="bootstrap.min.css"/>
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="practice.js"></script>
<form name='login' ng-controller='loginController' ng-submit="login()">
<div>
{{hello}}
<label>Email</label>
<input type="email" name="email" ng-model="user.email" required/>
<span ng-show='login.email.$dirty && login.email.$error.required'>Required</span>
<span ng-show='login.email.$dirty && login.email.$error.email'>Not a valid email</span>
<label>Password</label>
<input type="password" name="password" ng-model="user.password" required/><br/>
<span ng-show='login.password.$dirty && login.password.$error.required'>Required</span>
<button ng-disabled="login.$invalid">Log in</button>
</div>
</form>
</body>
</html>
`
JavaScript File
`
var app = angular.module('practiceApp',[]);
app.controller('loginController',function($scope,$http){
$scope.login = function(){
$http({
method: 'POST',
url:'/login',
headers:{'Content-Type':'application/json'},
data:$scope.user
}).success(function(data){
$scope.status=data;
});
}
});
`
I have tried all the solutions that are available but couldn't find any result.. Kindly help on this
Your <button> does not cause the form to submit. Change to <input type="submit" ng-disabled="login.$invalid">Log in</button> or remove ng-submit from the form and add ng-click="login()" to the <button>.
So I have been getting help from some as to how I could fix the issue about how I want to be able to click a button, and have it instead auto select the search box on my site.
Well, people are telling me to use Javascript for the click to do it and I was told to use this code:
function setFocus() {
document.getElementById("myTextbox").focus();
}
But I don't know how to properly combine it with my html. Looked around on Google and everything isn't piecing together for me..
My HTML:
<html>
<head>
<title>DLL Download Database</title>
<meta name="description" content="Need a .DLL file? Don't worry, I am sure we have a DLL available for you!">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript">
function setFocus() { document.getElementById("search").focus(); }
</script>
</head>
<body>
<div class="my_container cf">
<div class="headerbuttons"><p>HOME</p></div>
<div class="headerbuttons"><p>HOW TO INSTALL</p></div>
<div class="headerbuttons"><p style="text-decoration: none; color:#000000;padding:3px;display:block;" onClick="setFocus(search);">CAN'T FIND A FILE?</p></div>
<div class="headerbuttons"><p>DLL SOFTWARE FIXER</p></div>
</div>
<h2 class="homepage-start"><strong>WELCOME TO DLL DOWNLOAD.US!</strong></h2>
<div class="body-main2">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search for a DLL" />
</form>
</div>
</body>
</html>
Please make the following changes in your html
HTML
<div class="body-main2">
<form method="get" action="/search" id="search">
<input id="searchbox" name="q" type="text" size="40" placeholder="Search for a DLL"/>
</form>
</div>
<div class="headerbuttons">
<a style="text-decoration: none;
color:#000000;padding:3px;display:block;" onclick="setFocus();">
<p>CAN 'T FIND A FILE?</p>
</a>
</div>
JavaScript
<script type="text/javascript">
function setFocus() {
document.getElementById("searchbox").focus();
}</script>
Its working fine !!! See this working JSFIDDLE Demo
try
onClick="javascript:setFocus();" // no parameter
or more simply
onClick="setFocus();" // no parameter
BTW, you should be setting the focus on the input tag not the form, so change the id of the input tag to be id="search" and of course remove it from the form.
onClick="setFocus(search);
remove "search" inside the braces
set id="search" for text field
Working Demo
You were not calling the function setFocus(). Also, there was no ID assigned to the textbox.
HTML:
<input name="q" id="search_box" type="text" size="40" placeholder="Search for a DLL" />
Javascript:
document.getElementById("search_box").focus();
instead of calling setFocus(search)
have you tried calling only setFocus()
in
`<div class="headerbuttons"><p style="text-decoration: none;color:#000000;padding:3px;display:block;"
onClick="setFocus(search);">CAN'T FIND A FILE?</p></div>`
EDIT:
remove id = search from the form element and set it on the text element
<form method="get" action="/search" >
<input name="q" type="text" size="40" placeholder="Search for a DLL" id="search" />
</form>