Hi I want to post all form data with same model name. that is my code in this i also clone tr tag to create more form with same name classes & Model .

  <tr class="row_1">

                    <form name="myForm1" class="sub_job">
                        <td><input type="text" name="quantity" ng-model="job.quantity"/></td>
                        <td><input type="text" name="quantity" ng-model="job.quality"/></td>
                        </form>

                 </tr>

                  <tr class="row_1">

                    <form name="myForm2" class="sub_job">
                        <td><input type="text" name="quantity" ng-model="job.quantity"/></td>
                        <td><input type="text" name="quantity" ng-model="job.quality"/></td>
                        </form>

                 </tr>
                  <tr class="row_1">

                    <form name="myForm3" class="sub_job">
                        <td><input type="text" name="quantity" ng-model="job.quantity"/></td>
                        <td><input type="text" name="quantity" ng-model="job.quality"/></td>
                        </form>

                 </tr>

                         </tbody>

                            </table>
                                                             <!--   </form> -->
            <button class="btn btn-primary" ng-click="saveJob(job)" id="save_exit">Save & Exit</button>
            <button class="btn btn-warning" onclick="cloneRow()"  id="add_job">Add Row</button>

angular Code Like That

 $scope.saveJob = function(data) {
    console.log(data);
    //http request goes here
}

Hi I want to post all form data with same model name. that is my code in this i also clone tr tag to create more form with same name classes & Model .

  <tr class="row_1">

                    <form name="myForm1" class="sub_job">
                        <td><input type="text" name="quantity" ng-model="job.quantity"/></td>
                        <td><input type="text" name="quantity" ng-model="job.quality"/></td>
                        </form>

                 </tr>

                  <tr class="row_1">

                    <form name="myForm2" class="sub_job">
                        <td><input type="text" name="quantity" ng-model="job.quantity"/></td>
                        <td><input type="text" name="quantity" ng-model="job.quality"/></td>
                        </form>

                 </tr>
                  <tr class="row_1">

                    <form name="myForm3" class="sub_job">
                        <td><input type="text" name="quantity" ng-model="job.quantity"/></td>
                        <td><input type="text" name="quantity" ng-model="job.quality"/></td>
                        </form>

                 </tr>

                         </tbody>

                            </table>
                                                             <!--   </form> -->
            <button class="btn btn-primary" ng-click="saveJob(job)" id="save_exit">Save & Exit</button>
            <button class="btn btn-warning" onclick="cloneRow()"  id="add_job">Add Row</button>

angular Code Like That

 $scope.saveJob = function(data) {
    console.log(data);
    //http request goes here
}

• javascript
• angularjs
• forms

• 1 They all same. Just use one of them or explain why did you do that? – hurricane Commented Jan 30, 2017 at 6:46
• @hurricane with Add Row button we create multiple / dynamic form to add Multiple job and submit all form data by click on Save & Exit button – Viijay ijardar Commented Jan 30, 2017 at 6:49
• 1 Can you share your angular code as well. You can achieve this thing with array and ng-repeat rather than cloning html element. – Furqan Aziz Commented Jan 30, 2017 at 6:51
• your html is wrong. you cannot have multiple form with same "name". if you make them pragmaticaly (dynamic ) add an index to them like : <form name="myForm1" <form name="myForm2" <form name="myForm3" .... or just create one form and multiple sub job – AlainIb Commented Jan 30, 2017 at 6:52
• how are you getting multiple instances of job.quantity and job.quality ? – Brave Soul Commented Jan 30, 2017 at 6:58

3 Answers 3

EDIT: This structure is not good. I think you are trying to create a lot of rows and select table DOM and datas. It is not an angular way!

How to do that with angular way

You need to define an array in your controller.

$scope.jobList = [];

You need to define a push method. Your save method work with jobList array.

$scope.addEmptyJob() = function(){
    var newJob = {};
    $scope.jobList.push(newJob);
}

You need to define a repeating td and one submit button.

<form name="myForm_{{$index}}" class="sub_job">
    <tr class="row_1" ng-repeat="job in jobList">
        <td><input type="text" name="quantity" ng-model="job.quantity"/></td>
        <td><input type="text" name="quantity" ng-model="job.quality"/></td>
        <td>
            <button class="btn btn-warning" ng-click="addEmptyJob()"  id="add_job">Add New Row</button>
        </td>
    </tr>
    <button type="submit" class="btn btn-primary" ng-click="saveJob(job)" id="save_exit">Save & Exit</button>
</form>

OLD ANSWER for single save.

You need to define every form with a button. And every form have to be unique. So you can use $index for unique. End you need to add type="submit" to buttons for form control.

<tr class="row_1" ng-repeat="job in myArray track by $index">
    <form name="myForm_{{$index}}" class="sub_job">
        <td><input type="text" name="quantity" ng-model="job.quantity"/></td>
        <td><input type="text" name="quantity" ng-model="job.quality"/></td>
        <td>
            <button type="submit" class="btn btn-primary" ng-click="saveJob(job)" id="save_exit">Save & Exit</button>
            <button type="submit" class="btn btn-warning" onclick="cloneRow()"  id="add_job">Add Row</button>
        </td>
    </form>
</tr>

You can achieve this thing with array and ng-repeat rather than cloning html element.

HTML

<table><tbody>
    <tr class="row_1" ng-repeat="job in jobs track by $index">
    <form name="myForm" class="sub_job">
        <td><input type="text" name="quantity[]" ng-model="job.quantity"/></td>
        <td><input type="text" name="quantity[]" ng-model="job.quality"/></td>
    </form>
    </tr>
</tbody></table>

<button class="btn btn-primary" ng-click="save()" id="save_exit">Save & Exit</button>
<button class="btn btn-warning" ng-click="clone()" id="add_job">Add Row</button>

Angular Controller

// You can fetch this array of jobs from server for showing purpose
$scope.jobs = [
    {
       quantity: "1.0" ,
       quality: "A"
    },
    {
       quantity: "2.0" ,
       quality: "B"
    }
]

$scope.clone = function(){
    // You can change default values for new job to appear
    var empty = {
       quantity: "" ,
       quality: ""
    };
    $scope.jobs.push(empty);
}

$scope.save = function(){
    // You can send this array of jobs to server for saving purpose
    console.log($scope.jobs);
}

You can't have a single model for multiple input elements, because if you change value in either of the input boxes, it will overwrite it with the latest value. Assuming you start filling the form, from form1 to form3, and do a submit, the model will hold value entered in the last used input box, i.e form3.

To solve your problem you need to use a collection, array or object (preferably array) as your model.

Your controller would be something like:

var JobModel = function() {
  return {
    jobs: [],
    addRow: function() {
      var model = {
        quantity: "",
        quality: "",
      };
      this.jobs.push(model);
    },
    save: function() {
      console.log(this.jobs);
    },
    submit: function(){
      for(var i=0;i<this.jobs.length;i++){
        doSomeHTTPRequest(this.jobs[i]);
    }
  }
  };
};
$scope.jobModel = new JobModel();

Your HTML will be somthing like:

<button ng-click="jobModel.addRow()">
  Add Job
</button>
<div ng-repeat="job in jobModel.jobs">
  <input type="text" ng-model="job.quantity" placeholder="Quantity">
  <input type="text" ng-model="job.quality" placeholder="Quality">
</div>
<button ng-click="jobModel.save()">
  Save Jobs
</button>

To submit your form with same name you would need to iterate over the jobs array and make ajax calls for each