javascript - Angular form POST goes to wrong action URL -
a rails newbie, have problems submitting form using angular js. while have specified /contact in url field $http post request goes root.
in rails routes.rb have
rails.application.routes.draw 'home/index' post 'home/contact' => "home#contact" root 'home#index' end the controller pretty basic
class homecontroller < applicationcontroller def index end def contact @captcha = params[:g-recpatcha-response] @contact = contactrequest.new(params[...]) .... end end update
angularjs included through angular-rails gem, , filed included using require attribute in application.js
//= require jquery //= require jquery_ujs //= require turbolinks //= require bootstrap-sprockets //= require jquery.easing.1.3.min //= require jquery.sticky //= require jquery.stellar.min //= require wow.min //= require custom //= require contact_me.js //= require jqbootstrapvalidation.js //= require angular //= require_tree ./angular //= require main.js the html snippet application.html.erb follows
<!doctype html> <html> <head> <title>etheron</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'https://www.google.com/recaptcha/api.js', :async => "", :defer => "" %> <%= csrf_meta_tags %> </head> <body> <%= render "layouts/header" %> <%= yield %> <%= render "layouts/footer" %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= debug(params) if rails.env.development? %> </body> </html> and form included in index.html.erb
<div ng-app="etheron" class="form-contact"> <div class="required"> <p>( <span>*</span> fields required )</p> </div> <form ng-controller="formcontroller" ng-submit="contactrequest()" name="sentmessage" id="contactform" novalidate> <div class="row"> <div class="col-md-6"> <div class="row control-group"> <div class="form-group col-xs-12 controls" ng-class="{ 'has-error' : formdata.name.$invalid && !formdata.name.$pristine }"> <label>name<span>*</span></label> <input type="text" class="form-control" placeholder="name" id="name" required ng-model="formdata.name"> <!-- <p ng-show="userform.name.$invalid && !userform.name.$pristine" class="help-block">you name required.</p> --> </div> </div> </div> <div class="col-md-6"> <div class="row control-group"> <div class="form-group col-xs-12 controls" ng-class="{ 'has-error' : formdata.email.$invalid && !formdata.email.$pristine }"> <label>email address<span>*</span></label> <input type="email" class="form-control" placeholder="email address" id="email" required ng-model="formdata.email"> <!-- <p ng-show="userform.email.$invalid && !userform.email.$pristine" class="help-block">you name required.</p> --> </div> </div> </div> </div> <div class="row control-group"> <div class="form-group col-xs-12 controls" ng-class="{ 'has-error' : formdata.phone.$invalid && !formdata.phone.$pristine}" > <label>phone number<span>*</span></label> <input type="tel" class="form-control" placeholder="phone number" id="phone" required ng-model="formdata.phone"> <!-- <p ng-show="userform.phone.$invalid && !userform.phone.$pristine" class="help-block">you name required.</p> --> </div> </div> <div class="row control-group"> <div class="form-group col-xs-12 controls" ng-class="{ 'has-error' : formdata.message.$invalid && !formdata.message.$pristine}" > <label>message<span>*</span></label> <textarea rows="5" class="form-control" placeholder="message" id="message" required ng-model="formdata.message"></textarea> <!-- <p ng-show="userform.message.$invalid && !userform.message.$pristine" class="help-block">you name required.</p> --> </div> </div> <div class="row control-group"> <div class="form-group col-xs-12 controls"> <div class="g-recaptcha" data-sitekey="6lf2xaktaaaaaopjvphn10hdpbtgp55rozl01nip"> </div> <!-- --> </div> </div> <br> <div id="success"></div> <div class="row"> <div class="form-group col-xs-12"> <button type="submit" class="btn btn-theme-bg btn-lg">send message</button> </div> </div> </form> </div><!--contact form--> the javascript code in main.js file form submission
var app = angular.module("etheron", []); app.controller("formcontroller", function($http, $scope) { $scope.formdata = {}; console.log("submit form"); $scope.contactrequest = function() { if($scope.formdata.g-recaptcha-response === ""){ //if string empty // todo: use bootstrap sweet modals here alert("please resolve captcha , submit!") }else{ var post_data = $.param($scope.formdata); $http.post({ method: 'post', url: 'home/contact', data: post_data, headers : { "x-csrf-token" : $('meta[name="csrf-token"]').attr('content'),'content-type': 'application/x-www-form-urlencoded; charset=utf-8' } }).success(function(response){ console.log(response); if(response.error === 0){ alert("successfully verified , signed user"); }else{ alert("user verification failed"); } }) .error(function(error){ }) } } }); the problem angularjs form submission code never called, tried quite few snippets different tutuorials no help. there detaild example based on activerecord not want use here, generate email using sendgrid 1 form submitted.
i think maybe have missed form submit url , $http url.
form tag submit url different url of $http.
first of all, form tag has no actions. default action url "/" (now page)
- when form submitted, ng-submit="" executed.
- ng-submit block $http executed. ($http async block)
- after ng-submit block end, the form submit!
so because of form action url "/", form submit "/"
and think miss more point 2 above.
maybe number 2 process($http post routine) not work
for miss point
rails has checking routine csrf-token. when post action, action skipped before_filter :verify_authenticity_token (a) or in angularjs, add csrf-token $http headers. (b)
#(a) skip_before_filter :verify_authenticity_token #(b) $http({ method : 'post', url : '/contact', data : $.param($scope.formdata), // pass in data strings headers : { "x-csrf-token" : $('meta[name="csrf-token"]').attr('content') } }) // $('meta[name="csrf-token"]') tag generated layout <%= csrf_meta_tags %>
Comments
Post a Comment