0

I want to send data from my submit form by POST, all my input values are transmitted except the select ones, inputSpecie and inputTag are empty ! I'm trying to display option id of the select its empty also This is my HTML form : 

<div class="container start">
<div class="panel panel-default">
 <!-- Default panel contents -->
  <div class="panel-body"><h1>Feeding Station Administration</h1>
  <!-- form -->
   <form class="form-signin" ng-submit="submit()" ng-controller="adminController">
    <h2 class="form-signin-heading">Add new Bird</h2>
    <select name= "inputTag" id= "inputTag" class="form-control" placeholder="Tag Type" ng-model="bird.inputTag">
      <option ng-repeat="tag in tags" value="{{option.id}}" >{{tag.tagName}}</option>
    </select><tt>option = {{bird.inputTag}}</tt><br/>
    <button class="btn btn-primary" ng-click="addTag()">Add Tag</button>
    <br/><br/>
     <select name = "inputSpecie" id= "inputSpecie" class="form-control" placeholder="Specie Category" ng-model="bird.inputSpecie">
      <option ng-repeat="specie in species" value="{{option.id}}"  >{{specie.latinName}}</option>
    </select> <tt>option = {{bird.inputSpecie}}</tt><br/>
    <br/> 
     <button class="btn btn-primary" ng-click="addSpecie()">Add Specie</button>
        <br/><br/>
    <input type="text" id="inputSex" class="form-control" placeholder="Sex"  ng-model="bird.sex"/>
        <br/><br/>
    <input type="text" id="inputRFID" class="form-control" placeholder="RFID Value" ng-model="bird.rfid"/>
        <br/><br/> 
    <textarea id="inputComment" class="form-control" placeholder="Comment" ng-model="bird.comment"></textarea>
        <br/><br/> 
    <input type="file" ng-model="form.file_avatar" id="file_avatar"  />
        <br/><br/>  

    <input class="btn btn-lg btn-primary btn-block" type="submit" id="submit" value="Submit" />
  </form>

  </div> 
</div>
</div>

Controller script :

angular.module('test').controller('adminController', function($scope, $http)
 {

        $scope.bird;
        $scope.submit = function() 
        {
            console.log(" Get fields values and Insert in the DB !" );

            // posting Data to server
            $http.post('/api/adminPanel/create', $scope.bird).then(function (response) {
            console.log(response);
             });
            // failure post

        } ;

        $http.get('/api/adminPanel').then(function (response) {
            // create a blank object to handle form data.
            //$scope.bird = {};
            $scope.species = response.data.species;
            $scope.tags = response.data.tags;


         });

    });
Improve this question

2 Answers 2

Reset to default
2

I think what it will work if you change, because I guess you did not define option in your controller

<select name= "inputTag" id= "inputTag" class="form-control" placeholder="Tag Type" ng-model="bird.inputTag">
  <option ng-repeat="tag in tags" value="{{option.id}}" >{{tag.tagName}}</option>
</select><tt>option = {{bird.inputTag}}</tt><br/>

to

<select name= "inputTag" id= "inputTag" class="form-control" placeholder="Tag Type" ng-model="bird.inputTag">
  <option ng-repeat="tag in tags" value="{{tag.id}}" >{{tag.tagName}}</option>
</select><tt>option = {{bird.inputTag}}</tt><br/>

update

angular.module('test', []).controller('adminController', function($scope, $http, $timeout) {

  $scope.bird;
  $scope.submit = function() {
    console.log(" Get fields values and Insert in the DB !");

    // posting Data to server
    $http.post('/api/adminPanel/create', $scope.bird).then(function(response) {
      console.log(response);
    });
    // failure post

  };

  $timeout(function() {
    $scope.$apply(function() {
      $scope.tags = [{
        "id": 1,
        "tagName": "abc"
      }, {
        "id": 2,
        "tagName": "xxx"
      }];
      $scope.species = [{
        'id': 1,
        'specieName': "ddd"
      }, {
        'id': 2,
        'specieName': "dedd"
      }];
    });
  }, 10);

  // create a blank object to handle form data.
  //$scope.bird = {};


});
<body ng-app="test">
  <div class="container start">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-body">
        <h1>Feeding Station Administration</h1>
        <!-- form -->
        <form class="form-signin" ng-submit="submit()" ng-controller="adminController">
          <h2 class="form-signin-heading">Add new Bird</h2>
          <select name="inputTag" id="inputTag" class="form-control" placeholder="Tag Type" ng-model="bird.inputTag">
            <option ng-repeat="tag in tags" value="{{tag.id}}">{{tag.tagName}}</option>
          </select><tt>option = {{bird.inputTag}}</tt>
          <br/>
          <button class="btn btn-primary" ng-click="addTag()">Add Tag</button>
          <br/>
          <br/>
          <select name="inputSpecie" id="inputSpecie" class="form-control" placeholder="Specie Category" ng-model="bird.inputSpecie">
            <option ng-repeat="specie in species" value="{{specie.id}}">{{specie.specieName}}</option>
          </select> <tt>option = {{bird.inputSpecie}}</tt>
          <br/>
          <br/>
          <button class="btn btn-primary" ng-click="addSpecie()">Add Specie</button>
          <br/>
          <br/>
          <input type="text" id="inputSex" class="form-control" placeholder="Sex" ng-model="bird.sex" />
          <br/>
          <br/>
          <input type="text" id="inputRFID" class="form-control" placeholder="RFID Value" ng-model="bird.rfid" />
          <br/>
          <br/>
          <textarea id="inputComment" class="form-control" placeholder="Comment" ng-model="bird.comment"></textarea>
          <br/>
          <br/>
          <input type="file" ng-model="form.file_avatar" id="file_avatar" />
          <br/>
          <br/>

          <input class="btn btn-lg btn-primary btn-block" type="submit" id="submit" value="Submit" />
        </form>

      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>

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

8 Comments

I have updated my first post , thanks a lot, the controller contains the object bird and send the bird's data to the server
what is the tag structure? does it have id? can you console log $scope.bird before you post it and check if the bird.inputTag is empty or not
Im printing $scope.bird ,I'm getting all the values of the form except : inputTag and inputSpecie which are empty
i think you need to check if you tags are empty or the tag in tags does not have the attributes id or tagName, I will post an working example soon
hi is @Soumia is it working, do you have more problem? if not please accept my solution :) thanks
|
0

Use ngOptions in order to have itwork with ng-model : 

<select name = "inputSpecie" id= "inputSpecie" class="form-control" placeholder="Specie Category" ng-model="bird.inputSpecie"  ng-repeat="specie.id as specie.latinName for specie in species">
</select>
Improve this answer

3 Comments

sorry i made a typoe, i rewrote the ng-options take a look
it is still the same :)
Hum just in case, can you add a console.log in the $http.get('/api/adminPanel' and check if your data are fine ? Also init $scope.species to [] and same for tags in the beginning of your controller

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.