Schaltfläche zum Senden von eckigen Formularen wird nur beim zweiten Klick ausgelöst

Question

Ich baue eine kleine Webseite, die einige Anfragen an eine API stellt. Die Abfrage findet statt, wenn die Schaltfläche zum Senden gedrückt wird, wenn alle eingegebenen Daten gültig sind. Aber irgendwann, als ich das Formular aus einer Reihe separater Elemente (Textbox, Auswahlbox, Schaltfläche) anpasste, musste ich einmal auf "Suchen" klicken und dann erneut drücken, um die Funktion auszulösen.

Was ist los/wie behebe ich das?

HTML:

<div id="search" class="centerWrapper"> 
    <div id="searchArea" class="searchArea"> 
     <input type="text" class="inputBox" name="charName" ng-model="charName" placeholder="Character Name"></input> 
     <select class="selectBox" ng-model="selectedRealm" name="selectedRealm" ng-options="realm.name for realm in realmList"> 
      <option value="" class="realmPlaceholder" disabled selected>Select Realm Name</option> 
     </select> 
     <button type="button" ng-click="buttonpress(charName, selectedRealm)" class="searchButton">Search</button> 
    </div> 
</div> 

Controller-Code:

$scope.buttonpress = function(charName, realmName){ 
    if(typeof charName === "undefined" || charName.includes("world") || typeof realmName === "undefined"){ 
     alert("Please enter a valid Character Name and Realm.") 
    } else { 
     var request = {name: charName, realm: realmName}; 
     $http.post('/buttonpress', request) 
     .then(function(response) { 
      alert(response.data); 
     }); 
    } 
} 

CSS:

input.searchButton { 
    text-align: center; 
    width: 79%; 
    background-color: #128880; 
    color:#ACC8C9; 
    border: none; 
    margin-top: 5px; 
    height: 22%; 
} 

input.searchButton:hover { 
    background-color: rgb(1, 92, 196) 
} 

input.searchButton:active { 
    background-color: #134b58; 
    box-shadow: 0 5px rgb(102, 102, 102); 
    transform: translateY(4px); 
} 

HINWEIS: Ich habe bemerkt, dies auch nur die Seite und erfrischend beim Start.

Answer 1

Whoops. Aus diesem Grund ist es eine schlechte Idee, bis 4:30 Uhr zu programmieren. Einige dumme Fehler werden passieren:

$scope.buttonpress = function() { 
    $scope.buttonpress = function(){ 
     if(typeof $scope.charName === "undefined" || $scope.charName.includes(";") || typeof $scope.selectedRealm === "undefined"){ 
      alert("Please enter a valid Character Name and Realm.") 
     } else { 
      var request = {name: $scope.charName, realm: $scope.selectedRealm}; 
      $http.post('/buttonpress', request) 
      .then(function(response) { 
       // alert(response.data); 
       debugger; 
       $scope.showBoard = true; 
      }); 
     } 
    } 
}; 

Antwort auf das Geheimnis: irgendwie habe ich Button in einem anderen Button .. hoppla.