我想从多个文本input采取input，并将其发送到我的数据库，但只有最后一个input发送
我有一个mysql数据库/节点后端，连接到一个Angular前端，我正在查询，特别是从3个简单的文本input的forms发送数据。
我相信我的错误对于任何有节点/angular度经验的人来说都是微不足道的，因为我可以成功地从一个文本input发送数据库input; 然而，当我尝试检测和发送来自所有三个input的数据时，它只发送来自哪个input具有其匹配的控制器function的数据作为我的脚本中的最后一个（三个）。
这是我的HTML文件和脚本
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; }); }; } }); }); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!DOCTYPE html> <html ng-app="app" ng-controller="app"> <head> <title>Node app</title> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="formFields"> <form class="defaultForm" id="loginForm"> <input class="loginField" type="text" name="username" ng-model="messageInput" placeholder="username"> <br> <input class="loginField" type="text" name="password" ng-model="messageInput2" placeholder="password"> <br> <input class="loginField" type="text" name="username" ng-model="messageInput3" placeholder="pass conf"> <br> <button id="clickButton" class="submitButton">submit</button> </form> </div> <!--<script src="Scripts/login.js"></script>--> <script src="js/angular.min.js"></script> <script src="js/script.js"></script> </body> </html>
每个input都有一个$watch ，每个input都有一个submit() 。 这就是为什么你只发送改变的input。 如果你想把它们一起发送，你应该保存一个submit() ，意思是一个onClick()将检查所有新的值不为空，并将它们发送到服务器，如下所示：
$scope.$watch('allInput', function (newValues, oldValues) { //null check if (newValues.user !== null && newValues.pass !== null && newValues.pass2 !== null) { //wait for the button to be pressed button.onclick = function() { alert("USERNAME"); alert("PASSWORD"); alert("PASSWORD CONF"); //call server query function appService.getSuggestion(newValues, function (response) { $scope.suggestionCollection = response.rows; }); }; } });
和html：
<form class="defaultForm" id="loginForm"> <input class="loginField" type="text" name="username" ng-model="allInput.name" placeholder="username"> <br> <input class="loginField" type="text" name="password" ng-model="allInput.pass" placeholder="password"> <br> <input class="loginField" type="text" name="username" ng-model="allInput.pass2" placeholder="pass conf"> <br> <button id="clickButton" class="submitButton">submit</button> </form>
当然getSuggestion()也会改变：
app.service('appService', ['$http', function($http){ return { 'getSuggestion' : function(data,callback){ $http.post('/getSuggestion', { 'name': data.name, 'pass': data.pass, 'pass2': data.pass2 }).success(function (response) { callback(response); }) .error(function (data, status, header, config) { callback({ 'error': true, 'message': "Something went wrong." }); }); } }
如果我正确理解你的问题，你想要看所有三个input字段的值的变化。 如果用户在三个input字段中的任何一个字段中键入任何内容，则需要将所有三个input字段的值发送到后端。 当用户点击“提交”时，你也想从三个input字段中获取值。
要解决这个问题，你需要两件事：
-
在button上设置持久性点击事件处理程序，而不是在发生某些更改时才添加一个。 请注意，在您的代码中，每当三个input字段中的一个发生更改时，都会更新此点击处理程序。 这会导致新的input处理程序覆盖旧的input处理程序。 这就是为什么你只能得到最后一次触摸的价值。 我会build议看看ng-click指令。
-
当他们中的任何一个被改变时从所有三个表单字段获得input。 这可以通过ng-change指令来实现。 或者，也可以将所有三个ngModel放在一个父对象的下面，然后把
$watch()作为一个父对象，正如Hatzav Wolff在他的回答中所build议的那样。
以下是我将如何处理它：
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) { $scope.handleChange= function() { /* Do whatever you want with the input. They are all here */ console.log($scope.messageInput + ' ' + $scope.messageInput2 + ' ' + $scope.messageInput3); } $scope.handleSubmit= function() { /* Do whatever you want with the input. They are all here */ console.log($scope.messageInput + ' ' + $scope.messageInput2 + ' ' + $scope.messageInput3); } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!DOCTYPE html> <html ng-app="app" ng-controller="app"> <head> <title>Node app</title> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="formFields"> <form class="defaultForm" id="loginForm"> <input class="loginField" type="text" name="username" ng-model="messageInput" ng-change="handleChange()" placeholder="username"> <br> <input class="loginField" type="text" name="password" ng-model="messageInput2"ng-change="handleChange()" placeholder="password"> <br> <input class="loginField" type="text" name="username" ng-model="messageInput3" ng-change="handleChange()" placeholder="pass conf"> <br> <button id="clickButton" ng-click="handleSubmit()" class="submitButton">submit</button> </form> </div> <!--<script src="Scripts/login.js"></script>--> <script src="js/angular.min.js"></script> <script src="js/script.js"></script> </body> </html>