只需一个按钮即可在页面上提交两个表单
Submitting two forms on page with only one button
我正在构建一个示例webshop应用程序来学习angularjs。在实际的学习步骤中，我正在实现带有发货地址和账单地址表单的视图。视图上有两种形式。一个用于发货地址，一个用于账单地址。按照标准，账单地址与发货地址相同。只有当用户点击"更改账单地址"按钮时，他才可以选择另一个账单地址。我有两个问题：
1） 当我在表单"orderAddressForm"中输入发货地址，然后单击"更改账单地址"时，第二个表单"orderBillingAddressForm"将正确显示。但是，当我在这里输入内容时，第一个表单"orderAddressForm"的输入也会发生变化。为什么会发生这种情况？两种形式都绑定到不同的变量？？？
2） 当我点击"提交"按钮时，就不会进行验证。我希望每个看到的表格在我点击这个"提交"按钮后都能得到验证。
这是plunkr链接：plunkr link
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css"
/>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x"
src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9">
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="row">
<div class="col-md-12">
<h3 class="form-group">
<label>Shipping address</label>
</h3>
</div>
</div>
<form name="orderAddressForm" ng-submit="submit()">
<div class="row form-group">
<div class="col-md-4">
<label>Salutation</label>
</div>
<div class="col-md-8">
<select name="salutation" ng-
model="shippingAddress.salutation" required="" class="form-
control">
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<span ng-show="(orderAddressForm.salutation.$dirty &&
submitted) && orderAddressForm.salutation.$error.required">
</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Firstname</label>
</div>
<div class="col-md-8">
<input type="text" name="prename" ng-
model="shippingAddress.prename" required="" class="form-
control" />
<span ng-show="(orderAddressForm.prename.$dirty && submitted)
&& orderAddressForm.prename.$error.required"></span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Lastname</label>
</div>
<div class="col-md-8">
<input type="text" name="surname" ng-
model="shippingAddress.surname" required="" class="form-
control" />
<span ng-show="(orderAddressForm.surname.$dirty && submitted)
&& orderAddressForm.surname.$error.required"></span>
</div>
</div>
</form>
</div>
</div>
<div class="container">
<div class="row">
<h3 class="form-group">
<label>Billing address</label>
<button ng-click="setBillingAddress()" ng-
show="changeBillingAddress === false" class="btn btn-default
pull-right">Change billingaddress</button>
<button ng-click="cancelBillingAddress()" ng-
show="changeBillingAddress === true" class="btn btn-danger
pull-right">Cancel</button>
</h3>
</div>
<div ng-show="changeBillingAddress === false" class="row">
<div class="col-md-offset-1">Identisch mit Lieferadresse</div>
</div>
<div ng-show="changeBillingAddress === true" class="row">
<div style="margin-top: 5px">
<form name="orderBillingAddressForm" ng-submit="submit()">
<div class="row">
<div ng-class="{ 'has-error' : billingSubmitted &&
orderBillingAddressForm.salutation.$invalid}" class="form-
group">
<div class="col-md-4">
<label>Salutation</label>
</div>
<div class="col-md-8">
<select name="salutation" ng-
model="billingAddress.salutation" required=""
class="form-control">
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<p ng-show="orderBillingAddressForm.salutation.$invalid &&
!orderBillingAddressForm.salutation.$pristine &&
billingSubmitted" class="help-block">Pflichtfeld</p>
</div>
</div>
</div>
<div class="row">
<div ng-class="{ 'has-error' : billingSubmitted &&
orderBillingAddressForm.prename.$invalid}" class="form-
group">
<div class="col-md-4">
<label>Firstname</label>
</div>
<div class="col-md-8">
<input type="text" name="prename" ng-
model="billingAddress.prename" required="" class="form-
control" />
<p ng-show="orderBillingAddressForm.prename.$invalid &&
!orderBillingAddressForm.prename.$pristine &&
billingSubmitted" class="help-block">Pflichtfeld .row</p>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label>Lastname</label>
</div>
<div class="col-md-8">
<input type="text" name="surname" ng-
model="billingAddress.surname" required="" class="form-
control" />
<span ng-show="(orderBillingAddressForm.surname.$dirty &&
submitted) &&
orderBillingAddressForm.surname.$error.required"></span>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div style="padding-top: 1em">
<button type="submit" class="btn btn-default pull-
right">Submit</button>
</div>
</div>
</div>
</div>
</body>
</html>
控制器.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.billingAdrEqualsShippingAdr = false;
$scope.confirmBillingEqualsShipping = true;
$scope.changeBillingAddress = false;
$scope.shippingAddress = {};
$scope.setBillingAddress = function (){
$scope.changeBillingAddress = true;
$scope.billingAddress = $scope.shippingAddress;
};
$scope.cancelBillingAddress = function (){
$scope.changeBillingAddress = false;
$scope.billingAddress = $scope.shippingAddress;
};
$scope.openCompanyModal = function (company){
$scope.billingAddress = company;
$scope.shippingAddress = company;
};
$scope.submit = function (){
console.log("Form submitted");
}
});
我希望你能帮助我。
提前感谢
YB
您可以使用"ng form"来组织表单，只需在末尾添加一个按钮，该按钮将调用您使用的"submit（）"函数。
<div ng-form="form1">
form1 fields
</div>
<div ng-form="form2">
form2 fields
</div>
<button ng-click="submit()"></button>
<form id='form1'>
....something
</form>
<form id='form2'>
.... something
</form>
<div id='btnDiv'>
<button id='btn1' ng-click="Submit-Forms">
</div>
//in JS
On click of #btn1, invoke/execute the functions (directly) of the two forms
因为您在这里将shippingAddress分配给BillingAddress，所以不应该这样做。
$scope.setBillingAddress = function (){
$scope.changeBillingAddress = true;
//$scope.billingAddress = $scope.shippingAddress;
};
你可以做一些类似的事情
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.billingAdrEqualsShippingAdr = false;
$scope.confirmBillingEqualsShipping = true;
$scope.changeBillingAddress = false;
$scope.shippingAddress = {};
$scope.billingAddress = {};
$scope.setBillingAddress = function (){
$scope.changeBillingAddress = true;
$scope.billingAddress = {
salutation: $scope.shippingAddress.salution,
prename: $scope.shippingAddress.prename,
surname: $scope.shippingAddress.surname
};
};
$scope.cancelBillingAddress = function (){
$scope.changeBillingAddress = false;
//$scope.billingAddress = $scope.shippingAddress;
};
$scope.openCompanyModal = function (company){
$scope.billingAddress = company;
$scope.shippingAddress = company;
};
$scope.submit = function (){
if (!$scope.changeBillingAddress) {
// setting shipping and billing address same should be here
$scope.billingAddress = $scope.shippingAddress;
}
console.log($scope.shippingAddress);
console.log($scope.billingAddress);
console.log("Form submitted");
}
});
相关文章：
- Jquery提交表单而不刷新
- 如何在提交表单时将PHP变量传递到Javascript cookie中
- 每次提交表单时都会重新加载网页
- Razor中的自动提交表单
- 使用 JavaScript 自动提交表单
- 点击相同的按钮打开模型，然后提交表单
- 添加和删除隐藏字段数组中的值，而不提交表单
- 使用Ajax提交表单
- jQuery:使用“jQuery验证”后无法提交表单's远程验证
- 如何在不重新加载的情况下提交表单，并使用Node+Express将数据传递回同一页面
- 有登录表单时无法提交表单
- 带有select的jquery提交表单不起作用
- 如何防止回车键提交表单，但仍然允许回车工作
- 使用按钮和单选按钮提交表单，但始终使用相同的值
- 在提交表单之前确定重复值
- 如何创建动态ajax提交表单
- HTML提交表单，同时包含空字段检查和按钮隐藏
- 如何使用jQueryAjax使用动态html输入texbox提交表单
- 当触发下拉列表的onchange事件时，使用JavaScript提交表单
- 提交表单后，Watir文本框输入未持续(重置为以前的文本框输入）
