how to submit form value which have same name in angular js?

Question

I have a multiple for filed which have a same name in array formate like

<input type='text' name="frm[]">. I want to submit this in AngularJS and get value in PHP.

my script:

<input type="text" name="textval" id="textval1" ng-model="data.textvalt[1]" >
<input type="text" name="textval" id="textval2"ng-model="data.textvalt[2]">
<input type="text" name="textval" id="textval3" ng-model="data.textvalt[3]">

You shall pass data with ajax as json, so name does not matter in this case — karaxuna
– karaxuna, Commented Feb 5, 2016 at 9:41
In normal case (i mean when angular not used in project) we can't submit form (alwayes get last input name) if we have inputs with same names, ng-model work as name in our project.. i think we can't do it — Maher
– Maher, Commented Feb 5, 2016 at 9:43

Buddhabhushan Kamble · Accepted Answer · 2016-02-05 11:20:36Z

1

Use Angular's $http service to post the data to your php file.

Check the below code

<html ng-app="submitExample">
<script type="text/javascript" src="lib\angular.js"></script>
<script type="text/javascript" src="index.js"></script>
<form ng-submit="submit()" ng-controller="FormController">
  Enter text and hit enter:
<input type="text" name="textval" id="textval1" ng-model="data.textvalt[1]" >
<input type="text" name="textval" id="textval2"ng-model="data.textvalt[2]">
<input type="text" name="textval" id="textval3" ng-model="data.textvalt[3]">
<input type="submit" id="submit" value="Submit" />
</form>
<html>
  

    var app = angular.module('submitExample', [])
  app.controller('FormController', ['$scope','$http', function($scope,$http) {
    
      $scope.data = {};
      $scope.data.textvalt = new Array();
      $scope.data.textvalt[1] = '';
      $scope.data.textvalt[2] = '';
      $scope.data.textvalt[3] = ''; 

      $scope.submit = function() {       
              

              var configObject = {
               method: 'POST',
               url: 'index.php',
               data: { textval1: $scope.data.textvalt[1] , textval2 : $scope.data.textvalt[2], textval3 : $scope.data.textvalt[3] }
              }

$http(configObject).then
  (function successCallback(response) {
console.log("posted sucuessfully");
  },
   function errorCallback(response) {
  console.log("Failed");
  });
     
   };
    }]);

answered Feb 5, 2016 at 11:20

Buddhabhushan Kamble

2901 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Manoj Shevate Over a year ago

You can also use $resource service instead of $http. refer documentation - docs.angularjs.org/api/ngResource/service/$resource

Rajendra Pandey Over a year ago

it ok, but in my case text box is dynamically created as per loop value that means in general, we create a text box with loop like for($i=0; $i<5; $i++){?><input type="text" name="textval[]" id="textval[]" ><?php } ?> after submit this text box we get text box value in arrray. how this things we manage in angularjs.

Buddhabhushan Kamble Over a year ago

@ManojShevate Thanks :)

Buddhabhushan Kamble Over a year ago

@RajendraPandey: Use Angular's ng-repeat directive to create input box dyanmically and post the list data using angular's $http or $resource service.

Rajendra Pandey Over a year ago

what is way to get all text box value in angularjs and post it by http request to php file. any one please help me

Collectives™ on Stack Overflow

how to submit form value which have same name in angular js?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related