CODEWITHSUNDEEP
angularjs
Joe
Joe

Reputation: 4234

How to send data to server from a select in a form

I have this controller:

  $scope.disciplines = disciplines;
  $scope.discipline = disciplines[0];

It's an array.

I have this in my form:

  <form class="form-horizontal" ng-submit="submit()"  method="post">
    <input type="text" name="prj_title"  ng-model="project.prj_title" class="form-control" id="title">
    <select id="discipline" class="form-control" name="prj_discipline" ng-model="discipline" ng-options="d for d in disciplines"></select>
    <input type="submit" class="btn btn-block btn-success btn-lg" value="Ansök">
</form>

And this is my post:

      $scope.submit = function(){
        $http({
          method  : 'POST',
          url     : '/api/project',
          data    : $.param($scope.project),  // pass in data as strings
          headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
        })
        .success(function(data, status) {
          ...
          }
        })
      };

The first input works. The server receives prj_title:.

But the select tag does not work.

name=discipline does not seem to have effect. The value is not sent to the server. Have read the docs and the name-property should be valid on the select tag. What I want is the select tag to send prj_discipline:

What am I doing wrong?

Upvotes: 0

Views: 1015

Answers (1)

Poyraz Yilmaz
Poyraz Yilmaz

Reputation: 5857

you can change your select ng-model like your input,

<select id="discipline" class="form-control" name="prj_discipline" 
ng-model="project.prj_discipline" ng-options="d for d in disciplines"></select>

basically you need names only for form validation, what you were posting was $scope.project object which has no property with name prj_discipline, so if you bind your select model to project.prj_discipline it will work...

Upvotes: 1

Related Questions