In this site, I want the user to have the ability to give as input as many "parts" as he likes (along with other info, like category, value). This is what i have so far:
<?php
if(!isset($_SESSION)){
session_start();
}
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
fieldset{
background: #FCFCFC;
padding: 16px;
border: 1px solid #D5D5D5;
}
.addfields{
background: #C76868;
color: #FFF;
font-weight: bold;
font-size: 21px;
border: 0;
cursor: pointer;
display: inline-block;
padding: 4px 9px;
vertical-align: top;
line-height: 100%;
}
#choicesDisplay {
padding: 10px;
background: rgb(227, 250, 227);
border: 1px solid rgb(171, 239, 171);
color: rgb(9, 56, 9);
}
.remove{
background: #C76868;
color: #FFF;
font-weight: bold;
font-size: 21px;
border: 0;
cursor: pointer;
display: inline-block;
padding: 4px 9px;
vertical-align: top;
line-height: 100%;
}
input[type="text"],
select{
padding:5px;
}
</style>
<script type='text/javascript'>
var newItemNo;
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = [{id: 'choice1'}, {id: 'choice2'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function(index) {
$scope.choices.splice(index, 1);
};
});
</script>
</head>
<body>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<tr><td><select name="category" id="category">
<optgroup label="Categories">
<option value="1" name="Hardware">Hardware</option>
<option value="2" name="network">Network</option>
<option value="3" name="Software">Software</option>
</optgroup>
</select></td>
<td><input type="text" name="name" id="name" placeholder="Asset Name"></td>
<td><select name="value" id="value">
<optgroup label="Part Value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</optgroup>
</select></td>
<button class="remove" ng-click="removeChoice($index)">-</button>
<button class="addfields" ng-click="addNewChoice()">+</button>
</fieldset>
<button onclick="addPart()">Submit</button> //the submit javascript function to be created, or php alternative
</div>
</body>
</html>
The problem is that i don't know the "name" of the newly added forms, nor how many forms have been added by the user in total. So, how can the input of these forms be saved in an sql db with a table named "assets" containing the columns "category", "name" and "value"?