Angularjs Form Processing

Question

I'm trying to process the submitted data object from a form but I'm stuck. I have done some researches on this site and spent hours reading but I didn't get any answer. I can get the form data without a problem, the issue is when a customer registers guests at two or more hotels. In the pre tags it will show hotel_name:{"hotelx", "hotely"}. I want to store this as JSON in my lodging file but when my controller receives the form data object, how do break into it and get what I need, so I can push it onto the file?

    <div class=" col-md-12">
        <div class="md-form">
            <input type="text" id="Not_Listed" class="form-control" ng-model="lodgingRegistration.not_listed" placeholder="Enter hotel name if not listed below">
            <label for="Not_Listed"></label>
        </div>
         <div class="md-form col-md-6"  ng-repeat="x in lodging">
            <input type="checkbox" id="{{x.hotel_name}}" 
                ng-model="lodgingRegistration.hotel_name[x.hotel_name]">
            <label for="{{x.hotel_name}}">{{x.hotel_name}}</label>
        </div>
    </div>

    <div class="text-center">
        <button class="btn btn-deep-purple" ng-  click="register(lodgingRegistration)">Submit</button>
    </div>
          <h3>Captured Form Data:</h3>
      <pre>{{lodgingRegistration | json}}</pre>

Here is my controller code

      $scope.register = function(lodgingRegistration){
    //       something must go here to break into the object/array before I  push?
    $scope.registered.push(lodgingRegistration);
        console.log(lodgingRegistration);
        }

and here is my display, most of works but I can't access the dummy data in the file either, which is an array of hotel_name

    <tbody>
     <tr ng-repeat="x in registered | filter:SearchHotel"

        <th scope="row">{{$index +1}}</th>
        <td>{{x.event_name}}</td>
        <td>{{x.team_name}}</td>
        <td>{{x.sport}}</td>
        <td>{{x.hotel_name}}</td>

     </tr>
    </tbody>

I know I need to change how to access the

    x.hotel_name

, I tried nest

    ng-repeat with 

    y in x.hotel_name

but it didn't work. I'd like to store this as JSON using Firebase but if I can't I'll have to go back to PHP and I really don't want to do that, any help is much appreciated.

ashwinlagji · Accepted Answer · 2017-02-13 06:45:29Z

angular
    .module('app', []).controller('MyController', ['$scope',
  function($scope) {
    $scope.lodgingRegistration = {};
    $scope.registered = {};
    $scope.registered.hotel_name = [];
    $scope.lodging = [{
      hotel_name: 'hotelA'
    }, {
      hotel_name: 'hotelB'
    }, {
      hotel_name: 'hotelC'
    }, {
      hotel_name: 'hotelD'
    }];
    $scope.register = function(lodgingRegistration) {

      for (x in $scope.lodging) {
        if ($scope.lodging[x].checked == true) {
          $scope.registered.hotel_name.push($scope.lodging[x].hotel_name);
        }
      }
      if (lodgingRegistration.not_listed != undefined && lodgingRegistration.not_listed != null) {
        $scope.registered.hotel_name.push(lodgingRegistration.not_listed);
      }
    }
  }
]);

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

<body ng-app='app'>
  <div ng-controller='MyController'>
    <div class=" col-md-12">
      <div class="md-form">
        <input type="text" id="Not_Listed" class="form-control" ng-model="lodgingRegistration.not_listed" placeholder="Enter hotel name if not listed below">
        <label for="Not_Listed"></label>
      </div>
      <div class="md-form col-md-6" ng-repeat="x in lodging">
        <input type="checkbox" id="{{x.hotel_name}}" ng-model="x.checked">
        <label for="{{x.hotel_name}}">{{x.hotel_name}}</label>
      </div>
    </div>

    <div class="text-center">
      <button class="btn btn-deep-purple" ng-click="register(lodgingRegistration )">Submit</button>
    </div>
    <h3>Captured Form Data:</h3>
    <pre>{{lodgingRegistration | json}}</pre>

     <table>
        <tbody>
            <tr ng-repeat="x in registered.hotel_name track by $index" >
                <th scope="row">{{$index +1}}</th>
                <td>{{x}}</td>
            </tr>
        </tbody>
    </table>
    </div>
</body>

EDITED

I have Updated the controller and the Html and got this working. The selected hotels are stored in registered.hotel_name

Controller:

$scope.lodgingRegistration = {};
$scope.registered = {};
$scope.registered.hotel_name = [];
$scope.lodging = [{
    hotel_name: 'hotelA'
}, {
    hotel_name: 'hotelB'
}, {
    hotel_name: 'hotelC'
}, {
    hotel_name: 'hotelD'
}];
$scope.register = function (lodgingRegistration) {

    for (x in $scope.lodging) {
        if ($scope.lodging[x].checked == true) {
            $scope.registered.hotel_name.push($scope.lodging[x].hotel_name);
        }
    }
    if (lodgingRegistration.not_listed != undefined && lodgingRegistration.not_listed != null) {
        $scope.registered.hotel_name.push(lodgingRegistration.not_listed);
    }
}

HTML:

<div class=" col-md-12">
        <div class="md-form">
            <input type="text" id="Not_Listed" class="form-control" ng-model="lodgingRegistration.not_listed" placeholder="Enter hotel name if not listed below">
            <label for="Not_Listed"></label>
        </div>
        <div class="md-form col-md-6" ng-repeat="x in lodging">
            <input type="checkbox" id="{{x.hotel_name}}" ng-model="x.checked">
            <label for="{{x.hotel_name}}">{{x.hotel_name}}</label>
        </div>
    </div>

    <div class="text-center">
        <button class="btn btn-deep-purple" ng-click="register(lodgingRegistration )">Submit</button>
    </div>
    <h3>Captured Form Data:</h3>
    <pre>{{lodgingRegistration | json}}</pre>


     <table>
    <tbody>
        <tr ng-repeat="x in registered.hotel_name track by $index" >
            <th scope="row">{{$index +1}}</th>
            <td>{{x}}</td>
        </tr>
    </tbody>
</table>

The points to consider :

The ng-model for checkbox assigns a true or false value and not the value of the selected item.

Hi Ashwin, that doesn't work in this instance. At first I just used ng-model="lodgingRegistration.[x.hotel_name]" which returns the hotel name but with no key, so I wouldn't be able to push it onto the existing JSON file. Maybe I could use a foreach to identify whatever hotel was selected, if it matches a name in the hotel list, then assign it / them, to the key "hotel_name"
@JakeProtaTECH i have updated the solution based on my understanding of the problem.
@/ashwin-lagji Thank you so much for your efforts and explaination, this is a big help!!

Hatem Mohamed · Accepted Answer · 2017-02-10 05:49:00Z

0

You have in your controller the json object lodgingRegistration so you can get any piece of data you want ,

Object.property

or

Object["property"]

and pass it to the backend to be stored through ajax request (angular's $http service) .

answered Feb 10, 2017 at 5:49

Hatem Mohamed

2301 silver badge7 bronze badges

Collectives™ on Stack Overflow

Angularjs Form Processing

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related