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).
Related
I'm using a braintree.js drop in form. I'm submitting it with ajax, by registering for the onPaymentMethodReceived callback. So far so good, it works fine.
However, after submitting the form, there's a two step process: first the payment details are submitted to braintree and verified (while a spinner shows over the form), then the details on the page are anonymised, and the onPaymentMethodReceived callback fires with a nonce I can use to send to my server.
The problem is I'd like to disable the form submission button when it's clicked, but registering an onClick handler on it causes braintree to ignore the click.
I understand that the customer's card details are visible on the page at this point, but I can't grab them anyway due to the iframe being from a different domain, and any potential method I could use at this point to grab the details I could do with setInterval() anyway, so I don't really see a security case for this.
Is there any way to detect the click here?
Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.
To my knowledge you can't jump in the middle of the tokenization process with the Drop-In. It sounds like you are looking to create a custom experience for your users that steps beyond the Drop-In use case.
Enabling a form submit button after the onPaymentMethodReceived callback is the common Drop-In use flow, but by creating a custom integration you can directly handle the client-side tokenization process and wrap it with whatever functionality you need:
var client = new braintree.api.Client({clientToken: "CLIENT-TOKEN-FROM-SERVER"});
client.tokenizeCard({
number: "4111111111111111",
expirationDate: "10/20"
}, function (err, nonce) {
// Send nonce to your server
});
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');
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!
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 :)
i use remote method of validator for checking if username exists in DB
my scenario:
form with one field (username of course)
i filled field
it passes validation, but i don't sending form yet
going to DB inserting username that i filled in form that i still don't sent yet
returning to my form press on submit btn
voila, it pass validation (here the issue if u don't understand yet)
of course i did validation on the server side too, but it will be great that validation for remote method will fire too when sending form
p.s. i'm using 1.5.5 version but see that this issue still exists
If I'm reading this properly, jQuery is not at fault here.
If this isn't correct let me know. I am imagining a registration form.
I go to your form, enter a username. jQuery says the username is available using the remote validation technique.
Before I click submit, someone else submits the same form with the same username, and gets it.
I can still submit the form, even though I have an already taken username.
This is a classic scenario. A concurrency problem. The data is now stale that was pulled by jQuery validation during my registration. You need to adjust for this scenario in your remote page or make jquery validation run on form submit as well. You could just call validate() on your form in the submit method of your form.