Functions in Angular controller not activated on button click

Question

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.

You can show the relevant piece of code within the question. A lot of people won't bother opening external links. — Shomz
– Shomz, Commented Jan 27, 2015 at 21:52
Can you show the problem in a Plunkr? I just tried your code and it worked as you expected. — Matt Tester
– Matt Tester, Commented Jan 28, 2015 at 2:38
I put a $http.post(myUrl) in the function and I see it registering in the terminal where I'm running the server (request line etc...) which is the important part, but I just can't get anything to write to the console. — user137717
– user137717, Commented Jan 28, 2015 at 5:22

btm1 · Accepted Answer · 2015-01-27 21:48:16Z

1

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

answered Jan 27, 2015 at 21:48

btm1

3,8562 gold badges25 silver badges26 bronze badges

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

2 Comments

user137717 Over a year ago

I made the change and double checked that there are no more typos, but I still don't get anything printed to the console. I'm using firefox and I just get reflow: x ms, where x ms is some variable amount of milliseconds, but not the message I put in the console.log()

btm1 Over a year ago

try moving ng-controller off of the same element you have ng-submit on. Move it up a couple nodes.

user137717 · Accepted Answer · 2015-01-31 16:10:24Z

0

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.

answered Jan 31, 2015 at 16:10

user137717

2,2054 gold badges29 silver badges51 bronze badges

Collectives™ on Stack Overflow

Functions in Angular controller not activated on button click

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related