js form submit не работает

Question

Я пытаюсь отправить форму, но значения всегда пусты.

мой HTML:

 <form novalidate name="creditCardForm" id="creditCardForm" method="POST"> 
      <input type="hidden" name="EPS_MERCHANT" value="{{credit.data.merchantId}}"> 
      <input type="hidden" name="EPS_TIMESTAMP" value="{{credit.data.currentGMTTimestamp}}"> 
      <input type="hidden" name="EPS_TYPE" value="{{credit.data.epsType}}"> 

      <div class="text-center"> 
       <button class="btn btn-primary" ng-click="credit.save()">Save</button> 
      </div> 
     </form> 

и мой JS часть:

function save(){ 
    document.getElementById("creditCardForm").setAttribute("action", this.data.crnUrl) 
    document.forms["creditCardForm"].submit() 
} 

и от осмотра, эти поля все имеют значения

но из запроса, эти поля пустые:

---

обновления моего вопрос: потому, что это особая форма пост, который он будет вызывать NAB банк апи, чтобы проверить что-то, так что я не могу поставить каждое поле в объект и сделать Ajax/$ ресурса/$ http call. спасибо

Answer 1

Это не угловой способ отправки формы через атрибут действия. Используйте атрибут формы ng-submit и сделайте запрос $http.post async.

<form novalidate name="creditCardForm" id="creditCardForm" 
      ng-submit="saveCredit(creditCardForm)"> 

     <!-- no input hidden --> 

     <div class="text-center"> 
      <button class="btn btn-primary">Save</button> 
     </div> 
    </form> 

И вам не нужны скрытые входы таким образом.

Answer 2

Если у меня есть ваш вопрос и ваше требование правильно. Вы должны использовать следующим образом:

<form novalidate name="creditCardForm" id="creditCardForm" method="POST"> 
      <input type="hidden" name="EPS_MERCHANT" ng-model="credit.data.merchantId"> 
      <input type="hidden" name="EPS_TIMESTAMP" ng-model="credit.data.currentGMTTimestamp"> 
      <input type="hidden" name="EPS_TYPE" ng-model="credit.data.epsType"> 

      <div class="text-center"> 
       <button class="btn btn-primary" ng-click="credit.save(credit.data)">Save</button> 
      </div> 
     </form> 

Это предполагает, что credit является псевдонимом для вашего контроллера.

Я попытался сохранить ваши пути ng-click, чтобы вызвать метод на контроллере. Однако с формами в угловом, вы можете сделать то же самое с помощью директивы ng-submit.

В контроллере вы будете иметь что-то вроде:

$scope.save = function(data){ 

    //use data here as you like 
    //data.merchantId and other fields 
} 

If you are using alias form, then use: 
//vm or any other name you have for your `this` instance 
vm.save = function(){ 

    // use data here as you like 
} 

Answer 3

Я хочу, чтобы попытаться решить вашу проблему. Первое, что вам нужно сделать, это добавить ng-model и ng-value в вашу форму. Например:

вид:

<form novalidate name="creditCardForm" id="creditCardForm" ng-submit="save()"> 
    <input type="hidden" ng-model="credit_card.eps_merchant" name="eps_timestamp" ng-value="{{credit.data.merchantId}}"> 
    <input type="hidden" ng-model="credit_card.eps_timestamp" name="eps_timestamp" ng-value="{{credit.data.currentGMTTimestamp}}"> 
    <input type="hidden" ng-model="credit_card.eps_type" name="eps_type" ng-value="{{credit.data.epsType}}"> 

    <div class="text-center"> 
     <button type="submit" class="btn btn-primary">Save</button> 
    </div> 
</form> 

Для следующего вы можете создать контроллер. Например: угловой контроллер:

angular.module('cartApp') 
.controller('AddCreditCartCtrl', [ 
'$scope', 
'$location', 
'$http', 
function($scope, $location, $http) { 
    $scope.credit_card = {}; 
    $scope.credit.data = { 
     merchantId: 'your-merchant-id', 
     currentGMTTimestamp: 'your-currentGMTTimestamp', 
     epsType: 'your-epsType' 
    } 

    $scope.save = function() { 
     $http.post('/yourUrl', {credit_card: $scope.credit_card}).then(function(res){ 
      // Successfully create data 
     }, 
     function(response) { 
      // Failed to create data 
     }); 
    } 
}]); 

Я надеюсь, что это может помочь вам. :)

Answer 4

благодарит каждое тело выше.просто хочу поделиться первопричиной

У меня есть директива под названием <credit-card></credit-card>, и внутри этой директивы, я имею форму, как с именем и идентификатором быть creditCardForm, поэтому, когда эта директива используется в нескольких местах, а в контроллер я использую document.forms["creditCardForm"], JS не знаю, что целевая форма, и это приводит пустые значения в запросе

надеюсь, что это может помочь кому-то с той же проблемой