AngularJS Form Submit not working

Question

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.

What's wrong here ? What is your errors ?

Steeve Pitis
– Steeve Pitis

2016-10-12 09:05:59 +00:00
Commented Oct 12, 2016 at 9:05 — Steeve Pitis
– Steeve Pitis, Commented Oct 12, 2016 at 9:05
I don't see submitZip method in showtimeController .

Pankaj Parkar
– Pankaj Parkar

2016-10-12 09:07:53 +00:00
Commented Oct 12, 2016 at 9:07 — Pankaj Parkar
– Pankaj Parkar, Commented Oct 12, 2016 at 9:07

Atul Sharma · Accepted Answer · 2016-10-12 09:10:18Z

1

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>

answered Oct 12, 2016 at 9:10

Atul Sharma

11k10 gold badges42 silver badges69 bronze badges

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

1 Comment

rogodeter Over a year ago

This worked for me. Thank you. I had an ng-model in there already that was bound to "zip", which happens to be the same as the "id" property of the field. I changed it to zipcode and implemented the controller function you suggested. it does exactly what I wanted. Thank you

Ludovic Mercier · Accepted Answer · 2016-10-12 09:13:38Z

0

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.

answered Oct 12, 2016 at 9:13

Ludovic Mercier

512 bronze badges

Collectives™ on Stack Overflow

AngularJS Form Submit not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related