In the midst of developing an AngularJS application, I'm faced with a requirement to pass hidden variables to a third-party application. These variables need to be fetched from a database.
To accomplish this, I've implemented the following code snippet to dynamically generate hidden variables:
<input type="hidden" ng-repeat="hdnvar in models.MyModel.templateVariables" name="{{hdnvar.Key}}" id="{{hdnvar.Key}}" value="{{hdnvar.Value}}" />
Upon clicking the submit button, the following function is triggered:
$scope.getDetailsForTP = function () {
$scope.models.MyModel.templateVariables = {};
$http({
url: "http://localhost:11149/MyService.svc/TemplateVariable",
dataType: "json",
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
}).then(function successCallback(response) {
if (response.status == 200) {
$scope.models.MyModel.templateVariables = response.data;
$scope.submitForm();
}
else {
alert('Error occurred in fetching template variable data');
}
}, function errorCallback(response) {
//do something
});
};
$scope.submitForm = function () {
document.getElementById("apirequest").submit();
};
While the hidden variables appear correctly on the page, I noticed that they do not get submitted when reviewing Fiddler. Any assistance on this issue would be greatly appreciated.