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.

Do you have an actual question here? Are you having problems with something in the code? — deltaforce2
– deltaforce2, Commented Dec 7, 2011 at 18:17
i think you are trying to make an ajax call to a crossdomain (salesforce) server... which is not possible. — Jim Jose
– Jim Jose, Commented Dec 7, 2011 at 18:19

Esailija · Accepted Answer · 2011-12-07 18:34:44Z

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();

deltaforce2 · Accepted Answer · 2011-12-07 18:25:02Z

1

+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.

answered Dec 7, 2011 at 18:25

deltaforce2

5832 silver badges8 bronze badges

Collectives™ on Stack Overflow

Post Forms Using Javascript URL

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related