CODEWITHSUNDEEP
javascriptajaxformsform-data
Speed
Speed

Reputation: 95

Use form data instead of query string with ajax

I am updating an old site and running into hiccups. I am rewriting a contact form to use ajax rather than a normal form submission/thank you page. The form action sends to a third party site (I do NOT have access to the PHP which parses the data) and it works with the basic form. When I submit using ajax, the form submits, no errors are thrown, but the data put into the DB by the third party code is blank. Same form names, same values. Here is my js:

$("#contactForm input,#contactForm textarea").jqBootstrapValidation({
    preventSubmit: true,
    submitError: function($form, event, errors) {
        // additional error messages or events
    },
    submitSuccess: function($form, event) {
        event.preventDefault(); // prevent default submit behaviour
        // get values from FORM
        var fname = $("#fname").val();
        var lname = $("#lname").val();
        var email = $("#email").val();
        var cphone = $("#cphone").val();
        var comments = $("#comments").val();
        var address = $("#address").val();
        var city = $("#city").val();
        var zip = $("#zip").val();
        $.ajax({
            url: "https://my.serviceautopilot.com/AddEstimate.aspx?id=*************&wid=****************",
            type: "POST",
            dataType: 'jsonp',
            processData: false,
            data: {
                fname: fname,
                lname: lname,
                cphone: cphone,
                email: email,
                comments: comments,
                address: address,
                city: city,
                zip: zip
            },
...

On the original submition, the data looked like this: form data vs query string I believe its because the data is passed as form data on the original, but as part of the query string in the second example. Am I correct assuming this? Is there a different issue with the code?

I tried using the form data object which didn't work, it still appeared in the query string and still came through blank. I tried tweaking the data type, content type, processdata = false, but no luck. In the past, I've had access to the server side code and haven't had an issue debugging and making easy fixes for this sort of thing, but I'm a little lost at this point. Thank you all.

Upvotes: 1

Views: 996

Answers (2)

Andy Carroll
Andy Carroll

Reputation: 46

You will have to use the CURL request with the Post method if you are using the third party to collect the form data.

Upvotes: 0

Quentin
Quentin

Reputation: 943108

dataType: 'jsonp',

JSONP requests must be GET requests (they work by generating a <script> element with a src attribute). They cannot include a request body.

Don't use JSONP if you want to make a POST request.

(For that matter, don't use JSONP anyway, it is a dirty hack to work around the Same Origin Policy and we've had CORS for years now).

Upvotes: 2

Related Questions