I am implementing a CSRF solution that automatically injects a token stored on the session into all forms before subitting them. I have implemented 2 solutions to ensure all submissions are handled
For ajax submissions I have implemented a jquery.ajaxPreFilter method that adds the token to the data attributes before passing it through to the ajax handler.
For other forms, I bind to the submit event using jquery.on('submit').
For forms being submitted via javascript I have changed my .submit() calls to .trigger('submit');
There are some javascript methods in our code that will use javascript document.createElement() to create a form, before calling form.submit(). I am unable to change these to form.trigger('submit') as jquery does not recognise them; I get error "form.trigger is not a function".
How can I handle these types of form submissions to trigger the submit event so that my binding method will pick it up?
I have now found a solution, and didn't realise it was so simple.
Instead of calling
form.submit();
I just call
$(form).trigger('submit');
Related
I'm using Autoform for my meteor app and I want to submit the form manually using javascript. I've tried:
$('form#myFormId').submit();
and
document.forms['myFormId'].submit();
and neither of them work. The form is not being submitted and none of the call back functions (eg. onSuccess) are being called. I want to do this because I want to inject javascript in my android webview, which I'm using to display my website in my android app.
EDIT: I think the form is being submitted, but none of the Autoform functions are being called, ie. nothing is being inserted into the collection the callbacks aren't working. Right now, it just redirects to the same webpage with the input content in the url (since I didn't specify an action for my form, since I don't need one if I'm using autoform and meteor).
When dealing with meteor-autoform, a good thing to do is to always enable the debug mode while in development:
if (Meteor.isClient)
AutoForm.debug()
in some development.js file somewhere in your app.
Now, having your autoform not triggering the methods attached can occur when:
the id of your form is not unique on your page and autoform is hooked to this other id and doesn't detect your form submission. I have a strong feeling this could be the case here.
you have some non-optional things in your schema preventing the form to be submitted as long as all the mandatory fields are not populated.
you have somewhere in your events.js a click yourformbutton event being called, preventing the actual autoform event listener to fire when submit (but this should not be the case since submitting through .submit() does not work either.
Another good way to understand what's going on is to use autoform hooks like: onSubmit: function(insertDoc, updateDoc, currentDoc), onSuccess: function(result), onError: function(error). On submit is particularly interesting to examine your data flow.
More details about those hooks here : https://github.com/aldeed/meteor-autoform#callbackshooks
This may not be the best approach, but here is how I was able to manually submit my form. Inspired by this approach.
I have the auto form defined like so
{{#autoForm schema=postFormSchema id="formId"}}
Then I defined an onSubmit hook to with return false so that I can manually call my meteor method from my client.
onSubmit: function(insertDoc, updateDoc, currentDoc) {
//Do some custom async js here as required,
//Then I call my meteor method directly from obSubmit hook
Meteor.call("addPost", insertDoc, function (error, post) {});
//reset the form.
AutoForm.resetForm('formId');
return false;
}
Note: onSubmit is not called if you have type=method and are using a meteor method for your AutoForm submission. mentioned here
The advantage of doing it like this is the AutoForm handles validation, and attempts submission and I can perform some customizations in the onSubmit method.
(Ensure to call check on the server methods as well using your AutoFormSchema).
In the simple javascript drop-in UI, when the form is being submitted, braintree.js will intercept the form submission and inserts a hidden field named "payment_method_nonce" into the form, before the submission actually goes to the server.
However, when using the AngularJS as the frontend framework, I generally don't want the form submission to directly go to the server and then do a page reload. Instead, I want my AngularJS function to intercept and deal with the form submission (e.g., via ng-click or ng-submit), AND in its processing it needs to retrieve and use the "payment_method_nonce" value.
I tried it and it can still intercept the form submission. However, it seems like AngularJS intercepts the form submission BEFORE braintree.js does and inserts the "payment_method_nonce" field.
Hence, my AngularJS code that responds to the form submission cannot retrieve that "payment_method_nonce" field and perform appropriate processing. Any suggestions on how I can work around this?
Thanks!
After reading more braintree docs, it turns out registering a paymentMethodNonceReceived callback when setting up the braintree gateway is the right way to go!
Is there a way to detect when a Marketo form has successfully loaded when you embed it in your HTML page?
I want to manipulate the form with jQuery, but it is not always loaded when the .ready() event fires.
Marketo Forms 2.0 provides a method called whenReady, which allows you to specify a callback function when the Marketo Form reaches its ready event. So you can use this method to notify the client when the Marketo Form has loaded.
Please see the Marketo developer documentation for more information.
The Marketo Forms 2.0 .loadForm method allows for a callback as its fourth argument. Just add in your function there.
From the API Reference
.loadForm(baseUrl, munchkinId, formId [,callback])
Example
MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198", 621, function(form){
//from here we have access to the form object and can call its methods.
});
If you use .whenReady(callback), if 'there is already a form that is ready at the time this function is called, the passed callback will be called immediately', which might not be what you want.
(#Murtza works at Marketo, so maybe his answer is more official, but it didn't work for me)
I have 'black-box' type ASP framework, let's say I cannot modify it. But I can add HTML modules to it. I've made HTML module using AJAX for user logon and fetching data. The problem is I need to intercept submit event of the logon form. Then it has to call web service, return token and store it in a cookie before the page reloads.
First I need to stop the page from reloading. So I need to unbind events which cause the reload. But how? I don't have access to code which bound the events. It's not mine.
I was able to attach my own event handlers to submit button, login and password fields. They do their job - they start the AJAX request which should perform my logon procedure. Well, at least they try, because almost always my AJAX call is killed before it can finish, the page reloads, and my module has no token it should have by then. 1 in about 20 calls - it succeeds, so it looks like possible to do.
If there was a way to prevent page from reloading until the AJAX callback completes, it would probably be enough for it to work.
Is there absolutely no way of killing events which I din't bind in my code?
Well, I've found the way to achieve the goal without actually unbinding any events.
I needed to replace the form action attribute with '#', the same with special submit link href ('#'), and... DONE! After my AJAX call completes (or fails), it restores original hrefs and submits the naughty form.
So the question I asked was wrong - my fault. I needed to prevent a form from being submited and this is way easier than removing alien events!
TL;DR - kill hrefs first, then restore them :)
Is it possible to use javascript:location.reload(true) as a action= for a form without having the browser say "In order to reload this page, information must be resent" or something similar to that? Form action is currently being handled by onsubmit= instead.
Reload will always ask the question about information being resent if the user came from POSTing data. It's hard to answer anything specific as I don't know what you are trying to do. This is something that is in the browser's history and can't be prevented.
A better solution is to use the PRG pattern.
http://en.wikipedia.org/wiki/Post/Redirect/Get
If you just want to reload the page without submitting the form try window.location=window.location;
It seems you are handling your form with an AJAX request in the onsubmit event, which begs the question why since nothing is gained if you have to refresh the page anyway. I would suggest either using a normal post from the form, or use #Bob 's solution (which he saved me from typing by posting first). If you use window.location=window.location be sure to call it after whatever happens in your onsubmit method has completed or you may introduce a race condition where it redirects before your onsubmit method has finished sending the data.
Edit:
Just read your comment that provided more information. Again, reloading the whole page in response to an AJAX submit completely defeats the purpose of using AJAX. You really should consider using a Javascript Library like jQuery to help you with this. Basically the pattern would be as follows:
Handle submit with AJAX
When request completes, request only the changed portion of the page with AJAX
Replace or Append the content on the page with the response to the second AJAX call
Empty the form so it can be filled in again