Below is my angularjs code: I am not able to clear inputComment field after form submit.
Here i am able to add record successfully but after adding record i am trying to clear the input field but i am not able to do it.
HTML code:
<body ng-app="taskDemo" ng-controller="taskController">
<div class="widget-body">
<form class="add-task" ng-if="addNewClicked" ng-init="addNewClicked=false;">
<div class="">
<div class="input-group">
<input name="comment" ng-model="inputComment" type="text" class="form-control" >
<div class="input-group-btn">
<button ng-click="addTask(inputComment)" type="submit" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i> Add New Task
</button>
</div>
</div>
</div>
</form>
</div>
</body>
JS Code:
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" >
app = angular.module('taskDemo', []);
app.controller('taskController', function($scope, $http){
$scope.addTask = function (task) {
$http.post("ajax/addTask.php?task="+task)
.success(function ($response) {
getTaskList();
});
$scope.inputComment = '';
};
}
</script>
Read about Prototypical Inheritance here : What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
Change yr controller to this :
app.controller('taskController', function($scope, $http){
$scope.inputComment ={value:''};
$scope.addTask = function (task) {
$http.post("ajax/addTask.php?task="+task)
.success(function ($response) {
getTaskList();
});
$scope.inputComment ={value:''};
};
}
and Inside yr HTML page change this
<input name="comment" ng-model="inputComment" type="text" class="form-control" >
to
<input name="comment" ng-model="inputComment.value" type="text" class="form-control" >
Related
This is my Html Part
<form name="userForm" ng-submit="submitForm()" novalidate>
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="user.name" required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
</div>
<button type="submit" ng-disabled="userForm.$invalid">Submit</button>
</form>
Controller
$scope.submitForm = function (userForm) {
$scope.master = angular.copy(userForm);
if ($scope.userForm.$valid) {
debugger;
console.log($scope.userForm.name);
alert('our form is amazing');
console.log($scope.userForm);
}
};
Here why i'm not able to get values from Html to Controller
DO NOT define parameter for function. Use $scope.user in controller if you want the value of user and for getting form, use $scope.userForm in your controller.
$scope.submitForm = function () {
$scope.master = angular.copy($scope.userForm);
.
.
.
}
There is no arguments passed in submitForm function from ng-submit! And log $scope.user in submitForm() & see what comes inside! If nothing comes, initialize $scope.user ={}; outside the submitForm(). Then you can get inside submitForm function $scope.user.name
Hope it helps!
Can you try below code. i think you forgot to pass value in button event
if you don't want to change your code you can find the text box value in $scope.master(same in your code)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="userForm" ng-submit="submitForm(user)" novalidate>
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="user.name" required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
</div>
<button type="submit" ng-disabled="userForm.$invalid">Submit</button>
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.submitForm = function (userForm) {
$scope.master = angular.copy(userForm);
if ($scope.userForm.$valid) {
debugger;
console.log($scope.userForm.name);
alert(userForm.name)
alert('our form is amazing');
console.log($scope.userForm);
}
};
});
</script>
</body>
</html>
As my title says, i was creating a login form and following was my html. but submit button is not working.
<body ng-controller="AdminController">
<div class="container">
<section id="content">
<form action="">
<h1>Log In </h1>
<div>
<input type="text" placeholder="Username" required="" id="vxUserName" ng-model="UserName" />
</div>
<div>
<input type="password" placeholder="Password" required="" id="vxUserPass" ng-model="UserPassword" />
</div>
<div style="padding-left:10px;padding-bottom:70px;padding-top:30px">
<input type="button" class="btn btn-success" value="Log in" id="vxLogin" ng-click="CheckUser()" />
</div>
</form><!-- form -->
</section><!-- content -->
</div>
</body>
Here is my angularjs.
app.controller('AdminController', function ($scope, $http, $location, $timeout, $filter) {
var SelectedPackages = "";
$scope.ContactDetails = [];
var SelectedEnquiry = sessionStorage.getItem("_SelectedEnquiry");
$scope.setId = function (setal) {
alert(SelectedEnquiry);
};
$scope.CheckUser = function () {
alert("a");
sessionStorage.setItem("_OwnAccessCount", "0");
sessionStorage.setItem("_OwnAccessUsed", "0");
debugger;
$http.get("ws/ws_HolidayPackages.asmx/CheckUser?&_UserName=" + $scope.UserName + "&_Password=" + $scope.UserPassword)
.success(function (data) {
sessionStorage.setItem("_UserPassword", $scope.UserPassword);
var userPassword = sessionStorage.getItem("_UserPassword");
debugger;
data = data.replace('<?xml version="1.0" encoding="utf-8"?>', '');
data = data.replace('<string xmlns="http://tempuri.org/">', '');
data = data.replace('</string>', '');
.....
......
.....
as button click was not working. i tried everything like changing giving input a type, changing ng-click to ng-submit, giving $event.stopPropagation(); with ng-click but my checkuser method not getting called. i also remived all html and only left input button but still it is not working.
<body ng-controller="AdminController">
<input type="button" class="btn btn-success" value="Log in" id="vxLogin" ng-click="CheckUser();" />
</body>
Probably you are missing the ng-app directive in your HTML,
<body ng-app="yourAppname" ng-controller="AdminController">
In the view {{phonenumber}} value is not updating. But When I enter digits alert is working properly inside the controller.
Controller
var app = angular.module('myApp', []);
app.controller('PosController', function ($scope, $http) {
$scope.phonenumberFromDial = "";
$scope.phonenumber = "";
$scope.updatePhoneNumber = function(id) {
$scope.phonenumberFromDial=id;
$scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
if($scope.phonenumber.length > 9) {
console.log("Log phonenumber: " + $scope.phonenumberFromDial);
alert('Here the Number: '+ $scope.phonenumber);
}
});
View
<div ng-app="myApp" ng-controller="PosController" class="panel" >
<div class="input-group col-xs-4">
<div class="input-group-btn">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Telefono</button>
</div><!-- /btn-group -->
<div ng-app="myApp" ng-controller="PosController">
<input id="phonenumber" class="form-control" ng-model="phonenumber" />
<!--<input type="text" id="phonenumber" ng-model="myModel" ng-keyup="(myModel.length >= 3) && myFunction()" class="form-control" data-inputmask='"mask": "(999) 999-9999"' data-mask>-->
</div>
<div class="input-group-btn" >
<button type="button" class="btn btn-success">Cliente</button>
</div><!-- /btn-group -->
<div ng-app="myApp" ng-controller="PosController">\
<input type="text" id="cliente" class="form-control" value="{{phonenumber}}">
</div>
</div>
</div>
Some observations :
remove unecessary multiple ng-controller="PosController" and ng-app="myApp" from the code and leave with only one at the top.
use ng-model="phonenumber" instead of value="{{phonenumber}}" to perform two way data binding.
Working demo :
var app = angular.module('myApp', []);
app.controller('PosController', function ($scope, $http) {
$scope.phonenumberFromDial = "";
$scope.phonenumber = "";
$scope.updatePhoneNumber = function(id) {
$scope.phonenumberFromDial=id;
$scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
if($scope.phonenumber.length > 9) {
console.log("Log phonenumber: " + $scope.phonenumberFromDial);
alert('Here the Number: '+ $scope.phonenumber);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="PosController" class="panel" >
<div class="input-group col-xs-4">
<input type="text" id="phonenumber" class="form-control" ng-model="phonenumber"/>
<div class="input-group-btn" >
<button type="button" class="btn btn-success" ng-click="updatePhoneNumber(phonenumber)">Cliente</button>
</div>
<input type="text" id="cliente" class="form-control" ng-model="phonenumber">
</div>
</div>
There are several things you're missing. First of the all, as suggested in comment, you only need to declare ng-app and ng-controller once in the HTML with np-app on the top-most level. Secondly, you bind the scope data to the HTML using ng-model inside a input field, or {{phonenumber}} in HTML. Third, you forgot to close the controller with an ending parenthesis.
Here is a working demo:
var app = angular.module('myApp', []);
app.controller('PosController', function ($scope, $http) {
$scope.phonenumberFromDial = "";
$scope.phonenumber = "";
$scope.updatePhoneNumber = function(id) {
$scope.phonenumberFromDial=id;
$scope.phonenumber =$scope.phonenumber+$scope.phonenumberFromDial;
if($scope.phonenumber.length > 9) {
console.log("Log phonenumber: " + $scope.phonenumberFromDial);
alert('Here the Number: '+ $scope.phonenumber);
}
}
});
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
</head>
<body>
<div class="panel" >
<div class="input-group col-xs-4" ng-controller="PosController">
<div class="input-group-btn">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Telefono</button>
</div><!-- /btn-group -->
<div>
<input id="phonenumber" class="form-control" ng-model="phonenumber" />
<!--<input type="text" id="phonenumber" ng-model="myModel" ng-keyup="(myModel.length >= 3) && myFunction()" class="form-control" data-inputmask='"mask": "(999) 999-9999"' data-mask>-->
</div>
<div class="input-group-btn" >
<button type="button" class="btn btn-success">Cliente</button>
</div><!-- /btn-group -->
<div>
<input type="text" id="cliente" class="form-control" ng-model="phonenumber">
</div>
<span>Phone#: {{phonenumber}}</span>
<div>
Dial: <input type="text" id="cliente" class="form-control" ng-model="phonenumberFromDial">
</div>
<div class="input-group-btn" >
<button type="button" class="btn btn-success" ng-click="updatePhoneNumber(phonenumberFromDial)">Update phone#</button>
</div><!-- /btn-group -->
</div>
</div>
</body>
</html>
I have a form inside a bootstrap modal.But I can't able to get the values of form on controller side with scope variable.
https://plnkr.co/edit/FjKXUpoBDdvQqomI97ml?p=preview
My original code has another problem also. when I click on submit button it will refresh the whole page and submit function is not executing.
My form:
<div class="modal-body">
<form class="form-horizontal" name="contact" ng-submit="contactForm()">
<div class="form-group">
<label class="col-lg-3 control-label">Name* :</label>
<div class="col-lg-8">
<input class="form-control" type="text" id="name" name="_name" ng-model="_name" > </div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email* :</label>
<div class="col-lg-8">
<input class="form-control" type="email" id="email" name="_email" ng-model="_email" required> </div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Mobile* :</label>
<div class="col-lg-8 row">
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="_cc" placeholder="+91" name="_cc"> </div>
<div class="col-lg-8">
<input class="form-control" type="text" ng-model="_mobile" maxlength="10" ng-pattern="/^[0-9]{5,10}$/" id="mobile" name="_mobile"></div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Message :</label>
<div class="col-lg-8">
<textarea class="form-control" rows="2" name="_condition" ng-model="_condition"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-7 col-lg-5">
<button type="submit" class="btn btn-primary" id="contactSubmit" >Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div></div>
</form>
</div>
Controller:
$scope.contactForm = function(){
console.log($scope._condition,$scope._name,$scope._email,$scope._cc,$scope._mobile);
};
You are opening the modal using plain jQuery approach which is not going to work in Angular, because opened modal is not connected to Angular application, so it doesn't know that modal has to be handled, HTML parsed, etc.
Instead you should use directives properly, or in case of modal dialog you can simply use existent ones, like Angular UI project, which brings ready Bootstrap directives for Angular. In your case you need $modal service and inject the $http service to have your data posted.
Here is the working plunker using angular-ui bootstrap.
PLUNKER:https://plnkr.co/edit/rjtHJl0udyE0PTMQJn6p?p=preview
<html ng-app="plunker">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>Email address:</label>
<input type="email" ng-model="user.email" />
<label>Password</label>
<input type="password" ng-model="user.password" />
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Open Modal</button>
</div>
</body>
</html>
JS:
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log,$http) {
$scope.user = {
email: '',
password: null,
};
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html', // loads the template
backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.'); // kinda console logs this statement
$log.log(user);
$http({
method: 'POST',
url: 'https://mytesturl.com/apihit',
headers: {
"Content-type": undefined
}
, data: user
}).then(function (response) {
console.log(response);
$modalInstance.dismiss('cancel');
}, function (response) {
console.log('i am in error');
$modalInstance.dismiss('cancel');
});
//$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});//end of modal.open
}; // end of scope.open function
};
So basically I am very new to angular and node so go easy on me. I have been building a REST API for a profile site and it obviously requires updating of posts. I have GET, DELETE and CREATE working but stuck with trying to get the current post object (from stateParams) to inject into the editor.
// Uses sateParams to get object id
.controller('EditPostCtrl', ['$scope', 'Post',
'$stateParams', '$state', function($scope, Post,
$stateParams, $state) {
$scope.action = 'Edit';
$scope.isDisabled = true;
$scope.post = Post.findById({ id: $stateParams.id })
.$promise
}])
<h1>Post Editor</h1>
<form name="form" ng-submit="submitForm()">
<div class="form-group">
<!-- If Error -->
<!-- Blog Title -->
<label>Title:</label>
<input type="text" class="form-control" placeholder="Example Title" autocomplete="off" required ng-model="post.title"></input>
<br />
<!--
<label>Author:</label>
<input type="text" class="form-control" autocomplete="off" placeholder="{{ author }}" required ng-model="post.author"></input>
<br />
-->
<!-- Date -->
<label>Date:</label>
<input type="date" class="form-control" required ng-model="post.date"></input>
<br />
<!-- Post Content -->
<label>Blog content:</label>
<div ng-controller="editorCtrl">
<textarea type="text" class="ck-editor" autocomplete="off" required ng-model="post.content"></textarea>
</div>
<div class="pull-right buttonspacer">
Cancel
<button class="btn btn-default btn-lg">{{ action }}</button>
</div>
</div>
</form>
.controller("EditPostCtrl", function($scope,$http){
$scope.submitForm = function(id) {
$http.post('/api/postid/' + id)
.success(function(data) {
$scope.action = 'Edit';
$scope.isDisabled = true;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};
});
in your angularjs,
you can use ng-click e.g.
<button class="btn btn-default btn-lg" ng-click="submitForm(post._id)">{{ action }}</button>
can you try this