Post Forms Using Javascript URL

Question

I'm trying to submit a form to a website not my own (salesforce.com with their web-to-lead function) and I'm doing it through a javascript modal window.

Basically once all the entries are tested and made sure there are no errors, I use this:

if(error_count == 0) {
                $.ajax({
                    type: "POST",
                    url: "[salesforce url]",
                    data: "first_name=" + first_name + "&last_name=" + last_name + "&email=" + email + "&firm=" + firm + "&[salesforceid]=" + AUM + "&[salesforceid]=" + custodian + "&[salesforceid]=" + custodian_other,
                    error: function() {
                        $('.error').hide();
                        $('#sendError').slideDown('slow');
                    },
                    success: function () {
                        $('.error').hide();
                        $('.success').slideDown('slow');
                        $('form#callToAction').fadeOut('slow');
                    }               
                }); 
            }

If tested the form without using javascript and the url works, so I'm thinking maybe the way javascript handles the url is the issue?

The issue: the data is not getting successfully submitted to Salesforce. Again, regular HTML form works, javascript doesn't. So I've identified it as a javascript issue.

Answer 1

You cannot make a XHR cross domain request unless the receiving server has allowed it and the browser supports CORS. You can however do a blind submit like this which will assume success:

var $form = $("<form>", {
    method: "POST",
    action: "[salesforce url]",
    target: "my-iframe"
}).appendTo("body");

var $iframe = $("<iframe>", {
    name: "my-iframe"
}).bind( "load", function () {
    $('.error').hide();
    $('.success').slideDown('slow');
    $('form#callToAction').fadeOut('slow');
    $iframe.remove();
    $form.remove();
}).appendTo("body");

$.each(("first_name=" + first_name + "&last_name=" + last_name + "&email=" + email + "&firm=" + firm + "&[salesforceid]=" + AUM + "&[salesforceid]=" + custodian + "&[salesforceid]=" + custodian_other).split("&")), function (index, value) {
    var pair = value.split("=");
    $form.append("<input>", {
        type: "hidden",
        name: pair[0],
        value: pair[1]
    });
});

$form.submit();

Answer 2

+1 for Jim Jose. This sort of thing could be interpreted as an XSS attack against the user, so most likely the browser will not allow it.

You could check out your browser's error logs, see if there's any security errors when you try to run your script. If that doesn't do anything, try to install a tool like Firebug and see if it can pinpoint the problem.

You could also improve your error handling by trying a different sort of method signature for the error function, like this:

error: function(jqXHR, textStatus, errorThrown) {...}

This way you can check what sort of error is being thrown from the Ajax call.