Submit form using jquery

Question

I'm trying to submit a form using JQuery. My problem comes from the fact that the front end (html+js/jquery) and the back-end is not on the same site, but it does support JSONP.

The form contains a file input field, so I would be submitting Multi-part form data. How would you resolve this?

Answer 1

If all you want to do is submit the form an go to the external site (ie as if you pressed a submit button on a tranditional web form), you can just trigger the form's submit method using Javascript; it doesn't matter where the form posts to.

document.myform.submit();

However, if you want to post cross-domain using an AJAX-type method, you'll have a harder time of it. The answer lies in using JSONP rather than JSON in your JQuery AJAX requests.

See the JQuery Ajax documentation for more details.

Answer 2

EDIT: Do not try this, it will not work for cross domain posts. My fault for not reading the question carefully enough.

Does it have to be a form submit? If not, you could simply do a jQuery ajax call that posts json to it similar to this:

$.ajax({
    url: 'yourUrl.htm',
    data: 'somethingYouWantToSendToQueryString',
    datatype: 'json',
    success: function (data) {
        //Do something with the data
    }
});

Answer 3

your form action would point to the site controlling the post.

<form id="theForm" action="http://someurltoaformsubmitfunction" method="post">

then you can call $('#theForm').submit();