We Keep Coding

AngularJS : Changing values in other div, is changing data in all divs

Page looks like this :
HTML
<li class="list-group-item" ng-repeat="eachData in lstRepositoryData">
<div class="ember-view">
<div class="github-connection overflow-hidden shadow-outer-1 br2">
<!-- code to created other stuff-- >
<div class="panel-heading">
<a for="collapse{{$index}} accordion-toggle" data-toggle="collapse" href="#collapse{{$index}}" aria-expanded="true" aria-controls="collapse{{$index}}">Show SFDC
connections</a>
<div id="collapse{{$index}}" class="collapse mt3 panel-collapse">
<div class="row no-gutters pa3">
<div class="col-12 col-sm-6 col-md-8">
<form>
<div class="form-group row">
<label for="inputorgNamel3" class="col-sm-2 col-form-label required">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputorgNamel3" placeholder="Name" ng-model="eachData.sfdcOrg.orgName" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
</div>
</div>
<div class="form-group row">
<label for="inputenvironment3" class="col-sm-2 col-form-label required">Environment</label>
<div class="col-sm-10">
<div class="dropdown bootstrap-select">
<select class="form-control" id="inputenvironment3" ng-model="eachData.sfdcOrg.environment" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
<option value="0" selected>Production/Developer</option>
<option value="1">Sandbox</option>
<option value="2">Custom Org</option>
</select>
</div>
</div>
</div>
<div class="form-group row">
<label for="salesforceLoginl3" class="col-sm-2 col-form-label required">Salesforce Login</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="salesforceLoginl3" placeholder="Salesforce userName"
ng-model="eachData.sfdcOrg.userName" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
</div>
</div>
<div class="form-group row" ng-show="eachData.sfdcOrg.environment === '2'">
<label for="salesforceinstanceURLl3" class="col-sm-2 col-form-label required">Instance Url</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="salesforceinstanceURLl3" placeholder="Salesforce Instance Url"
ng-model="eachData.sfdcOrg.instanceURL" ng-disabled="eachData.sfdcOrg.disabledForm == 'true'">
</div>
</div>
<div class="form-group row">
<label for="branchNamel3" class="col-sm-2 col-form-label required">Branch Name</label>
<div class="col-sm-10">
<input class="form-control" id="branchNamel3" placeholder="search branches..."
ng-model="eachData.sfdcOrg.instanceURL">
</div>
</div>
<div class="form-group row">
<div class="form-group">
<!-- Buttons Code -->
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
JS Code :
var app = angular.module('forceCIApp', ["angularjs-dropdown-multiselect"]);
app.controller('orderFromController', function ($scope, $http, $attrs) {
$scope.reposInDB = [];
$scope.lstRepositoryData = [];
const sfdcOrg = {
orgName: '',
environment: '0',
userName: '',
instanceURL: '',
authorize: 'Authorize',
save: 'Save',
testConnection: 'Test Connection',
delete: 'Delete',
oauthSuccess: 'false',
oauthFailed: 'false',
oauthSaved: 'false',
disabledForm: 'false',
multiBranchData: [],
multiExtraSettings: {enableSearch: true, showCheckAll: false, showUncheckAll: false},
multiSelectedBranches: []
};
$http.get("/fetchUserName").then(function (response) {
if (response.data !== undefined && response.data !== null) {
$scope.userName = response.data.login;
localStorage.setItem('githubOwner', response.data.login);
$http.get("/fetchRepositoryInDB?gitHubUser=" + response.data.login).then(function (response) {
if (response.data.length > 0) {
for (let i = 0; i < response.data.length; i++) {
let lstBranches = [];
$.each(response.data[i].repository.mapBranches, function (key, value) {
console.log(key);
lstBranches.push(key);
});
sfdcOrg.multiBranchData = changeListToObjectList(lstBranches);
sfdcOrg.multiSelectedBranches = response.data[i].repository.lstSelectedBranches === undefined || null ? [] : changeListToObjectList(response.data[i].repository.lstSelectedBranches);
response.data[i].repository.sfdcOrg = sfdcOrg;
$scope.lstRepositoryData.push(response.data[i].repository);
$scope.reposInDB.push(response.data[i].repository.repositoryFullName);
}
$('#repoConnectedDialog').removeClass('hidden');
}
}, function (error) {
});
const avatarSpanTag = '<span class="absolute flex items-center justify-center w2 h2 z-2 ' +
'nudge-right--4 pe-none" style="top: -15px">\n' +
' <img src=' + response.data.avatar_url + '>\n' +
' </span>';
$(avatarSpanTag).insertAfter('#idSelectTab');
}
}, function (error) {
});
When I start editing input fields other divs input field also gets changed. But the data is different in both divs eachData.
Also disabling the form with eachData.sfdcOrg.disabledForm works fine.
But modifying the input elements modifies all the the input fields.
How do I avoid this?

The data was constructed by reference assignment instead of creating a clone object for each sfdcOrg property of each item in the lstRepositoryData array.
$http.get("/fetchRepositoryInDB?gitHubUser=" + response.data.login).then(function (response) {
if (response.data.length > 0) {
for (let i = 0; i < response.data.length; i++) {
let lstBranches = [];
$.each(response.data[i].repository.mapBranches, function (key, value) {
console.log(key);
lstBranches.push(key);
});
sfdcOrg.multiBranchData = changeListToObjectList(lstBranches);
sfdcOrg.multiSelectedBranches = response.data[i].repository.lstSelectedBranches === undefined || null ? [] : changeListToObjectList(response.data[i].repository.lstSelectedBranches);
̶r̶e̶s̶p̶o̶n̶s̶e̶.̶d̶a̶t̶a̶[̶i̶]̶.̶r̶e̶p̶o̶s̶i̶t̶o̶r̶y̶.̶s̶f̶d̶c̶O̶r̶g̶ ̶=̶ ̶s̶f̶d̶c̶O̶r̶g̶;̶
response.data[i].repository.sfdcOrg = angular.copy(sfdcOrg);
$scope.lstRepositoryData.push(response.data[i].repository);
$scope.reposInDB.push(response.data[i].repository.repositoryFullName);
}
$('#repoConnectedDialog').removeClass('hidden');
}
});
Use angular.copy to clone a new object.

Used bootstrap for validating the form ,even there is some validation the form is getting submitted.How should I avoid it

I am using the bootstrap 'needs-validation' for checking the validation form. Here when I click the submit button its validating the field and form is also getting submitted. What I want is when the validation fails the form should not get submitted. I found the form validation from (needs validation) from here https://www.w3schools.com/bootstrap4/bootstrap_forms.asp and I used it in my program.
My script is
<div class="row top-space-30">
<form class="needs-validation" novalidate action="" method="">
<div class="form-group row">
<label class="col-md-4 col-form-label text-md-right" for="studentname">Student Name:</label>
<div class="col-md-6">
<input id="role" name="studentname" type="text" placeholder="name" class="form-control input-md"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-4 col-form-label text-md-right" for="department">Department:</label>
<div class="col-md-8">
<input class="form-control" type="text" id="department">
<input type="hidden" id="TestHidden" value="{{result}}" required>
</div>
</div>
<div class="col-md-6 offset-md-4 top-space-30">
<button type="submit" id="submit">Submit</button>
</div>
</form>
</div>
</div>
<script>
// Disable form submissions if there are invalid fields
(function () {
'use strict';
window.addEventListener('load', function () {
// Get the forms we want to add validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
$("#submit").click(function (e) {
var studentName = $("#role").val();
var departmentsList = $("#department").val().split(',');
$.ajax({
type: 'POST',
url: '/students/add',
data: {
'role': studentName,
'departmentslist': JSON.stringify(departmentsList)
},
success: function (result) {
alert("The department has been added");
document.location.href = "/department";
}
})
})
</script>

Try this one, I have one function for validationsformSubmit add your own validations in that function.
<div class="row top-space-30">
<form class="needs-validation" name="myForm" action="" method="" onsubmit=" return formSubmit()" >
<div class="form-group row">
<label class="col-md-4 col-form-label text-md-right" for="studentname">Student Name:</label>
<div class="col-md-6">
<input id="role" name="studentname" type="text" placeholder="name" class="form-control input-md"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-4 col-form-label text-md-right" for="department">Department:</label>
<div class="col-md-8">
<input class="form-control" type="text" name = "departmentname" id="department">
<input type="hidden" id="TestHidden" value="{{result}}" required>
</div>
</div>
<div class="col-md-6 offset-md-4 top-space-30">
<button type="Submit" id="submit">Submit</button>
</div>
</form>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
//Disable form submissions if there are invalid fields
(function () {
'use strict';
window.addEventListener('load', function () {
// Get the forms we want to add validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
function formSubmit(){
var forms = document.forms["myForm"];
var studenName = forms.studentname.value;
var departmentName = forms.departmentname.value;
// perform validation for studentname and departname if they are validated then return true, else for wrong input return false
if(isNaN(studentname) && isNaN(departmentname)){
return true;
}
else{
return false;
}
}
$("#submit").click(function (e) {
var studentName = $("#role").val();
var departmentsList = $("#department").val().split(',');
$.ajax({
type: 'POST',
url: '/students/add',
data: {
'role': studentName,
'departmentslist': JSON.stringify(departmentsList)
},
success: function (result) {
alert("The department has been added");
document.location.href = "/department";
}
})
})
</script>

Hidden input not submitted after updating value in on submit event

Using Laravel framework.
I don't get it. I have a hidden input with id = prime near the top.
<form name="paymentForm" action="/parking_302/upload_payment" method="POST" role="form" class="form-horizontal">
{{ csrf_field() }}
<input type="hidden" id="parking_lot_id" name="parking_lot_id" value="{{ $parking_lot_id }}">
<input type="hidden" id="booking_id" name="booking_id" value="{{ $booking_id }}">
<input type="hidden" id="Price" name="Price" value="{{ $Price }}">
<input type="hidden" id="prime" name="prime"> {{-- To be obtained --}}
<legend>電子發票 & TapPay 付款</legend>
<div class="form-group">
<label for="CustomerEmail" class="col-lg-3 col-md-3 col-xs-4">電子信箱</label>
<div class="col-lg-9 col-md-9 col-xs-8">
<input type="email" class="form-control" id="CustomerEmail" name="CustomerEmail" value="{{ old('CustomerEmail') }}">
</div>
</div>
<div class="form-group">
<label for="CustomerPhone" class="col-md-3 col-xs-4">手機號碼</label>
<div class="col-md-9 col-xs-8">
<input type="number" class="form-control" id="CustomerPhone" name="CustomerPhone" value="{{ old('CustomerPhone') }}">
</div>
</div>
<hr>
<div class="form-group">
<div class="col-md-offset-3 col-xs-offset-4 col-md-9 col-xs-8">
<select class="form-control" id="giveTongBian" name="giveTongBian">
<option value="no" #if(old('giveTongBian') === "no") selected #endif>不需統編</option>
<option value="yes" #if(old('giveTongBian') === "yes") selected #endif>輸入統編</option>
</select>
</div>
</div>
<div class="form-group" id="customerIdentGroup">
<label for="CustomerIdentifier" class="col-md-3 col-xs-4">統一編號</label>
<div class="col-md-9 col-xs-8">
<input type="text" class="form-control" id="CustomerIdentifier" name="CustomerIdentifier" value="{{ old('CustomerIdentifier') }}">
</div>
</div>
<div class="form-group" id="customerNameGroup">
<label for="CustomerName" class="col-md-3 col-xs-4">買受人</label>
<div class="col-md-9 col-xs-8">
<input type="text" class="form-control" id="CustomerName" name="CustomerName" value="{{ old('CustomerName') }}">
</div>
</div>
<div class="form-group" id="customerAddrGroup">
<label for="CustomerAddr" class="col-md-3 col-xs-4">地址</label>
<div class="col-md-9 col-xs-8">
<input type="text" class="form-control" id="CustomerAddr" name="CustomerAddr" value="{{ old('CustomerAddr') }}">
</div>
</div>
<div class="tappay-form col-xs-offset-1 col-xs-10">
<h4 style="color: darkkhaki;">信用卡</h4>
<div class="form-group card-number-group">
<label for="card-number" class="control-label"><span id="cardtype"></span>卡號</label>
<div class="form-control card-number"></div>
</div>
<div class="form-group expiration-date-group">
<label for="expiration-date" class="control-label">卡片到期日</label>
<div class="form-control expiration-date" id="tappay-expiration-date"></div>
</div>
<div class="form-group cvc-group">
<label for="cvc" class="control-label">卡片後三碼</label>
<div class="form-control cvc"></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Pay</button>
</div>
</div>
</form>
I then have a on submit event which does a few things. At the bottom is me updating the hidden input with id = prime.
$('form').on('submit', function (event) {
//Code for first part of form begin
var boolFlag = true; //Default is submit
var errorMsg = ""; //Initial message
//Begin validation
var numOfNonEmptyFields = 0;
if(document.forms["paymentForm"]["CustomerEmail"].value != "") {
numOfNonEmptyFields++;
}
if(document.forms["paymentForm"]["CustomerPhone"].value != "") {
numOfNonEmptyFields++;
}
if(numOfNonEmptyFields == 0) {
errorMsg += "請輸入至少一個電子信箱或手機號碼.\n";
boolFlag = false;
}
//End validation
//Final steps: overall error message + success or fail case
if(boolFlag == false) {
alert("錯誤:\n" + errorMsg);
return false;
}
//Code for first part of form end
// fix keyboard issue in iOS device
forceBlurIos()
const tappayStatus = TPDirect.card.getTappayFieldsStatus()
console.log(tappayStatus)
// Check TPDirect.card.getTappayFieldsStatus().canGetPrime before TPDirect.card.getPrime
if (tappayStatus.canGetPrime === false) {
bootbox.alert({
title: "錯誤訊息",
message: "取得不了Prime.",
buttons: {
ok: {
label: "OK",
className: "btn btn-primary"
}
}
});
return false
}
// Get prime
TPDirect.card.getPrime(function (result) {
if (result.status !== 0) {
bootbox.alert({
title: "錯誤訊息",
message: result.msg,
buttons: {
ok: {
label: "OK",
className: "btn btn-primary"
}
}
});
return false
}
$("#prime").val(result.card.prime);
})
})
I've tested the hidden input with alert($("#prime").val()) directly after and it seems updated, however after submission, my Controller receives the value as null while other hidden input values are correct. So I suspect it's something got to do with the on submit event.

Added id attribute to the form element:
<form id="paymentForm" name="paymentForm" action="/parking_302/upload_payment" method="POST" role="form" class="form-horizontal">
Removed type from the button and added id:
<button id="submit-btn" class="btn btn-default">Pay</button>
Introduced a new click listener:
$(document).on("click","#submit-btn", function(event){
event.preventDefault();
validateAndSendForm();
});
Introduced a new function for the final form submit:
function submitForm(){
//do other stuff here with the finalized form and data
//.....
$( "#paymentForm" ).submit();
}
And put all of your old things into a new function as well:
function validateForm(){
//Code for first part of form begin
var boolFlag = true; //Default is submit
var errorMsg = ""; //Initial message
...
...
...
}
// Get prime
TPDirect.card.getPrime(function (result) {
if (result.status !== 0) {
bootbox.alert({
title: "錯誤訊息",
message: result.msg,
buttons: {
ok: {
label: "OK",
className: "btn btn-primary"
}
}
});
return false;
}
$("#prime").val(result.card.prime);
//use when you are ready to submit
submitForm();
})
}
So, basically you will have a "submitForm" function that you can use whenever you are ready to submit the form.

Seems like TPDirect.card.getPrime is something that gets data asynchronously so the $('form').on('submit' function won't wait for it to finish.

Show a preview/Edit option before submitting the form using AngularJS

I have my html form as shown below:
<div class="container">
<div class="form-group" ng-controller="studentController">
<form role="form" class="well form-horizontal" id="registerForm" name="forms.registerForm">
<div class="form-group">
<label class="col-md-4 control-label">First Name </label>
<input ng-model="formdata.firstname" required type="text" name="firstname">
</div>
<div class="form-group">
<label class="col-md-4 control-label">Middle Name </label>
<input ng-model="formdata.middlename" required type="text" name="middlename" maxlength="1">
</div>
<div class="form-group">
<label class="col-md-4 control-label">Last Name </label>
<input ng-model="formdata.lastname" required type="text" name="lastname">
</div>
<div class="form-group">
<label for="email" class="col-md-4 control-label">E-mail address</label>
<input ng-model="formdata.email" required type="email">
</div>
<div class="form-group">
<label class="col-md-4 control-label">Student ID</label>
<input ng-model="formdata.studentid" required type="number">
</div>
<div required class="form-group">
<label class="col-md-6 control-label">
level
</label> <br>
<div class="radio">
<label class="col-md-6 control-label">
<input type="radio" ng-model="formdata.type" value="300" checked>
300 </label>
</div>
<div class="radio">
<label class="col-md-6 control-label">
<input type="radio" ng-model="formdata.type" value="400">
400 </label>
</div>
<div class="radio">
<label class="col-md-6 control-label">
<input type="radio" ng-model="formdata.type" value="500">
500 </label>
</div>
</div>
<div class="form-group" align="center">
<input type="file" ngf-select ng-model="formdataa.file" name="file" ngf-pattern="'application/pdf'" accept="'.pdf'" ngf-max-size="5MB" required ngf-model-invalid="errorFile">
</div>
<div class="container" align="center">
<button class="btn btn-register" ng-click="tempData()" ng-disabled="forms.registerForm.$invalid" >Submit</button>
</div>
Below is the angular javascript code to store the details of the form and the file in the server.
$scope.tempData = function(ev){
console.log($scope.formdata);
var confirm = $mdDialog.confirm()
.title('Are you sure you want to delete this user?')
.ok('YES')
.cancel('CANCEL');
$mdDialog.show({
locals:{formdata: $scope.formdata, dataToPassFile: $scope.formdataa}, //here where we pass our data
controller: _DialogController,
controllerAs: 'vd',
templateUrl: 'scripts/app/studentdialog/studentdialog.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true
})
.then(
function(answer) {},
function() {
}
);
};
function _DialogController($scope, $mdDialog, formdata,dataToPassFile) {
$scope.closeDialog = function() {
$mdDialog.hide();
};
$scope.firstname = formdata.firstname;
$scope.lastname = formdata.lastname;
$scope.middlename = formdata.middlename;
$scope.studentid = formdata.studentid;
$scope.email = formdata.email;
$scope.type = formdata.type;
$scope.file = dataToPassFile.file;
console.log('FIle Passed' +dataToPassFile.file);
$scope.tfile = function () {
console.log("TFIle Called");
if ($scope.forms.registerForm.file.$valid && $scope.formdataa.file) {
$scope.upload($scope.formdataa.file);
}
};
$scope.upload = function (file) {
file.upload = Upload.upload({
url: $rootScope.baseURL + 'php/uploadT.php',
method: 'POST',
data: {
'file': file,
'userId': $scope.formdata.firstname,
'type': $scope.formdata.type
},
});
$scope.register = function () {
console.log("clicked");
$scope.loading = true;
AppServices.register($scope.formdata)
.then(function (result) {
if (Object.keys(result).length > 0) {
// update current users list
if (result.type == '300' || result.type == '400') {
$scope.users.300.push(result);
} else {
console.log(result);
$scope.users[result.type] = result;
}
$scope.forms.registerForm.$setPristine();
$scope.forms.registerForm.$setUntouched();
$scope.msg = {};
$scope.msg.successRegister = 'Registered Successfully';
} else {
$scope.msg = {};
$scope.msg.errorRegister = 'Email already exists!';
}
})
.finally(function (data) {
$scope.loading = false;
});
};
When the user clicks on Submit button, I want to create a confirmation page where it will give the user all the details again so the user can confirm and then actually submit the form. Kindly let me know how can I use localStorage for storing and retrieving the data at the same time for confirm page.
Thank you in advance!
UPDATE: I created a MDDialog and calling it when the button is clicked,I can see all the data as well in MDDialog now. When user clicks on OK, I want the data on the page(not the data on the MDDialog) to be submited in the backend(php), how can I do that?

Why not show this info on a modal, and call the confirmation function in the same controller where you are, after the modal is closed. This way you won't need any caching policy.

Select change not works

I have PartialView
Here is code
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Выберите проект</label>
<select id="projectId" name="add_triangolazione" class="form-control">
</select>
</div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">От:</label>
<input type="date" class="form-control" id="datefrom">
</div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">До:</label>
<input type="date" class="form-control" id="dateto" placeholder="YYYY-MM-DD" data-date-split-input="true" >
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Наименование услуги:</label>
#Html.DropDownList("Service", null, "XXXX", htmlAttributes: new { #class = "form-control", #id = "serviceIdProject" })
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">График работы:</label>
<div>
<label for="message-text" class="col-form-label">С:</label>
<input type="time" class="form-control" id="workTime">
</div>
<div>
<label for="message-text" class="col-form-label">По:</label>
<input type="time"" class="form-control" id="workTimeTo">
</div>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Количество:</label>
<textarea class="form-control" id="quantity"></textarea>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Тариф:</label>
<textarea class="form-control" id="rate" readonly></textarea>
</div>
It loading into modal via script
Here is script code
$(document).on('click', '#addShow', function () {
ShowAndPopulate();
});
function ShowAndPopulate() {
$('#addProposalManager').load('/Manage/AddProposalManager', function () {
let email = $('#userId').text();
let getProposalsUrl = '/manage/populateprojects';
model = {
email: email
},
$.ajax({
url: getProposalsUrl,
data: JSON.stringify(model),
contentType: 'application/json; charset=utf-8',
type: 'POST',
dataType: 'json',
processData: false,
success: function (data) {
var list = data;
$.each(list, function (i, d) {
$('#projectId').append('<option value="' + d.Id + '">' + d.Name + '</option>');
});
}
})
});
}
Also in this field
#Html.DropDownList("Service", null, "XXXX", htmlAttributes: new { #class = "form-control", #id = "serviceIdProject" })
I need to do something on value change
So I wrote this code at script
$('#serviceIdProject').change(function () {
alert("Gotcha!");
// ServiceChange();
});
But when I change value, nothing happens.
Where can be my problem?
Thank's for help

Try using event delegation and also you seem to be using the wrong ID for the select:
$(document).on('change' , '#projectId' , function () {
alert("Gotcha!");
// ServiceChange();
});