I have a form and in that from there are some text boxes. Textbox are generated at run time. Like user can add or remove text boxes.
Here is the form.
<form name="formprofile3" method="post" id="formprofile3" role="form" ng-submit="formprofile3()">
<div class="container">
<div class="row">
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-10">
<textarea name="exp_details" ng-model="choice.name" class="form-control textbox1" id="exp_details" placeholder="Experience" required="required" rows="3"></textarea></div>
<div class="col-xs-2">
<button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
</div>
</fieldset>
<button class="addfields" ng-click="addNewChoice()">+</button>
<div id="choicesDisplay">
{{ choices }}
</div>
</div>
</div>
</div>
<center><button type="submit" class="btn btn-home" name="btn-save1" id="btn-save1" required="required">Save & Finish <i class="icon ion-arrow-right-a"></i></button></center>
</form>
here is the angular code to submit the form.
formApp.controller('formProfile3', function($scope,$http){
$scope.formData = {};
$scope.formprofile3 = function() {
var allData={'formData': $scope.formData, 'uid': uid}
$http({
method : 'POST',
url : 'add_profile.php',
data : allData,
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
})
.success(function(data) {
if (!data.success) {
$scope.message = data.errors.message;
}else{
alert('Your details has been updated.');
}
});
};
})
Problem is when i submit the form. It is not getting submit. no data is getting in post.
Any advise what am i doing wrong.
Edit: i can see the data in {{ choices }}.
Choices are not coming in formdata.
Here is the data in firebug.
{"formData":{},"uid":"75"}:""
Move ng-app & ng-controller directives to body/html tag, so that form & ng-submit directive should get compile
<body ng-app="angularjs-starter" ng-controller="MainCtrl">
<form name="formprofile3" method="post" id="formprofile3" role="form" ng-submit="formprofile3()">
....
</form>
</body>
Also I can't see any formData(as ng-model) two way binding is present there on page. I guess you should look for choices. Additionally add name attribute to each textarea field to it part of form object for validation purpose.
Related
I am using AngularJS. I would like to send multiple data in a HTTP post through AngularJS.I am using laravel php as backend and tinymce as my html text editor.The problem is that tinymce comes up with a model and i am unable to figure it out on how to pass data that is dealing with multiple models.
Here is my partial:
<div ng-controller="controller">
<div class="row">
<div class="container">
<div class="col-lg-8">
<form role="form" method="post" >
<div class="form-group" >
<input type="text" class="form-control" name="" ng-model="post.title" placeholder="Type the title here">
</div>
<div action="" class="form-group" ng-controller="TinyMceController">
<textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel" style="height:300px">
</textarea>
</div>
<div class="form-group">
<input type="text" class="form-control" id="" ng-model="post.tags" placeholder="Atleast one related tag">
</div>
<button type="submit" class="btn btn-primary" ng-click="postsave()">Submit</button>
<button class="btn btn-default">Discard</button>
</form>
</div>
<div class="col-lg-4">
RULES:
</div>
</div>
</div>
my controller:
app.controller('controller',['$scope','$rootScope','$http',function($scope,$rootScope,$http){
$scope.post={
title:"",
};
$scope.postsave= function(){
$http({
method:"POST",
url:'http://localhost/../../...',
data: //I can pass title by using $scope.title but i aslo
//want to pass $scope.tinymcemodel
})
.success(function(result){
alert(result);
})
}
Any help would be great.Also suggest me if there is a better way of doing it.
Thank you.
Just like your post.tags is structured, you should do the same. Put all your children under a parent and submit the parent. Let's look at that:
$scope.formData = {}; //parent
Then your textarea/title should be altered accordingly:
ng-model="formData.title" //child
ng-model="formData.tinymcemodel" //child
And then when you pass your data over, you can just pass this.formData.
$scope.postsave= function(){
$http({
method:"POST",
url:'http://localhost/../../...',
data: this.formData
})
.success(function(result){
alert(result);
})
};
This will properly send over the object to the server, which will have the key:value pairs as your title and tinymcemodel. Note that post.tags won't be included in this submission given that it belongs to another parent.
I'm building a small web app (blog post alike) using AngularJs and Firebase. i implemented the addPost controller earlier and it worked good. After i wanted to add an input file inside the form which already implemented to upload images to firebase on form submit using ng-file-upload directive . As a new in angular i knew that firebase can save images as base64 but i couldn't figur out how to make it work.
Maybe some will say that its repeated question, but believe me i searched allover here i couldent find answer.
Here is my form file :
<div class="container" ng-controller="AddPostCtrl">
<form class="form-horizontal" ng-submit="AddPost(files)">
<fieldset>
<!-- Form Name -->
<legend>Create Post</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="txtTitle">Title</label>
<div class="col-md-4">
<input id="txtTitle" name="txtTitle" ng-model="article.title" type="text" placeholder="placeholder" class="form-control input-md">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="txtPost">Post</label>
<div class="col-md-4">
<textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost"></textarea>
</div>
</div>
<!-- Images -->
<div class="form-group">
<label class="col-md-4 control-label" for="pictures">Add Pictures</label>
<div class="col-md-4">
<input id="pictures" type="file" ngf-select ng-model="files" name="file"
accept="image/*" ngf-max-size="2MB" ngf-multiple="true" ngf-keep="true" ngf-keep-distinct="true" class="btn btn-primary"/>
<!-- Show image thumb and remove option -->
<span ng-repeat="file in files">
<img ngf-thumbnail="!file.$error && file" class="thumb"> <button class="btn btn-danger" ng-click="file = null" ng-show="file">Remove</button>
</span>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
</div>
</div>
</fieldset>
</form>
</div>
here is my controller :
angular.module('myApp.addPost', ['ngRoute'])
.controller('AddPostCtrl', ['$scope','CommonProp','$firebase','$location','Upload','$timeout', function($scope,CommonProp,$firebase,$location,Upload,$timeout) {
if(!CommonProp.getUser()){
$location.path('/main');
}
/***** Add data to firebase *****/
$scope.AddPost = function(files) {
var fb = new Firebase("https://hotelboard.firebaseio.com/Articles/");
var title = $scope.article.title;
var post = $scope.article.post;
var user = CommonProp.getUser();
var images = Upload.base64DataUrl(files).then(function(base64Urls){
fb.push({
title: title,
post: post,
emailId: user,
images : base64Urls,
'.priority': user
},function(error) {
if (error) {
console.log("Error:",error);
} else {
console.log("Post set successfully!");
console.log(images);
$location.path('/home');
$scope.$apply();
}
});
});
}
}]);
and here is my GitHub for full project files
https://github.com/SaidThaher/HotelApp
If i get help with this issue , it will be more question regards to the result.
PLEASE HELP
Update :
#danialfarid updated the directive and made my day :)
Upgrade to 8.0.6 and move your fb push here:
Upload.base64DataUrl(files).then(function(base64Urls) {
fb.push({...
images : base64Urls,
},...
});
I updated the code too.
Move your fb push here:
Upload.base64DataUrl(files).then(function(base64Urls) {
fb.push({...
images : base64Urls,
},...
});
Upload.base64DataUrl will convert the files to base64 data url which then can be added to the json to be sent to the server.
I am using webshims for HTML support in IE8. My HTML form validation is working in IE8. But when I have a form in a popup (I am using Angular UI Modal), on form submit(ng-submit) the modal box closes and the validation message appears on top right corner.
My Environment is
jquery-1.11.1.js
AngularJS v1.2.26
Angular UI Modal 0.10.0
webshim-1.15.4
In the console I get this script error
"invalid element seems to be hidden. Make element either visible or use disabled/readonly to bar elements from validation. With With fieldset[disabled] a group of elements can be ignored! In case of select replacement see shims/form-combat.js to fix issue."
part my Angular app HTML loading webshims
<script src="resources/js/jquery-1.11.1.js"></script>
<script src="resources/js/js-webshim/minified/polyfiller.js"></script>
<script>
$.webshims.setOptions('forms', {
overrideMessages : true
});
$.webshims.setOptions({
waitReady : false
});
$.webshims.polyfill();
</script>
// below method in angular app to update Polyfill when dynamic view loads.
angular.module('essApp').run(function($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function() {
$('body').updatePolyfill();
});
});
My angular function to call a popup/modal
$scope.showGoalDetail = function(index) {
$log.info('index is', index);
$log.info('goal is', $scope.goals.goalList[index]);
var modalInstance = $modal.open({
templateUrl : 'org/goalDetailPopUp.html',
controller : 'PopUpInstanceCtrl',
size : 'lg',
backdrop : 'static',
resolve : {
valueObject : function() {
var valueObject = new Object();
valueObject.goal = {};
angular.copy($scope.goals.goalList[index], valueObject.goal);
valueObject.kpiList=$scope.goals.kpiList;
return valueObject;
}
}
});
My form in Modal Window
<div class="modal-header" style="background-color: #428bca; color: #FFFFFF">
<h3 class="modal-title">Goal Detail</h3>
</div>
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-heading">
<p class="panel-title">Administration of prespective and priority</p>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" ng-submit="ok()">
<div class="form-group">
<label class="col-md-2 control-label">Dimension</label>
<div class="col-md-6">
<input type="text" class="form-control" required disabled ng-model="valueObject.goal.perspectiveDesc">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Key PerformanceIndicator</label>
<div class="col-md-10">
<textarea class="form-control" required ng-model="valueObject.goal.keyPerformanceIndicator"></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary">OK</button>
<button class="btn btn-danger" ng-click="cancel()">Cancel</button>
</form>
</div>
</div>
</div>
<div class="modal-footer"></div>
I need the validations to appear properly on popup next to the field
I have a page where multiple forms are created based on ng-repeat. everything works fine until write something into the input and everything gets duplicated on all the other repeated forms input elements. I have used ng-model="Notify.message" which is nothing but object which takes the value from the input and sends to control on button submit and hence rest of the logic.
I am looking for when if one form is been filled, other forms should keep quite and shouldnt duplicate the values written in input text of form 1.
Here is the code:
<div data-ng-show="alluserposts.length > 0">
<div id="b{{userpost.id}}" data-ng-repeat="userpost in alluserposts" >
<div class="row" style="margin-left: -5px">
<form class="text-center" role="form" id=f1{{userpost.id}} name="userForm"
ng-submit="notify(userForm.$valid, userpost, apiMe)" novalidate>
<div class="row">
<div class="col-xs-8 col-md-4">
<div class="form-group">
<input data-container="body" data-toggle="popover" data-placement="top"
data-content="Any message which you would like to convey to post owner"
type="text" ng-model="Notify.message" data-ng-init="Notify.message=''"
id="u{{userpost.id}}"
placeholder="Enter a Message or Phone number" class="form-control"
required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">It is
required.</p>
<script>$(function () {
$("[data-toggle='popover']").popover();
});
</script>
<input type="hidden" ng-model="Notify.loggedInEmail"
ng-init="Notify.loggedInEmail = result.email"/>
<input type="hidden" ng-model="Notify.postId" ng-init="Notify.postId = userpost.id"/>
<input type="hidden" ng-model="Notify.destEmail"
ng-init="Notify.destEmail = userpost.userEmail"/>
</div>
</div>
<div ng-show="loginStatus.status == 'connected'" class="col-xs-4 col-md-2">
<button class="btn btn-primary" ng-disabled="userForm.$invalid || !userForm.$dirty"
type="submit">
Notify Post Owner
</button>
</div>
</div>
</form>
</p>
</div>
</div>
</div>
</div>
I will attempt following solution to implement it.
create a nested json object with number of forms to display in angularjs controller.
for example
$scope.FormsCollection = {
"Form1" : [
{"title" : "Rockband", "details" : "1hr"},
],
"Form2" : [
{"title" : "The Old You", "details" : "Dr. Smith"}
]
}
obviously, you can use loop to build it or whatever approach suits you best in your context to build the forms collection in angularjs controller.
then in html page you can use following convention to correctly populate each form data
you need two ng-repeat, first for index of each form, and then to iterate nested form object.
<input type="text" ng-model="form[index].firstName"/>
as result you will have $scope.FormsCollection with correct form object data
Please check the example code in following jsfiddle
http://jsfiddle.net/CMnxW/4/
jsfiddle should contain following code.
<div ng-app>
<div ng-controller="controller">
<ul ng-repeat="post in posts">
<li>{{$index}}
<input type="text" ng-model="post.userEmail" />
<button class="btn btn-danger" ng-click="notify(post)" type="button">Notify</button>
</li>
</ul>
<table>
<tr>
<td>destEmail is: </td>
<td>{{Notify.destEmail}}</td>
</tr>
</table>
</div>
</div>
JS:
function controller($scope) {
$scope.Notify = {
destEmail: ''
};
$scope.posts = [{userEmail: 'e#mail.com'}, {userEmail: 'f#mail.com'}];
$scope.notify = function(post) {
$scope.Notify.destEmail = post.userEmail;
//set other $scope.Notify properties from post
//your other notify code...
}
}
I have written a simple SPA(Single Page Application) with a username/password and submit button on top. When user is successfully logged in , according to his role , he should see details(employeeid , designation etc) on the rest(bottom) of the page.My Problem is that the bottom part of the page gets loaded even before user is logged in . So when user submits the login credentials , the bottom of the page is not getting reloaded with the data I have fetched from the server.
To be precise in my below code u1.UserDetails.firstName , u1.UserDetails.designation and u1.UserDetails.employeeId should be reloaded after user submits the login credential. But it's not happening currently and I get a blank screen. Can anyone please help me. I know I am missing something very silly here. I am sorry for that as I am new to UI development.
index.html
(body of my html page)
<div class="navbar navbar-inverse">
<form class="form-inline" ng-submit="submitLoginData()" ng-controller="LoginController">
<div class="form-group">
<!-- <label class="sr-only" for="exampleInputEmail2">Email address</label> -->
<input type="email" class="form-control" placeholder="Enter email" ng-model="emailId"/>
</div>
<div class="form-group">
<!-- <label class="sr-only" for="exampleInputPassword2">Password</label> -->
<input type="password" class="form-control" placeholder="Password" ng-model="password"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<!-- <button type="submit" class="btn btn-default">Sign in</button> -->
<input type="submit" class="btn btn-default" id="SignIn" value="Sign In">
</form>
</div>
<div class="container">
<div class="row">
<div class="col-lg-2">
<img ng-src="{{imageSource}}" class="img-thumbnail">
</div>
<div class="col-lg-10" >
<table ng-table="tableParams" class="table">
<tr>
<td >
{{u1.UserDetails.firstName}}
</td>
<td>{{u1.UserDetails.designation}}
</td>
<td>{{u1.UserDetails.employeeId}}</td>
</tr>
</table>
</div>
</div>
</div>
controller.js
myApp.controller('LoginController' ,
['$scope','LoginService' ,'$http' , function($scope , LoginService, $http ){
$scope.submitLoginData = function(LoginService) {
var tempStr= "userName:" +$scope.emailId + ", password:" + $scope.password ;
$http.get('http://localhost:8181/RestCXF7/services/UserInfo/1').
success(function(data , status , headers, config) {
alert("Http service" + data);
$scope.u1 = data;
$scope.imageSource = 'img/tests.JPG';
}).
error(function (data, status, headers, config) {
alert("error" + status);
});
};
}]);
You need to wrap all elements with the ng-controller div.
Only child elements inside the controller's directive get's it's scope:
The problem with your code is that only the form contents gets the right scope.
<div ng-controller="LoginController">
<div class="navbar navbar-inverse">
<form class="form-inline" ng-submit="submitLoginData()">
<!-- more -->
</form>
</div>
<div class="container">
<div class="row">
<!-- the code below -->
</div>
</div>
</div>
UPDATE:
I created a demo plunker with jade: http://plnkr.co/edit/FNk45ekzeT1xBaphKrjp?p=preview