CODEWITHSUNDEEP
javascriptangularjs
user137717
user137717

Reputation: 2165

Functions in Angular controller not activated on button click

I am trying to make a contact me from with Angular. Right now, I have some input fields, a button, and an angular app as a script in the page to try and make things as simple as possible. I was trying to make sure things are talking to each other so I just put a console.log in my angular controller which I think should print to the console when I click the button. However, it just reloads the page every time.

Below is the code that is showing this issue

HTML:

  <body ng-app="contactApp">

    <div class="container">
      <div class="row">
        <div class="col-sm-8 blog-main">

        <!-- Input Fields for contact form -->
          <form ng-controller="ContactCtrl" class="form-horizontal" role="form" ng-submit="submit(name, email, message)">
            <div class="form-group">
              <label class="col-sm-2 control-label">Name</label>
                <div class="col-sm-4">
                  <input class="form-control" type="text" placeholder="Name" ng-model="info.name">
                </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label">Email</label>
                <div class="col-sm-4">
                  <input class="form-control" type="email" placeholder="Email" ng-model="info.email">
                </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label">Message</label>
                <div class="col-sm-4">
                  <input class="form-control" type="text" placeholder="Place Message Here" ng-model="info.text">
                </div>
            </div>

            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button class="btn btn-success" type="submit">Contact Me</button>
              </div>
            </div>
          </form>
        </div><!-- /.blog-main -->
      </div><!-- /.row -->
    </div><!-- /.container -->

JS:

var contactApp = angular.module('contactApp', [])
.controller('ContactCtrl', function ($scope, $http){
  $scope.submit = function (name, email, message){
    console.log('contact with controller')
    }
  })

Most code is just creating the HTML form, see angular app at the bottom.

Upvotes: 0

Views: 112

Answers (2)

user137717
user137717

Reputation: 2165

I was using Firefox as my browser and I was looking for the output in their developer console. It was appearing in the firebug console. I still don't know why it doesn't appear in the regular console, but I will check firebug as well in the future. I accepted btm1's answer because he pointed out my typo and that made everything work when I started up firebug.

Upvotes: 0

btm1
btm1

Reputation: 3856

ooo so close ;) you've got a little typo in there ng-controller="contactCtrl" != .controller('ContactCtrl') check out your first letter.

Upvotes: 1

Related Questions