I'm trying to switch a "sign in" form for a "sign up" form whenever the user clicks on the "Sign Up" button in my angular app, but at the moment nothing is happening when the button is clicked; The sign in form remains on the screen and there are no console errors. Can anyone tell me where I'm going wrong?
I'm attempting to do this purely in html, is this even possible to achieve?
EDIT: I included a signup function in my UserCtrl which takes care of signing in/ out. Now when I click on sign up the alert is trigger but I get a console error saying TypeError: boolean is not a function.
$scope.signup = function() {
alert('signup function hit');
$scope.signup = true;
}
EDIT 2:
<!DOCTYPE html>
<html ng-app="myApp" >
<head>
<title> My App</title>
<link rel="stylesheet" type="text/css" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/signin.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"/>
</head>
<body ng-controller="MainCtrl">
<div ng-switch on="view.name">
<div ng-switch-default ng-controller="UserCtrl">
<div ng-show="!isAuthenticated">
<form class = "form-signin">
<div class="control-group">
<img src="img/logo.png">
<br />
<div class="controls">
<br />
<input type="text" ng-model="username" placeholder = "Email Address" >
</div>
<br />
<div class="controls">
<input type="password" ng-model="password" placeholder = "Password" >
</div>
<div class="controls">
<button class = "btn btn-default" ng-click="signIn()">Sign In</button>
<button class = "btn btn-primary" ng-click="view.name = 'signup'">Register</button>
</div>
</div>
</form>
</div>
<div ng-switch-when="signup" ng-controller = "UserNewCtrl" >
<label>
This is where my form should be when my signup button is clicked.
</label>
</div>
//This part of index.html is only shown when a user has been authenticated
<div ng-show="isAuthenticated">
<div class="col-md-2">
//MenuBar code is here
</div>
//Other templates get loaded here
<div class="col-md-10">
<div ng-view></div>
</div>
</div>
</div>
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/transition.js"></script>
<script src="js/ui-utils.js"></script>
</div>
</body>
</html>
MainCtrl.js:
angular.module('myApp.controllers')
.controller('MainCtrl', function($scope) {
$scope.view={
name: ''
};
})
To achieve your requirement you need a wrapper controller that hold ng-switch on model because ngSwitch creates child scope.
You can design your view like
<body ng-controller="mainCtrl">
<div ng-switch on="view.name">
<div ng-switch-default ng-controller="signInCtrl">
<h1>this is sign in page</h1>
sign in
<br>
go to sign up page
</div>
<div ng-switch-when="signup" ng-controller="signUpCtrl">
<h1>this is sign up page</h1>
sign up
<br>
go to sign in page
</div>
</div>
</body>
Here mainCtrl holds view.name and by default ng-switch-default works means your sign in page, then when you click
go to sign up page
view.name model changed and your sign-up page appear.
Check the Demo
move the app controller to the html tag, then the directive in your body tag should read if you want to match an expression
<html ng-app="myApp">
<body ng-switch="signup">
see here
where signup is a boolean in your myApp scope, that will presumably be changed when the signIn criteria is satisfactory
$rootScope.signup = true;
you can also achieve similar with the ng-show and ng-hide directives
Related
I have created a login page that allows you to log in using username and password. However, it is currently so that you are always redirected to the "profile" page and there is then checked by PHP whether the login data are correct, because the data are on the DB.
Therefore I have the idea with a validate function directly on the loginpage to check if the data is correct and then I just create a session.
Does anyone have an idea how I can do this?
Here is the code:
<?php session_start();?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login</title>
<link href="bootstrap_style.css" rel="stylesheet" id="bootstrap-css"> <!-- maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <!-- //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js or bootstrap.js-->
<script src="jquery.js"></script> <!-- //cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper fadeInDown">
<div id="formContent">
<!-- Tabs Titles -->
<!-- Icon -->
<div class="fadeIn first">
<img src="default_logo2.png" id="icon" alt="User Icon" onclick="window.open('url', '_blank');"/>
</div>
<!-- Login Form -->
<form action="searchpage.php" method="post" onsubmit="validateForm(event);">
<input type="text" id="login" class="fadeIn second" name="username" placeholder="username">
<input type="password" id="password" class="fadeIn third" name="password" placeholder="password">
<input type="submit" class="fadeIn fourth" value="Log In">
</form>
<!-- Remind Passowrd -->
<div id="formFooter">
<a class="underlineHover" style="color:red" id="warning"></a>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function validateForm(event) {
var input_username = document.getElementById("login");
var input_password = document.getElementById("password");
if (input_username.value == '' || input_username.value.charAt(0) == ' ' || input_password.value == '') {
event.preventDefault();
document.getElementById("warning").innerHTML = "Fill empty fields!";
}
else {
return true;
}
}
</script>
with this I reach the DB:
$pdo = new PDO('mysql:host=localhost;dbname=ausleihe', 'root', '');
and that is the SELECT:
$login_session = "SELECT * FROM login WHERE username = '".$hereshouldbetheusernamefromform."' AND password = '".herethepasswordfromform."'";
If you need more code or have questions, ask me!
Thx
Client-side JavaScript cannot directly access a Host-side PHP program except through AJAX calls. Only the Host-side software has access to Host-side databases.
I am new to Angular.js and am trying to send form data to the server but I am getting an error for angular.js:13424 Error: [ng:areq]. I did try many answers available on Stack Overflow but I am not able to find the answer for my problem.
index.view.html (for register)
<div class="col-md-6 col-md-offset-3" >
<input type="text" ng-model="fname" placeholder="Enter the name :"required >Fristname
<br> <br>
button type="button" class="btn btn-success navbar-btn" ng-click=register()>Register </button>
</div>
index.controller.js
(function ()
{
angular
.module('app')
.controller('register.IndexController', function($scope,$http)
{
$scope.register= function()
{
$http.post('http://localhost:9000/user/register', {firstName : $scope.fname}).success(function(response)
{ console.log($scope.fname);
})
}
})
});
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>AngularJS JWT Authentication Example & Tutorial</title>
<!-- bootstrap css -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- application css -->
<link href="app-content/app.css" rel="stylesheet" />
</head>
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<nav class="cf" ng-include="'nav/index.view.html'" ng-controller="Main.IndexController"></nav>
</nav>
</header>
Seems that you are using the wrong controller identifier while processing your request.
You have named your controller as register.IndexController, but from the html , you are trying to access it as Main.IndexController.
Please check whether changing the html controller idenentifier solves your problem.
If you plan on using nested controllers, you can do that also. But the scope has to be identified correctly whichever controller you are using.
I'm new to Angular, i've been trying to use ui-router in this project, but ui-view doesn't show anything, did i miss something?.
I'm trying to build a mean app, the folder structure is the following:
The app folder is where the angular app is located.
<!DOCTYPE html>
<html lang="en" ng-app="TimeWaste">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
</head>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="">
<input type="text" ng-model="login.email">
<input type="password" ng-model="login.password">
<button>Login</button>
<a ui-sref="signUp">Create an account</a>
</div>
</div>
</nav>
<body>
<div ui-view></div>
</body>
<script src="node_modules/angular/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app/app.js"></script>
<script src="app/signup/signup-controller.js"></script>
</html>
this is the app.js
(function()
{
angular.module('TimeWaste',['ui.router'])
.config(function($stateProvider)
{
$stateProvider
.state('signup',{
url:"/signup",
templateUrl: "app/signup/signup.html",
controller:"SignupController"
})
})
}());
the signup.html view
<div class="row">
<div class="col-sm-6">
<div class="row">
<strong>Email Address:</strong>
<input type="text" ng-model="newUser.email" class="form-control">
</div>
<div class="row">
<strong>Password:</strong>
<input type="password" ng-model="newUser.password" class="form-control">
</div>
<button ng-click="createUser()">Submit</button>
</div>
</div>
and the signup controller
(function()
{
angular.module('TimeWaste')
.controller('SignupController', ['$scope','$state',function($scope,$state){
}]);
}());
It may typo and path missing !!
in html used <a ui-sref="signUp">Create an account</a> but in $stateProvider used signup so need to change signUp to signup.
and I assume your app.js is in app directory because you use
<script src="app/app.js"></script> in home page.
if right then your template path need to change templateUrl: "signup/signup.html",
However you can configure ui.route to be case insensitive.
like:
.config(function($stateProvider,$urlMatcherFactoryProvider,)
{
$urlMatcherFactoryProvider.caseInsensitive(true);
$urlMatcherFactoryProvider.strictMode(false);
$stateProvider
.state('signup',{
url:"/signup",
templateUrl: "signup/signup.html",
controller:"SignupController"
})
})
I've got this form with bootstrap but I can't find why it's not working properly ant I've no idea why.
HEAD>>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/corrections.css" rel="stylesheet" type="text/css"/>
<script src="js/JQuery-2.1.1-min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
--> code here
</body>
HTML >>
<div class="col-lg-4">
<form class="form-inline well">
<div class="form-group">
<label class="sr-only" for="text">Some label</label>
<input id="text" type="text" class="form-control" placeholder="Text here">
</div>
<button type="submit" class="btn btn-primary pull-right">Ok</button>
<div class="alert alert-danger" style="display:none">
<h4>Error</h4>
Required amount of letters is 4
</div>
<div class="success alert-success" style="display:none">
<h4>Success</h4>
You have the required amount of letters
</div>
</form>
</div>
JS >>
<script>
$(function () {
$("form").on("submit", function () {
if ($("input").val().length < 4) {
$("div.form-group").addClass("has-error");
$("div.alert").show("slow").delay(4000).hide("slow");
return;
} else if ($("input").val().length > 3) {
$("div.form-group").addClass("has-success");
$("div.success").show("slow").delay(4000).hide("slow");
return;
}
});
});
</script>
the alert class shows everytime, any idea why?
The use of $("input") here is unusual. That selector will pull back all elements on the page that are <input>s, which is almost certainly not what you mean. (If there are other inputs on the page, you might get exactly what you're describing.) Use a more precise selector, like $("#text"), and maybe use debug to output the value of val().length so you know what you're evaluating.
(On a side note, "text" is not a very useful name for a text input, and your else-if seems redundant, but they probably aren't causing problems in your code.)
Can you please tell me how to show an error message on submit button click ?.I am getting an error message after running the program (when I write required :true). I need to show an error message when a user submits the form. I am using this plugin https://github.com/McNull/angular-febworms
Can we get onchange event of select field ?
In my example a red border is displayed when I run the application. I don't want this. I need this when a user clicks the 'submit' button
http://plnkr.co/edit/JOI82JrEBcKJMrzLgtZd?p=preview
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" href="https://rawgithub.com/McNull/angular-febworms/master/package/febworms.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.0/angular.js" data-semver="1.2.0"></script>
<script src="http://code.angularjs.org/1.2.0/angular-route.js"></script>
<script type="text/javascript" src="https://rawgithub.com/McNull/angular-febworms/master/package/febworms.min.js"></script>
<script type="text/javascript" src="dummy-schema.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MyFormController as frmCtrl">
<div class="container">
<div class="row-fluid">
<form class="form-horizontal" name="form.state" novalidate>
<div febworms-form
febworms-schema="form.schema"
febworms-form-data="form.data">
</div>
<div class="form-actions">
<a class="btn btn-primary" ng-disabled="form.state.$invalid" ng-click="frmCtrl.save()">Save changes</a>
</div>
</form>
</div>
</div>
</body>
</html>
But need to blur event to validate or onchange event ?
Since your form name is 'form.state' and your field name is 'required' (which is a bit confusing by the way, you may want to change that), you can get useful information about your validation state with the following expressions in the scope of your form:
form.state.required.$error // yields something like { "required": true, "pattern": false }
form.state.required.$valid // yields a boolean
form.state.$error
form.state.$valid
I haven't heard of a way of knowing whether a form has already been submitted or not. My best shot would be to add some state for this in the controller :
$scope.errorShown = false;
$scope.showErrorMessage = function(){
$scope.errorShown = true;
};
And in your HTML :
<div class="form-actions">
<a class="btn btn-primary" ng-disabled="form.state.$invalid" ng-click="(form.state.$valid ? frmCtrl.save() : showErrorMessage())">Save changes</a>
</div>
<div ng-if="errorShown && form.state.$invalid">
Your form is not valid.
</div>
Plunkr here.