I am trying to develop a page with a total of 6 input fields - 2 constant and 4 dynamic. A single form needs to send data with dynamic marks rows that will be added by users choice.
View :
<body ng-controller="homeController">
<div class="container">
<div class="row">
<div class="col-sm-8">
<h3>Students Form</h3>
<form name="StudentForm">
<div class="row">
<div class="col-sm-6">
<input type="text" ng-model="formData.regno" placeholder="Reg Number">
</div>
<div class="col-sm-6">
<input type="text" ng-model="formData.name" placeholder="Student Name">
</div>
</div>
<div ng-show="showMarks" ng-repeat="formData in studentMarks">
<div class="row">
<br>
<div class="col-sm-3"><input type="text" ng-model="formData.subone"
placeholder="Subject 1" style="width:70%"></div>
<div class="col-sm-3"><input type="text" ng-model="formData.subtwo"
placeholder="Subject 2" style="width:70%"></div>
<div class="col-sm-2"><input type="text" ng-model="formData.subthree"
placeholder="Subject 3" style="width:70%"></div>
<div class="col-sm-2"><input type="text" ng-model="formData.subfour"
placeholder="Subject 4" style="width:70%"></div>
<div class="col-sm-2"><button ng-click="delMarks()"> Delete</button></div>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-2">
<button ng-model="addBtnMarks" ng-click="addMarks(addBtnMarks)">
<span class="glyphicon glyphicon-plus"></span> Add
</button>
</div>
<div class="col-sm-2">
<button ng-click="editEnquiry()"> Edit</button>
</div>
<div class="col-sm-2">
<button type="submit" ng-click="saveFullForm()"> Save</button>
</div>
<div class="col-sm-2">
<button onclick="window.print()"> Print</button>
</div>
<div class="col-sm-2"></div>
</div>
</form>
</div>
<div class="col-sm-4"></div>
</div>
<br>
<br>
<br>
</div>
</body>
Controller :
var std = angular.module("studentsApp",[]);
std.controller("homeController", function($scope){
$scope.showMarks=false;
$scope.studentMarks=[];
$scope.addMarks = function (){
$scope.showMarks=true;
var rowConut = $scope.studentMarks.length +1;
$scope.studentMarks.push({
subone:0,
subtwo:0,
subthree:0,
subfour:0,
});
console.log(rowConut);
console.log($scope.studentMarks);
};
$scope.delMarks = function (){
rowConut = $scope.studentMarks.length -1;
$scope.studentMarks.pop();
console.log(rowConut);
console.log($scope.studentMarks);
};
$scope.saveFullForm = function(){
//
console.log($scope.formData);
console.log($scope.marks);
console.log($scope.studentMarks);
};
});
Problem is:
When I click -save button form data for dynamic rows does not get shown up
in the console. Also, when adding more than one row, -delete button does
not deletes individual rows. The last row gets deleted by default. What might be the
problem in the code.
When using array.pop, it will remove the last element in the array. The solution is to pass the element index from the view through ng-click and splice the array based on the index , thus the element will be remove out from the array
View
<div class="col-sm-2"><button ng-click="delMarks($index)"> Delete</button></div>
Controller
$scope.delMarks = function (index){
rowConut = $scope.studentMarks.length -1;
$scope.studentMarks.splice(index,1);
console.log(rowConut);
console.log($scope.studentMarks);
};
Update
var std = angular.module("studentsApp",[]);
std.controller("homeController", function($scope){
$scope.showMarks=false;
$scope.studentMarks=[];
$scope.addMarks = function (){
$scope.showMarks=true;
var rowConut = $scope.studentMarks.length +1;
$scope.studentMarks.push({
subone:$scope.formData.regno,
subtwo:0,
subthree:0,
subfour:0,
});
//console.log(rowConut);
//console.log($scope.studentMarks);
};
$scope.delMarks = function (index){
rowConut = $scope.studentMarks.length -1;
$scope.studentMarks.splice(index,1);
//$scope.studentMarks.pop();
//console.log(rowConut);
//console.log($scope.studentMarks);
};
$scope.saveFullForm = function(){
//
console.log($scope.formData);
console.log($scope.marks);
console.log($scope.studentMarks);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="studentsApp">
<body ng-controller="homeController">
<div class="container">
<div class="row">
<div class="col-sm-8">
<h3>Students Form</h3>
<form name="StudentForm">
<div class="row">
<div class="col-sm-6">
<input type="text" ng-model="formData.regno" placeholder="Reg Number">
</div>
<div class="col-sm-6">
<input type="text" ng-model="formData.name" placeholder="Student Name">
</div>
</div>
<div ng-show="showMarks" ng-repeat="formData in studentMarks">
<div class="row">
<br>
<div class="col-sm-3"><input type="text" ng-model="formData.subone"
placeholder="Subject 1" style="width:70%"></div>
<div class="col-sm-3"><input type="text" ng-model="formData.subtwo"
placeholder="Subject 2" style="width:70%"></div>
<div class="col-sm-2"><input type="text" ng-model="formData.subthree"
placeholder="Subject 3" style="width:70%"></div>
<div class="col-sm-2"><input type="text" ng-model="formData.subfour"
placeholder="Subject 4" style="width:70%"></div>
<div class="col-sm-2"><button ng-click="delMarks($index)"> Delete</button></div>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-2">
<button ng-model="addBtnMarks" ng-click="addMarks()">
<span class="glyphicon glyphicon-plus"></span> Add
</button>
</div>
<div class="col-sm-2">
<button ng-click="editEnquiry()"> Edit</button>
</div>
<div class="col-sm-2">
<button type="submit" ng-click="saveFullForm()"> Save</button>
</div>
<div class="col-sm-2">
<button onclick="window.print()"> Print</button>
</div>
<div class="col-sm-2"></div>
</div>
</form>
</div>
<div class="col-sm-4"></div>
</div>
<br>
<br>
<br>
</div>
</body>
</html>
Related
I am using a form repeater but my goal is to have multiple repeaters to use it on my project. I tried to search on different forums but I didn't get positive result to follow. my current code only repeats for the first div only i.e. targetDiv one and doesn't repeat for the second div
I want to repeat all divs targetDiv
jsFiddle
https://jsfiddle.net/infohassan/qbontgj6/2/
Here is my HTML
<div class="row targetDiv" id="div0">
<div class="col-md-12">
<div id="myRepeatingFields" class="fvrduplicate">
<div class="row entry">
<!-- Field Start -->
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Length(mm)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Length">
</div>
</div>
<!-- Field Ends -->
<!-- Field Start -->
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Qty(pcs)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Qty">
</div>
</div>
<!-- Field Ends -->
<!-- Field Start -->
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label> </label>
<button type="button" class="btn btn-success btn-sm btn-add">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
</div>
</div>
<!-- Field Ends -->
</div>
</div>
</div>
</div>
<div class="row targetDiv" id="div1">
<div class="col-md-12">
<div id="myRepeatingFields" class="fvrduplicate">
<div class="row entry">
<!-- Field Start -->
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Length(mm)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Length">
</div>
</div>
<!-- Field Ends -->
<!-- Field Start -->
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Qty(pcs)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Qty">
</div>
</div>
<!-- Field Ends -->
<!-- Field Start -->
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label> </label>
<button type="button" class="btn btn-success btn-sm btn-add">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
</div>
</div>
<!-- Field Ends -->
</div>
</div>
</div>
</div>
Here is my JS
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $('.fvrduplicate:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<i class="fa fa-minus" aria-hidden="true"></i>');
}).on('click', '.btn-remove', function(e) {
e.preventDefault();
$(this).parents('.entry:first').remove();
return false;
});
});
I tweaked your code a little bit, maybe this is what you want?
I made the id attributes in your .fvrduplicate-divs unique ("group1" and "group2")
the controlForm is now not taken from the first .frvduplicate div but from the .closest() one to the clicked button
the rest is mostly unchanged, however, I added the "+" and the "-" for the buttons (as the css classes fa-minus and fa-plus are curently undefined in this snippet) and separated the two forms with an <hr>-element.
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $(this).closest('.fvrduplicate'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<i class="fa fa-minus" aria-hidden="true">-</i>');
}).on('click', '.btn-remove', function(e) {
$(this).closest('.entry').remove();
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row targetDiv" id="div0">
<div class="col-md-12">
<div id="group1" class="fvrduplicate">
<div class="row entry">
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Length(mm)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Length">
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Qty(pcs)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Qty">
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label> </label>
<button type="button" class="btn btn-success btn-sm btn-add">
<i class="fa fa-plus" aria-hidden="true">+</i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<hr> <!-- second form starts below: -->
<div class="row targetDiv" id="div1">
<div class="col-md-12">
<div id="group2" class="fvrduplicate">
<div class="row entry">
<!-- Field Start -->
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Length(mm)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Length">
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<label>Qty(pcs)</label>
<input class="form-control form-control-sm" name="fields[]" type="text" placeholder="Qty">
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label> </label>
<button type="button" class="btn btn-success btn-sm btn-add">
<i class="fa fa-plus" aria-hidden="true">+</i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
HTML input type date is sometimes returned the null value if I entered the button again.1st time only it returned selected data value if I again enter the button it will return the null value .how to solve this problem?
<form [formGroup]="CouponUsageForm" (ngSubmit)="couponlist(CouponUsageForm.value)">
<div class="row">
<div class="col-md-12">
<div class="panel">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<div class="col-sm-12">
<select class="form-control" formControlName="couponType" style="margin-bottom:0px" (change)="GetCityList(t.value)" required>
<option value="">Select Coupon Type</option>
<option value="1">Redeemable</option>
<option value="0">Authentication</option>
<div *ngIf="CouponUsageForm.controls['couponType'].invalid && (CouponUsageForm.controls['couponType'].dirty || CouponUsageForm.controls['couponType'].touched)">
<div style="color:red" *ngIf="CouponUsageForm.controls['couponType'].errors.required">
Coupon Type is required.
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<div class="col-sm-12">
<input type="date"formControlName="fromDate" [(ngModel)]="fromDate" value="fromDate" class="form-control" [max]="getToday()"> </div> </div> </div>
<div class="col-md-3"> <div class="form-group"> <input type="date" formControlName="toDate" [(ngModel)]="toDate" value="toDate" class="form-control" [max]="getToday()"> </div> </div></div> </div> <div class="row">
<div class="col-md-12" style="text-align: center; margin-top: 2%;">
<div class="form-group">
<button type="submit" [disabled]="!CouponUsageForm.valid" style="text-align:center;background-color: #009390" class="btn btn-success btn-rounded dropdown-toggle">
<i class="fa fa-eye" aria-hidden="true"></i> View Users
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
I have a form and trying to send the value of the input to the angular controller but on click, the value in the controller is showing undefined.
html code
<div ng-if="questioncode == 2" class="user-form">
<div class="row">
<form>
<div class="col-sm-12">
<label class="control-label" >Phone number</label>
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="phone" placeholder="your phone number" ng-model="phone">
</div>
<div class="col-sm-12">
<input type="submit" class=" col-sm-12 btn btn-primary" ng-click="submituserPhone();" >
<flash-message duration="3000" show-close="true" on-dismiss="myCallback(flash);" ></flash-message>
</div>
</form>
</div>
</div>
angular controller
$scope.submituserPhone = function() {
console.log($scope.phone);
$http.post('insertphone',$scope.phone),then(function() {
if(response.data.status === false) {
Flash.create('danger',response.data.message);
}else{
$scope.questioncode = 3;
}
})
}
So the problem is the ng-if which is creating a new scope, hence the scope variable phone is not getting updated in the controller. Here are two methods to tackle this problem.
Using $parent:
You can use $parent to update the variable of the parent scope instead of the current one, then your variable will be visible inside the controller.
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.questioncode = 2;
$scope.submituserPhone = function() {
console.log($scope.phone);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<div ng-if="questioncode == 2" class="user-form">
<div class="row">
<form>
<div class="col-sm-12">
<label class="control-label">Phone number</label>
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="phone" placeholder="your phone number" ng-model="$parent.phone">
</div>
<div class="col-sm-12">
<input type="submit" class=" col-sm-12 btn btn-primary" ng-click="submituserPhone();">
<flash-message duration="3000" show-close="true" on-dismiss="myCallback(flash);"></flash-message>
</div>
</form>
</div>
</div>
</div>
Pass the variable as a parameter:
You can simply just pass the variable of the created scope into the controller function and update it there, as shown below.
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.questioncode = 2;
$scope.submituserPhone = function(phone) {
$scope.phone = phone;
console.log($scope.phone);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<div ng-if="questioncode == 2" class="user-form">
<div class="row">
<form>
<div class="col-sm-12">
<label class="control-label">Phone number</label>
</div>
<div class="col-sm-12">
<input type="text" class="form-control" name="phone" placeholder="your phone number" ng-model="phone">
</div>
<div class="col-sm-12">
<input type="submit" class=" col-sm-12 btn btn-primary" ng-click="submituserPhone(phone);">
<flash-message duration="3000" show-close="true" on-dismiss="myCallback(flash);"></flash-message>
</div>
</form>
</div>
</div>
</div>
The bug is very weird, I have been stucking here for hours just can find why my function in controller is fired.
Here is my HTML code:
<div class="col-md-9 clearfix" id="customer-account" ng-controller='ProfileController'>
<div class="box clearfix">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="password_old">oldpassword</label>
<input type="password" class="form-control" id="password_old" ng-model="passwordold">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="password_1">newpassword</label>
<input type="password" class="form-control" id="password_1" ng-model="passwordnew1">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="password_2">retype</label>
<input type="password" class="form-control" id="password_2"ng-model="passwordnew2">
</div>
</div>
<p>{{passwordnew2}}</p>
</div>
<!-- /.row -->
<div class="text-center">
<button type="submit" class="btn btn-primary">
<i class="fa fa-save" ng-click="changePwd(passwordold,passwordnew1,passwordnew2)"></i> save
</button>
</div>
<div class="text-center" >
<p>{{errorMessageChangepwd}}aaaa</p>
</div>
</div>
</div>
After I click the Button, which ng-click attribute as you can see, nothing happen.
Here is my controller code:
controller('ProfileController', ['$scope','UserFactory','SharedDataFactory',
function($scope,UserFactory,SharedDataFactory){
$scope.user = UserFactory.user;
$scope.passwordold;
$scope.errorMessageChangepwd='error';
$scope.showErrMsgChangepwd = false;
$scope.passwordnew1;
$scope.passwordnew2;
$scope.changePwd = function(passwordold,passwordnew1,passwordnew2){
console.log("aaaaaaaaaa");
if (passwordnew1!==passwordnew2){
$scope.showErrMsgChangepwd= true;
$scope.errorMessageChangepwd = 'error';
}else{
UserFactory.changePwd(passwordnew1)
.catch(function(err){
console.log(err.data);
}).then(function(response){
console.log(response);
});
}
};}]);
I called console.log("aaaaaaaaaa"); in the first line of my function, but after I click the button, nothing is shown on console.
And also
<div class="text-center" >
<p>{{errorMessageChangepwd}}aaaa</p>
</div>`
does not show error aaaa as expected but aaa on the browser.
what could be wrong?
Thanks.
You need to add ng-controller="ProfileController" in the top of your form.
Which looks like missing on your code.
i have used bootstrap to make a calendar and to select a ranged date from and to, but the problem is for some strange reason, the calendar is not coming.
I have write my html and query code. But i think the script is wrong!
Html ---
<div class="row">
<!-- Hover Row Table -->
<div class="col-lg-12">
<div class="widget-container fluid-height clearfix">
<div class="widget-content padded clearfix">
<table class="table table-hover">
<td>
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div>End</div>
<div class='input-group date' id='endDate'>
<input type='text' class="form-control" name="org_endDate" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</td>
script --
<script>
jQuery(function () {
jQuery('#startDate').datetimepicker({format: 'dd/MM/yyyy hh:mm:ss'});
jQuery('#endDate').datetimepicker({format: 'dd/MM/yyyy hh:mm:ss'});
jQuery("#startDate").on("dp.change", function (e) {
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
jQuery("#endDate").on("dp.change", function (e) {
jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
});
});
</script>
Output ---
it should look like this ---
it shows the error ---
TypeError: jQuery(...).datetimepicker is not a function
jQuery('#startDate').datetimepicker({format: 'dd/MM/yyyy hh:mm:ss'});
How can i fix this error, anyone knows !
Thanks a lot in advanced.
I found this jsfiddle example.
<div class="row">
<div class="col-md-12">
<h6>datetimepicker1</h6>
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<h6>datetimepicker2</h6>
<input type="text" class="form-control" id="datetimepicker2" />
</div>
</div>
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
You can also read more about this on github.