Javascript Angularjs验证为真后,进行正常表单提交
我正在一个现有的web应用程序上实现AngularJS,它需要一个通用的HTTP POST,就像没有AngularJS时一样 有没有人有办法做到这一点? 我尝试过设置action=“#”和action=“”,然后只设置action,然后执行一些jquery来注入这样的操作。但什么都不管用Javascript Angularjs验证为真后,进行正常表单提交,javascript,html,angularjs,forms,Javascript,Html,Angularjs,Forms,我正在一个现有的web应用程序上实现AngularJS,它需要一个通用的HTTP POST,就像没有AngularJS时一样 有没有人有办法做到这一点? 我尝试过设置action=“#”和action=“”,然后只设置action,然后执行一些jquery来注入这样的操作。但什么都不管用 <script type="text/javascript"> $("form").get(0).setAttribute( "action", "test.html" ); </sc
<script type="text/javascript">
$("form").get(0).setAttribute( "action", "test.html" );
</script>
$(“form”).get(0.setAttribute(“action”、“test.html”);
这是我的表格和代码
//我的表格
<form name="userForm" ng-submit="submitForm(userForm.$valid)" xt-form novalidate>
<div class="form-group">
<div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn.$invalid && !userForm.fornavn.$pristine }">
<label class="control-label" for="textinput">Fornavn <span class="star-color">*</span></label>
<input autocomplete="off" type="text" value="<?php echo set_value('fornavn'); ?>" name="fornavn" ng-model="userFormData.fornavn" class="form-control" xt-validate msg-required="Du skal udfylde dit Fornavn" required>
</div>
<div class="col-sm-6" ng-class="{ 'has-error' : userForm.efternavn.$invalid && !userForm.efternavn.$pristine }">
<label class=" control-label" for="textinput">Efternavn <span class="star-color">*</span></label>
<input autocomplete="off" type="text" value="<?php echo set_value('efternavn'); ?>" name="efternavn" ng-model="userFormData.efternavn" class="form-control" xt-validate msg-required="Du skal udfylde dit Efternavn" required>
</div>
</div>
<button id="membership-box__payBtn" type="submit" ng-model="userFormData.betaling" name="betaling" class="btn btn-success text-uppercase">Gå til betaling</button>
</form>
//CODEIGNITER CONTROLLER
if (isset($_POST['betaling'])) {
$data['tilBetaling'] = array(
'oprettelse' => $this->input->post('oprettelse'),
// 'medlemskab' => $this->input->post('medlemskab'),
'tilBetaling' => str_replace(',', '.', $this->input->post('tilBetaling')),
'pr_maaned' => $this->input->post('pr_maaned'),
'start_date' => $this->input->post('start_date'),
'til_dato' => $this->input->post('til_dato'),
'pakke' => $this->input->post('pakke'),
'type' => $this->input->post('medlemskabTypeFinal'),
'getCenter' => $this->input->post('getCenter'),
'medlemskabPakkePID'=> $this->input->post('medlemskabPakkePID'),
'ekstraInput' => $this->input->post('ekstraInput'),
'periode_price' => $this->input->post('periode_price'),
'kampagneTag' => $this->input->post('kampagneTag'),
// 'header' => $this->input->post('header'),
);
//Gem array til session
$_SESSION['betaling'] = $data['tilBetaling'];
}
福纳文*
如果要进行正常提交,可以在控制器中处理以下操作:
HTML
<div ng-controller="ctrl">
<form name="userForm" action="user/add" method="post">
Name: <input name="name" ng-model="user.name" />
...
<button ng-click="onSubmit(userForm)">Submit</button>
</form>
</div>
<div ng-controller="ctrl">
<form name="userForm" ng-submit="onSubmit(user)">
Name: <input name="name" ng-model="user.name" />
...
<button type="submit">Submit</button>
</form>
</div>
另一种解决办法
作为替代,考虑杠杆服务,并在AngularJS成功发布后重定向。
HTML
<div ng-controller="ctrl">
<form name="userForm" action="user/add" method="post">
Name: <input name="name" ng-model="user.name" />
...
<button ng-click="onSubmit(userForm)">Submit</button>
</form>
</div>
<div ng-controller="ctrl">
<form name="userForm" ng-submit="onSubmit(user)">
Name: <input name="name" ng-model="user.name" />
...
<button type="submit">Submit</button>
</form>
</div>
要仅在角度验证通过或通过后才提交角度Js表单,必须在ng submit
中使用reviewForm.$valid
标记chack
使用此标志检查,在通过所有验证之前,不会提交表单
<form name="reviewForm" ng-controller="reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
....
....
</form>
....
....
即使您执行AngularJs提交,请求也不会进入服务器。控件仍然保留在客户端。然后您可以通过$http
服务发布数据/表单等。您可以在控制器中注入$http服务。作为
app.controller('reviewCtrl', ['$http', function($http){
$scope.addReview = function(product){
//use $http service here
// Simple POST request example (passing data) :
$http.post(' / someUrl ', {msg:' hello word!'}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
}
}]);
注意:在运行代码之前,请检查语法。我认为您没有抓住使用Angular的要点。它用于构建异步web应用程序,您可以在其中调用某些后端服务获取数据。所有的“重新加载”都应该由angular自己来处理,而不是“物理地”重新加载页面。我知道,但正如我所写的“我正在一个现有的web应用程序上实现AngularJS,它需要一个通用的HTTP POST,就像没有AngularJS时一样。”我知道你写了什么,但如果你试图这样做,你会遇到很多麻烦“用叉子喝汤”。只是一个友好的警告:)嗯,JS部分似乎不起作用,我在e[0]上遇到错误。提交();尝试替换为angular.element(e)。提交()
对不起,应该是“getElementsByName”-输入错误,但我没有收到“正常”形式的HTTP表单提交,这就是问题所在:(我只需要得到一个正常的HTTP post表单提交,而不是angularjs表单ajax提交这是一个非常误导的正确答案,因为这肯定不是一个正确的答案。这段代码是关于一个有角度的XHR post请求,而不是一个正常的表单提交。