我想從多個文本輸入中獲取輸入並將其發送到我的數據庫，但是只有最后一個輸入發送

Question

我有一個要查詢的mysql數據庫/節點后端，已連接到Angular前端，特別是從3個簡單文本輸入中以表格形式發送數據。

我相信對於具有節點/角度經驗的任何人來說，我的錯誤都是微不足道的，因為我可以從文本輸入之一成功地發送數據庫輸入。 但是，當我嘗試從所有三個輸入中檢測並發送數據時，它僅從腳本中具有匹配控制器功能（這三個中的最后一個）的輸入中發送數據。

這是我的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>

Answer 1

每個輸入都有一個$watch ，每個輸入都有一個submit() 。 這就是為什么您只發送更改的輸入的原因。 如果要一起發送它們，則應持有一個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;
            });
        };
    }
});

和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."
            });
        });
    }
}

Answer 2

如果我正確理解了您的問題，則需要監視所有三個輸入字段中值的變化。 如果用戶在三個輸入字段中的任何一個中鍵入任何內容，則要將所有三個輸入字段中的值發送到后端。 當用戶點擊“提交”時，您也希望從所有三個輸入字段中獲取值。

要解決此問題，您需要兩件：

在按鈕上設置一個持久的單擊事件處理程序，而不是僅在發生某些更改時才添加一個。 請注意，在您的代碼中，每當三個輸入字段之一發生更改時，您都將更新此單擊處理程序。 這將導致新的輸入處理程序覆蓋舊的輸入處理程序。 這就是為什么您只獲得最后觸動的價值。 我建議您查看ng-click指令。
當其中三個表單字段中的任何一個更改時，均可從所有三個表單字段獲取輸入。 這可以通過ng-change指令來實現。 或者，您也可以將所有三個ngModels放在一個父對象下，而將$watch()放在一個父對象下，就像Hatzav Wolff在他的回答中所建議的那樣。

這是我的處理方法：

 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>

我想從多個文本輸入中獲取輸入並將其發送到我的數據庫，但是只有最后一個輸入發送

問題描述

2 個解決方案

解決方案1
0 2017-12-08 06:52:20

解決方案2
0 2017-12-08 07:03:34

我想從多個文本輸入中獲取輸入並將其發送到我的數據庫，但是只有最后一個輸入發送

問題描述

2 個解決方案

解決方案1 0 2017-12-08 06:52:20

解決方案2 0 2017-12-08 07:03:34

解決方案1
0 2017-12-08 06:52:20

解決方案2
0 2017-12-08 07:03:34