我需要使用angular
在next()和saveStep()上提交表单
我无法在表单
中写next()和saveStep()
我已为ng-click和next()写下saveStep()
当我从表格中提交表格时，工作正常
这是用于生成令牌的条带代码
<div class="content">
<div class="content_wrap">
<div class="content_title centered">Order an SOA</div>
<div class="card">
<div class="card_title title_custom">PAYMENT
<div>Please provide credit card details</div>
</div>
<div class="form_element table_wrap">
<table class="form_element_table center-aligned right-border">
<thead>
<th class="no-background">Order Summary</th>
<th class="no-background">Credit Card Details</th>
</thead>
<tbody>
<tr>
<td>
<div class="inner-table-element">
<div class="inner-table-cell">Advice - SMSF Establishment</div>
<div class="inner-table-cell small">$ {{smf_Fee}}</div>
</div>
<div class="inner-table-element">
<div class="inner-table-cell">Advice - Property in Super</div>
<div class="inner-table-cell small">$ {{buy_property_Fee}}</div>
</div>
<div class="inner-table-element top-border">
<div class="inner-table-cell">Total</div>
<div class="inner-table-cell small">$ {{totalFee}}</div>
</div>
</td>
<!--<td>-->
<!--<div class="inner-table-element front-space">-->
<!--<div class="inner-table-cell">Card Number</div>-->
<!--<div class="inner-table-cell align-right"><input type="text" ng-model="step6.cardNumber"/></div>-->
<!--</div>-->
<!--<div class="inner-table-element front-space">-->
<!--<div class="inner-table-cell">CVC</div>-->
<!--<div class="inner-table-cell align-right"><input type="text" ng-model="step6.cvc"/></div>-->
<!--</div>-->
<!--<div class="inner-table-element front-space">-->
<!--<div class="inner-table-cell">Expiry (MM/YY)</div>-->
<!--<div class="inner-table-cell align-right"><input type="text" ng-model="step6.expiry"/></div>-->
<!--</div>-->
<!--</td>-->
<td>
<form action="/plan/account/charge" method="POST" id="payment-form">
<div class="inner-table-element front-space">
<div class="inner-table-cell">Card Number</div>
<div class="inner-table-cell align-right">
<input class="card_number" type="text" size="20" data-stripe="number" placeholder="Card Number" />
</div>
</div>
<div class="inner-table-element front-space">
<div class="inner-table-cell">CVC</div>
<div class="inner-table-cell align-right">
<input class="cvc" type="text" size="4" data-stripe="cvc" placeholder="CVC" />
</div>
</div>
<div class="inner-table-element front-space">
<div class="inner-table-cell">Expiry</div>
<div class="inner-table-cell align-right">
<input class="payment_text exp_month expiry" type="text" size="2" data-stripe="exp-month" placeholder="MM" />
<span>/</span>
<input class="payment_text exp_year expiry" type="text" size="4" data-stripe="exp-year" placeholder="YYYY" />
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form_element nav_btn_wrap">
<div class="btn back-btn" ng-click="back();">
<span>Back</span>
</div>
<div class="btn next-btn" ng-click="saveStep();">
<span>Save</span>
</div>
<div class="btn next-btn" ng-click="next();">
<span>Next</span>
</div>
</div>
</div>
</div>
</div>
accountantApp.controller("step6Controller", function($rootScope, $scope, $http, $location) {
$scope.buy_property_Fee = $rootScope.soaFormData["step1"].buy_property_Fee;
$scope.smf_Fee = $rootScope.soaFormData["step1"].smf_Fee;
$scope.totalFee = $rootScope.soaFormData["step1"].totalFee;
$scope.step6 = {
cardNumber: "",
cvc: "",
expiry: ""
}
$scope.back = function() {
$scope.onBacKEvent();
};
$scope.saveStep = function() {
var count = 0;
$(".form_element_table input").each(function() {
if ($(this).val() == "") {
$(this).css({
"border": "1px solid red"
});
} else {
$(this).css({
"border": "1px solid #CDC5C5"
});
count++;
}
});
if (count != $(".form_element_table input").length) {
$.toast({
heading: 'Error',
text: 'Please fill the fields',
showHideTransition: 'fade',
icon: 'error'
});
return;
}
$rootScope.soaFormData["step6"] = $scope.step6;
$rootScope.stepsCompleted.push("step6");
$rootScope.saveSoa(function(data, status, headers, config) {});
};
$scope.next = function() {
var count = 0;
$(".form_element_table input").each(function() {
if ($(this).val() == "") {
$(this).css({
"border": "1px solid red"
});
} else {
$(this).css({
"border": "1px solid #CDC5C5"
});
count++;
}
});
if (count != $(".form_element_table input").length) {
$.toast({
heading: 'Error',
text: 'Please fill the fields',
showHideTransition: 'fade',
icon: 'error'
});
return;
}
$rootScope.soaFormData["step6"] = $scope.step6;
$rootScope.stepsCompleted.push("step6");
$location.path("/step7");
};
});
答案 0 :(得分：1)
参考Submit form using a button outside the <form> tag
注意这不是我的代码来自：http://jsfiddle.net/erdt761h/
看起来像这样
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
.hidden{
display: none;
}
</style>
</head>
<body>
<form method="get" action="http://www.google.com/search" target="_blank">
<input type="text" name="q" />
<input type="submit" id="submit-form" class="hidden" />
</form>
<label for="submit-form">ProxyButton</label>
</body>
<script>
</script>
</html>
在他/她的用户（截至目前）“Kumar”的另一页上给予写这篇文章的人们。 但是代码的一般概念是仍然有一个由css隐藏的提交按钮，并通过标签进行交互，您可以将其设置为按钮。在另一页上，人们还谈到了移动带有css的提交按钮使其看起来像在窗体之外。
答案 1 :(得分：0)
Core JS DOM表单对象具有submit()函数。
您可以尝试添加到next()和saveStep()功能：
document.getElementById('payment-form').submit();