Ajax/JQuery/JSON Forms

Question

Hi all, I've got a form which I need to post the information to an external site, but for some reason I'm getting an error:

Error: [Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "jquery.core.1-3-2.min.js Line: 19"] Source File: jquery.core.1-3-2.min.js Line: 19

Here's the code that I'm using to do the form (or attempt to do so):

<script type="text/javascript" language="javascript">
$(function() {

  $(".FormButtons").click(function() {

    var name   = $("input#contactDataFirstName").val();
    var lname   = $("input#contactLastName").val();
    var gender   = $("input#contactDataGender").val();
    var dobd   = $("input#contactDataDateOfBirthday").val();
    var dobm   = $("input#contactDataDateOfBirthmonth").val();
    var doby   = $("input#contactDataDateOfBirthyear").val();
    var mobile   = $("input#contactDataMobilePhoneNumber").val();
    var street   = $("input#contactDataStreetAddress").val();
    var suburb   = $("input#contactDataSuburbTownCity").val();
    var postcode  = $("input#contactDataPostcode").val();
    var country  = $("input#contactDataCountry").val();
    var state   = $("input#contactDataCountrySubdivisionIDNew").val();
    var password  = $("input#contactDataPassword").val();
    var email   = $("input#contactDataEmail").val();
    var remail   = $("input#contactDataReceiveEmail").val();
    var rmail   = $("input#contactDataReceiveMail").val();
    var rsms   = $("input#contactDataReceiveSMS").val();

    var dataString = 'contactDataFirstName='+ name + '&contactLastName=' + lname + '&contactDataGender=' + gender + '&contactDataDateOfBirthday=' + dobd + '&contactDataDateOfBirthmonth=' + dobm + '&contactDataDateOfBirthyear=' + doby + '&contactDataMobilePhoneNumber=' + mobile + '&contactDataStreetAddress=' + street + '&contactDataSuburbTownCity=' + suburb + '&contactDataPostcode=' + postcode + '&contactDataCountry=' + country + '&contactDataCountrySubdivisionIDNew=' + state + '&contactDataPassword=' + password + '&contactDataEmail=' + email + '&contactDataReceiveEmail=' + remail + '&contactDataReceiveMail=' + rmail + '&contactDataReceiveSMS=' + rsms;

    $.ajax({
      type: "POST",
      url: "path_to_url",
      //dataType: "jsonp", 
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id=\"message\"></div>");
        $('#message').html("<h2>Contact Form Submitted!</h2>")
        .append("<p>We will be in touch soon.</p>")
        .hide()
        /*.fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });*/
      }
     });
    return false;
    });
});
</script>

Could someone please help me post my data to the external website :)

Answer 1

Browsers have a security concept called same-origin policy whereby AJAX requests can only access the domain from which the page source has originated from (with some minor caveats and workarounds, but long and short..)

Your best bet is to POST to a local page which acts as a proxy, it will do the "real" HTTP POST to the external site.

Answer 2

You can check this site for a solution.

Answer 3

Due to cross domain restrictions it is impossible to POST with AJAX to a different domain. The way jsonp works is it inserts a <script> tag inside the DOM so it performs a GET request.

Answer 4

No need to use variable for every input in the form.

you can use $("form").serialize( ) to post all the input fields.

var str = $("form").serialize();

see here jquery form Serialize

Answer 5

Regarding your code:

jQuery's true power comes from enabling the user to do a lot with a little bit of code. form.serialize + submit event handling:

$("form#id-of-form").submit(function(){
    dataString = $(this).serialize();
    console.log(dataString.text());
    // >> first-name=Michael&last-name=Meyer&hungry=yes
});

It keeps things more DRY, which in the end will probably save you a headache (like forgetting one of the vars to POST)

It's probably better to attach whatever code you have to the submit event handler instead of attaching it to the click event for .FormButtons

One more thing: if you're testing in Firefox (with Firebug) or Safari (with the web inspector enabled) you can log anything to the console with console.log(). It even works with Javascript objects, allowing you to browse the object and see its methods and other goodies. console.log($(this)); would give you an explorable menu.

Regarding cross-domain AJAX requests: Remy Sharp has a good intro article introducing JSONP, which is an alternative you might consider instead of a local proxy. Some of the comments after the article are pretty helpful as well. One flaw is that I don't think JSONP + POST requests jive. There's always GET.....

Hope that helps.