CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsforms
rogodeter
rogodeter

Reputation: 470

AngularJS Form Submit not working

First, I am brand new to Angular (and not a JS expert) but I have to get something working and am struggling with form submission. What I need to do is load some movie showtimes from an http API and use ng-repeat to stuff them into some container on the page. The REST API takes a zipcode as input. I'm initially loading it with a fixed zip (11111) and this works. The variables in the HTML appear to be correctly bound to the variables in the controller as the REST call results in the page loading empty and then movies appear a second or so later when the REST call completes. Now I want to let the user enter a new ZIP in the text field, click a button, and then I suppose repopulate the movies[] so the page will reload that div.

My Angular app looks something like this

var app = angular.module('showtime', []);
app.controller('showtimeController', function($scope, $http) {

    var foo = this;
    var zip = 11111;

    var movies = [];

    $http.get('https://some.server/movies?location=' + zip).then(function(response) {
        foo.movies = response.data;
    });
});

I have an HTML page that contains a div that displays some movie details as below

<!DOCTYPE html>
<html ng-app="showtime">

<head>
    <title>Showtime</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</head>


<body data-spy="scroll" data-target=".navbar" data-offset="50" ng-controller="showtimeController as showtime">

... with an HTML form ...

    <div class="col-xs-1" style="padding-top: 8px;">
        <!--<label for="zipusr">Zip:</label>-->
        <form name="zipForm" ng-submit="showtime.submitZip()" novalidate>
            <a ng-href='#here' ng-click='refreshWithZip()'>go</a>
            <input placeholder="Enter ZIP" type="text" class="form-control" id="zip" ng-model="zip">
        </form>
    </div>
    <div class="col-xs-1" style="padding-top: 8px;">
        <button class="btn btn-default btn-sm" type="submit">fetch</button>
    </div>

... and some divs to iterate over the movies[] ...

<div id="section1" class="container-fluid">
    <h1>Movies</h1>
    <div class="row">
        <div class="col-sm-6 col-md-4" ng-repeat="biz in showtime.movies.businesses">
            <div class="thumbnail">
                <img class="img-responsive" ng-src="{{biz.image_url}}" alt="..." width="120" height="120" />
                <div class="caption">
                    <h3>{{biz.name}}</h3>
                    <p>{{biz.description}}</p>
                </div>
            </div>
        </div>
    </div>
</div>

Any help would be appreciated.

Upvotes: 0

Views: 935

Answers (2)

Ludovic Mercier
Ludovic Mercier

Reputation: 51

I don't see in your controller definition the function submitZip() called by your ng-submit.

I think you should modify your controller this way :

foo.submitZip = function(){
    $http.get('https://some.server/movies?location=' + zip).then(function(response) {
       foo.movies = response.data;
   })

}

If you want to keep the load of your default zip when the controller is instanciate add a foo.submitZip() at end of the declaration of your controller.

Hope this will help you.

Upvotes: 0

Atul Sharma
Atul Sharma

Reputation: 10730

Add ng-model to bind variable ..

 <input placeholder="Enter ZIP" type="text" class="form-control" ng-model="zipcode" id="zip" ng-model="zip">

Now in controller.. make a function

$scope.loadNewData = function(){

$http.get('https://some.server/movies?location=' + $scope.zipcode).then(function(response) {
    foo.movies = response.data;
});

};

and call the loadNewData() function on submit 

 <button class="btn btn-default btn-sm" type="button" ng-click="loadNewData()">fetch</button>

Upvotes: 1

Related Questions