I am trying to create an invoice form, which can make all the necessary calculations like subtotal, tax total by itself .
Hitting the submit button should submit all values and the dynamically created items to a PHP page, which will insert these values (written by the user, or calculated by angularjs) to the appropriate SQL table/column as I wish.
Based on this project , I added this javascript code.
function PhpCtrl($scope, $http, $templateCache) {
var method = 'POST';
var url = 'added.php';
$scope.codeStatus = "";
$scope.add = function() {
var FormData = {};
$http({
method: method,
url: url,
data: FormData,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
cache: $templateCache
}).
success(function(response) {
$scope.codeStatus = response.data;
}).
error(function(response) {
$scope.codeStatus = response || "Request failed";
});
return false;
};
}
Can anyone help me how to store all the dynamically created items, along with their values, in order to submit them to a php page ?
You can create a FormData
to be submitted dynamically using plain javascript like this:
var fd = new FormData();
fd.append("fieldName", valueToSubmit);
fd.append("arrayField[]",[1,2,3]); //you can even post array data
The you push fd
to the server:
var uri = "added.php";
var xhr = new XMLHttpRequest();
xhr.open("POST",uri,true);
xhr.onreadystatechange=function(){
if(xhr.readyState == 4 && xhr.status==200){
//do something with returned data
}
};
fd.append("img_file",blob_to_upload);// you can even upload a file
fd.append("user_id",data);
fd.append("category_id",category_id);
xhr.send(fd);