I am working with AngularJS and have a form with ng-submit in it:
<div ng-controller="LoginController as vm">
<form class="login-form" name="vm.form" ng-submit="vm.login()">
<h3 class="form-title">Sign In</h3>
<div class="form-group">
<label class="control-label">E-mailaddress</label>
<input class="form-control" type="text"
name="email" ng-model="vm.email"/>
</div>
<div class="form-group">
<label class="control-label">Password</label>
<input class="form-control" type="password" name="password" ng-model="vm.password"/>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success uppercase">Login</button>
</div>
</form>
</div>
The issue: When I click manually on Login, everything works just fine. ng-submit is correctly used by calling vm.login(). However, when I press the enter key, ng-submit isn't called. I've search for a long time, watched examples, read issues at GitHub but can't figure this out... Any suggestions?
Edit
The requested controller-code:
angular.module('app').controller('LoginController', function LoginController(LoginFactory, $state) {
'use strict';
var vm = this;
vm.login = login;
function login() {
console.log('login');
LoginFactory.login(vm.email, vm.password).then(function success(response) {
LoginFactory.setUser(response.data.data.user);
vm.user = response.data.data.user;
var savedState = LoginFactory.getOnLoginState();
$state.go(!savedState.state ? 'root.dashboard' : savedState.state, savedState.stateParams);
}, handleError);
}
});
It is not going to work that way, as we can check on Angular's docs:
if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn't trigger submit
As a workaround, I would suggest using two form tags, one to each field, both using the same function in ng-submit, something like:
<div ng-controller="LoginFactory">
<form class="login-form" ng-submit="vm.login()">
<h3 class="form-title">Sign In</h3>
<div class="form-group">
<label class="control-label">E-mailaddress</label>
<input class="form-control" type="text"
name="email" ng-model="vm.email"/>
</div>
</form>
<form class="login-form" ng-submit="vm.login()">
<div class="form-group">
<label class="control-label">Password</label>
<input class="form-control" type="password" name="password" ng-model="vm.password"/>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success uppercase">Login</button>
</div>
</form>
</div>
Alternatively You can also solve it by building the ng-enter directive and use it. Below is the code snippet to do so.
angular.module('myApp').directive('ngEnter', function () {
return function (scope, element, attrs) {
element.bind('keydown keypress', function (event) {
if(event.which === 13) {
scope.$apply(function (){
scope.$eval(attrs.ngEnter);
});
event.preventDefault();
}
});
};
});
I have tried to your code assuming your controller as provided below and its working as expected. Give it a try:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="LoginFactory">
<form class="login-form" name="vm.form" ng-submit="vm.login()">
<h3 class="form-title">Sign In</h3>
<div class="form-group">
<label class="control-label">E-mailaddress</label>
<input class="form-control" type="text"
name="email" ng-model="vm.email"/>
</div>
<div class="form-group">
<label class="control-label">Password</label>
<input class="form-control" type="password" name="password" ng-model="vm.password"/>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success uppercase">Login</button>
</div>
</form>
</div>
<script type="text/javascript">
'use strict';
angular.module('app', []).controller('LoginFactory', function LoginController($scope){
$scope.vm={};
$scope.vm.login=login;
function login(){
console.log('login');
}
});
</script>
</body>
</html>
Related
I cannot figure out why my form onsubmit function isn't working at all. I am trying to create a form that validates a confirmation password, but I cannot get the onsubmit to call the function I created, although it seems to be written correctly.
<div class="container">
<h2 class="py-2 page_title">Change Password for <%= user.username %>:</h2>
<form onsubmit="return confirm_password();" class="form_content" action="/users/edit_password/<%= user._id %>?_method=PUT" method="POST">
<div class="row">
<div class="form-group col-lg-12">
<input class="form-control" name="user[old_password]" placeholder="Old Password" type="password">
</div>
</div>
<div class="row">
<div class="form-group col-lg-12">
<input id="password" class="form-control" name="user[new_password]" placeholder="New Password" type="password">
</div>
</div>
<div class="row">
<div class="form-group col-lg-12">
<input id="confirm_password" class="form-control" name="user[confirm_password]" placeholder="Confirm Password" type="password">
</div>
</div>
<button id="button" class="button zoom" type="submit">Submit</button>
</form>
</div>
The Function
function confirm_password(){
console.log("working"); //This doesn't happen, so I know it isn't even being called
if (document.getElementById("password") != document.getElementById("confirm_password")){
alert("Passwords Do Not Match");
return false;
}
return true;
}
I have added an alert("working"); into the file to confirm that it is connected, and I am getting the alert. However, after clicking submit, the console is telling me that "confirm_password" is not a function. I have also tried adding a click listener to the button itself, and this too does not work either. Is there something obvious I am just missing? I have tried adding the script tag in the header and footer and this does not seem to change anything.
Thanks.
It conflicts with one of your IDs here:
<input id="confirm_password"
Change the function name to something else like:
onsubmit="return confirmPassword(event);"
then:
function confirmPassword(e) {
e.preventDefault();
// your codes here
}
you have to get your button as an element and add to it an event listener and then put your function in the scope of the event listner's callback
<div class="container">
<h2 class="py-2 page_title">Change Password for <%= user.username %>:</h2>
<form onsubmit="return confirm_password();" class="form_content" action="/users/edit_password/<%= user._id %>?_method=PUT" method="POST">
<div class="row">
<div class="form-group col-lg-12">
<input class="form-control" name="user[old_password]" placeholder="Old Password" type="password">
</div>
</div>
<div class="row">
<div class="form-group col-lg-12">
<input id="password" class="form-control" name="user[new_password]" placeholder="New Password" type="password">
</div>
</div>
<div class="row">
<div class="form-group col-lg-12">
<input id="Confirm_password" class="form-control" name="user[confirm_password]" placeholder="Confirm Password" type="password">
</div>
</div>
<button id="button" class="button zoom">Submit</button>
</form>
</div>
<script>
const submitbutton =document.getElementsByClassName("button zoom")[0]
submitbutton.addEventListener('click',(e)=>{
confirm_password(e)
})
function confirm_password(e){
const passoword=document.getElementById("password").value
const password2=document.getElementById("Confirm_password").value
if (passoword!=password2){
e.preventDefault()
alert("Passwords Do Not Match");
return false;
}
return true;
}
</script>
I'm new to AngularJS and I'm trying to submit a simple form using ng-submit but the button not working as well as it's not clickable, It's working on Firefox but the cursor still not changing when it's on the button and not working on Chrome.
HTML
<form novalidate name="newTripForm" ng-submit="vm.addTrip()">
<div class="form-group">
<label for="name">Trip Name</label>
<input type="text" class="form-control" id="name" name="name" ng-model="vm.newTrip.name"/>
</div>
<div class="form-group">
<input type="submit" class="btn btn-sm btn-success" id="submit" value="Add"/>
</div>
</form>
JavaScript
vm.addTrip = function ()
{
alert(vm.newTrip.name);
};
try this:
<form novalidate name="newTripForm" ng-submit="vm.addTrip()">
<div class="form-group" ng-init="vm.newTrip.name = '';">
<label for="name">Trip Name</label>
<input type="text" class="form-control" id="name" name="name" ng-model="vm.newTrip.name" required/>
</div>
<div class="form-group">
<input type="submit" class="btn btn-sm btn-success" id="submit" value="Add"/>
</div>
Based on and AngularJS docs, you can have two submits on your form.
I created a quick sample based of what is on the docs and your example.
(function() {
var app = angular.module("test", []);
var TestController = function() {
var vm = this;
vm.newTrip = {
name: ""
};
vm.addTrip = function() {
// Some code
console.log("Added " + vm.newTrip.name + " to database!");
vm.newTrip.name = "";
}
}
app.controller("TestController", [TestController]);
})();
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="test">
<div ng-controller="TestController as vm">
<form novalidate name="newTripForm" ng-submit="vm.addTrip()">
<div class="form-group">
<label for="name">Trip Name</label>
<input type="text" class="form-control" id="name" name="name" ng-model="vm.newTrip.name" />
</div>
<div class="form-group">
<input type="submit" class="btn btn-sm btn-success" id="submit" value="Add" />
</div>
</form>
</div>
</body>
</html>
try this remove the form
<div class="form-group">
<label for="name">Trip Name</label>
<input type="text" class="form-control" id="name" name="name" ng-model="vm.newTrip.name"/>
</div>
<div class="form-group">
<button ng-click="addTrip()"></button>
</div>
I'm a little newbie with jQuery, ajax and JavaScript. I need a little help to find out how to post data to a hidden iframe and then display it with the same button.
Here is what I've tried so far:
<form id="testform" name="testform" class="form-horizontal" action="testing/index.php" method="post" target="mydata">
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<input class="form-control" placeholder="please enter test name" name="test-input">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary" id="testit">I want to test!</button>
</div>
</div>
</form>
<div class="row">
<div class="col-md-12" id="target">
<script>
$(document).ready(function() {
$('#testform').on('submit', function() {
$("#target").show();
});
$("#target").hide();
});
$("#target").html('<object name="mydata" data="http://testurl.com/testing"></object>');
</script>
</div>
</div>
Thank you for your help.
What you should do, if you really need to do it this way is:
<form id="testform" name="testform" class="form-horizontal" action="testing/index.php" method="post" target="mydata">
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<input class="form-control" placeholder="please enter test name" name="test-input">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary" id="testit">I want to test!</button>
</div>
</div>
</form>
<iframe id="mydata" style="border:0; height:0;"></iframe>
<script>
$(document).ready(function() {
$('#testform').on('submit', function() {
$("#mydata").css("height", 300);
});
});
</script>
How ever I do recomend you to have a look at jQuery's $.post() documentation and .serialize() documentation. you could to something like this instead:
<form id="testform" name="testform" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<input class="form-control" placeholder="please enter test name" name="test-input">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary" id="testit">I want to test!</button>
</div>
</div>
</form>
<div id="succesResult"></div>
<script>
$(document).read((function(){
$('#testform').on('submit', function() {
var data = $( this ).serialize();
$.post("http://target.url", data, function(resultFromServer){
//success callback
$("#succesResult").html(resultFromServer); <--result could be html
})
});
}
</script>
I gave a validation to test field by giving required to it as
<div class="form-group">
<label for="inputEmail" class="col-lg-4 col-lg-offset-1 control-label">Email address</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.eMail" placeholder="Enter customer email" type="email" required focus value = "{{emailId}}">
</div>
</div>
and then i'm clicking submit button,but the validation is not working. I'm able to proceed to next page with out email.
Is there any other way to do the validation.
Can someone help me
Thanks
It should be like:
The validation not stop the submission automatically. In your submit function you need to check if the forum is valid.
Like this:
angular.module('app', []).
controller('ctrl', function($scope) {
$scope.submit = function() {
console.log('submitted');
}
});
.validation {
font-size: 80%;
color: red;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<form name="myForm">
<input type="text" name="txt" ng-model="txt" required /><br />
<!--<div class="validation" ng-show="myForm.$submitted && myForm.txt.$invalid">Please fill out the field</div>-->
<button ng-click="myForm.$valid && submit()">Submit</button><br />
Form is valid: {{myForm.$valid}}
</form>
</div>
I am newbie to angular JS and i have created a form which is
HTML
<div data-ng-controller="ReservationController"
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-10">
<label>Guest Name</label>
<input type="text" class="form-control" placeholder="" ng-model="res_guest_name" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<label>Phone</label>
<input type="phone" class="form-control" ng-model="res_member_phone">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<label>FAX</label>
<input type="phone" class="form-control" ng-model="res_member_fax">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<label>Email</label>
<input type="email" class="form-control" ng-model="res_member_email" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-8 col-sm-10">
<button type="submit" class="btn btn-success" ng-click="res_save()">Save Changes</button>
</div>
</div>
</form>
</div>
CONTROLLER
function ReservationController($scope, $http, $cookieStore,$location,$filter) {
$scope.res_save = function()
{
var save_res ="https://pbg.com/save_form.html?contactid="+conId+"&token="+token+"&id="+$scope.resId+"&page=edit&guest_name="+$scope.res_guest_name+"&phone="+$scope.res_member_phone+"&fax="+$scope.res_member_fax+"&email="+$scope.res_member_email;
$http.get(save_res).success(function(response) {
alert('success');
});
}
}
My form gets submitted even after the required fields are left empty. it shows the error, then it gets submitted.
Obviously it will submit the form you didn't handled the submission of form.You just managed the errors :-)
Use ng-disabled="myForm.$invalid"
where myForm is the name field on form
<form class="form-horizontal" name="myForm" role="form">
<button type="submit" class="btn btn-success" ng-disable="myForm.$invalid" ng-click="res_save()">Save Changes</button>
If you don't want the button to be disable till then you can use
<button type="submit" class="btn btn-success" ng-click="res_save(myForm.$valid)">Save Changes</button>
And in controller
$scope.res_save = function(valid)
{
if(valid){
var save_res ="https://pbg.com/save_form.html?contactid="+conId+"&token="+token+"&id="+$scope.resId+"&page=edit&guest_name="+$scope.res_guest_name+"&phone="+$scope.res_member_phone+"&fax="+$scope.res_member_fax+"&email="+$scope.res_member_email;
$http.get(save_res).success(function(response) {
alert('success');
});
}
}
You are not checking for Form valid state before saving it , don't expect angular to magically stop saving when form is invalid.
You should look into the documentation for ng-submit. If you move the res_save function into an ng-submit on the form (and removed the ng-click on the submit input) it will validate against required fields, prevent execution of the function until they are valid.