我想从多个文本输入中获取输入并将其发送到我的数据库，但是只有最后一个输入发送
[英]I want to take input from multiple text inputs and send them to my database, but only the last input sends
问题描述
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. 
我有一个要查询的mysql数据库/节点后端，已连接到Angular前端，特别是从3个简单文本输入中以表格形式发送数据。
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. 但是，当我尝试从所有三个输入中检测并发送数据时，它仅从脚本中具有匹配控制器功能（这三个中的最后一个）的输入中发送数据。
Here is my html file and the script 这是我的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>
2 个解决方案
解决方案1
0 2017-12-08 06:52:20
You have a $watch for each input, and you have a submit() for each input. 每个输入都有一个$watch ，每个输入都有一个submit() 。 This is why you send only the input that changed. 这就是为什么您只发送更改的输入的原因。 If you want to send them all together you should hold one submit() , means one onClick() that will check all new values are not null and send them to the server, something like this: 如果要一起发送它们，则应持有一个submit() ，这意味着一个将检查所有新值不为null的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;
});
};
}
});
and the html: 和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>
Of course getSuggestion() will change as well: 当然， 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."
});
});
}
}
解决方案2
0 2017-12-08 07:03:34
If I understand your question correctly, you want to watch for changes of values in all three input fields. 如果我正确理解了您的问题，则需要监视所有三个输入字段中值的变化。 If user types anything in any one of the three input fields, you want to send the values from all three input fields to your backend. 如果用户在三个输入字段中的任何一个中键入任何内容，则要将所有三个输入字段中的值发送到后端。 And when user hits "Submit", you want to get values from all three input fields as well. 当用户点击“提交”时，您也希望从所有三个输入字段中获取值。
To solve this problem, you need two pieces: 要解决此问题，您需要两件：
set up a persistent click event handler on the button, as opposed to adding one only when some change happens.
在按钮上设置一个持久的单击事件处理程序，而不是仅在发生某些更改时才添加一个。 Note that in your code, you are updating this click handler each time one of the three input fields changes. 请注意，在您的代码中，每当三个输入字段之一发生更改时，您都将更新此单击处理程序。 This would cause the new input handler to overwrite the old one. 这将导致新的输入处理程序覆盖旧的输入处理程序。 That's why you only get the last touched value. 这就是为什么您只获得最后触动的价值。 I would recommend looking into the ng-click directive. 我建议您查看ng-click指令。 get inputs from all three form fields when any one of them is changed.
当其中三个表单字段中的任何一个更改时，均可从所有三个表单字段获取输入。 This can be achieved through the ng-change directive. 这可以通过ng-change指令来实现。 Or alternatively, you can put all three ngModels under one parent object and just $watch()that one parent object, as Hatzav Wolff suggests in his answer.或者，您也可以将所有三个ngModels放在一个父对象下，而将$watch()放在一个父对象下，就像Hatzav Wolff在他的回答中所建议的那样。
Here is how I would approach it: 这是我的处理方法：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.