Use form data instead of query string with ajax

Question

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

Quentin · Accepted Answer · 2016-10-05 16:37:11Z

2

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

answered Oct 5, 2016 at 16:37

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Speed Over a year ago

Thanks for the comment. I was indeed using it to get around the Same Origin Policy. So there is a different way around. That is good to know

Andy Carroll · Accepted Answer · 2016-10-05 16:39:41Z

0

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

answered Oct 5, 2016 at 16:39

Andy Carroll

461 silver badge7 bronze badges

Collectives™ on Stack Overflow

Use form data instead of query string with ajax

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related