title: I want to take input from multiple text inputs and send them to my database, but only the last input sends
body: <p>I have a mysql database/node backend, connected to an Angular frontend, that I am querying, specifically to send it the data from 3 simple text inputs in a form.</p>
  
  <p>I believe my error is quite trivial for anyone with node/angular experience because I can successfully send my database input from one of the text inputs; however, when I try to detect and send data from all three inputs, it only sends the data from whichever input has its matching controller function as the last one (of the three) in my script. </p>
  
  <p>Here is my html file and the script</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var button = document.getElementById("clickButton");
  
  const app = angular.module('app',[]);
  
  app.service('appService', ['$http', function($http){
   return {
    'getSuggestion' : function(suggestion,callback){
     $http.post('/getSuggestion', {
      'suggestion': suggestion
     }).success(function (response) {
      callback(response);
     })
     .error(function (data, status, header, config) {
      callback({
       'error': true,
       'message': "Something went wrong."
      });
     });
    }
   }
  }]);
  
  app.controller('app', function($scope,appService) {
   //message send Function
   $scope.$watch('messageInput', function (newValue, oldValue) {
    //null check
    if (newValue !== null) {
     //wait for the button to be pressed
     button.onclick = function() {
      alert("USERNAME");
      //call server query function
      appService.getSuggestion(newValue, function (response) {
       $scope.suggestionCollection = response.rows;
      });
     };
    }
   });
  
   $scope.$watch('messageInput2', function (newValue, oldValue) {
    //null check
    if (newValue !== null) {
     //wait for the button to be pressed
     button.onclick = function() {
      alert("PASSWORD");
      //call server query function
      appService.getSuggestion(newValue, function (response) {
       $scope.suggestionCollection = response.rows;
      });
     };
    }
   });
  
   $scope.$watch('messageInput3', function (newValue, oldValue) {
    //null check
    if (newValue !== null) {
     //wait for the button to be pressed
     button.onclick = function() {
      alert("PASSWORD");
      //call server query function
      appService.getSuggestion(newValue, function (response) {
       $scope.suggestionCollection = response.rows;
      });
     };
    }
   });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html ng-app="app" ng-controller="app"&gt;
  
    &lt;head&gt;
      &lt;title&gt;Node app&lt;/title&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    
    &lt;body&gt;
    
      &lt;div class="formFields"&gt;
      
        &lt;form class="defaultForm" id="loginForm"&gt;
        
          &lt;input class="loginField" type="text" name="username" ng-model="messageInput" placeholder="username"&gt; &lt;br&gt;
          
          &lt;input class="loginField" type="text" name="password" ng-model="messageInput2" placeholder="password"&gt; &lt;br&gt;
          
          &lt;input class="loginField" type="text" name="username" ng-model="messageInput3" placeholder="pass conf"&gt; &lt;br&gt;
          
          &lt;button id="clickButton" class="submitButton"&gt;submit&lt;/button&gt;
          
        &lt;/form&gt;
        
      &lt;/div&gt;
      &lt;!--&lt;script src="Scripts/login.js"&gt;&lt;/script&gt;--&gt;
    &lt;script src="js/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/script.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>