Ajax serialize() form error

Question

There have been similar questions, but I have browsed them a lot and found no accurate answer or fix so please offer a solution!

I am ajaxing a form to a page, and expecting a value back - no big deal. I've done it a million times before, but now it just refuses to work for this one form.

form html:

<form class="selectClaimType" action="place.php" method="post">
   <select id="claimtype" name="claimtype">
   <option value="privatebuilding">Private Building</option>
   <option value="communalbuilding">Communal Building</option>
   <option value="outside">Stored Outside</option>
   </select>
   <input type="submit" id="submit2" name="submit2" class="button" value="save"/>
</form>

jQuery:

$('form.selectClaimType').on('submit',function(e) {
    console.log('found');
    $form = $(this);
    console.log($form.serialize());
    e.preventDefault();
    $.ajax({
        url: "place.php", //$form.attr('action'),
        type: "post", //$form.attr('method'),
        data: $form.serialize(),
        success: function(data) {
            console.log(data);
            if (data == 1) {
                console.log('hello');
            }
            else {
                console.log('failure to change claim type'+data);
            }
        },
        data: function(data) {
            console.log('error ajaxing'+data);
        }
    });
});

The form is not dynamically created, and as you can see I have console.log(ged) nigh on everything. So I know that the form.serialize() is working (values appear as expected). I left out the preventDefault() to test, and the get values were correct. I have tried dataTypes of script, html, text, xml and json - no success.

I have a var_dump of $_REQUEST and $_POST on the posted to page - these are both empty arrays. I have changed the page that the post is sent to - still doesn't work.

Any ideas at all?

You can try `$postdata = file_get_contents("php://input");` and accessing `$HTTP_RAW_POST_DATA` which has the post in string form to see if it's really posting. It may be that the post is malformed somehow, making it hard for PHP to parse it into `$_POST`. — miyasudokoro, Jan 30 '14 at 00:04

score 0 · Answer 1 · answered Jan 30 '14 at 00:02

0

Maybe it is failing. Have you added a fail() callback to see if you get any output from that. Maybe the error is where you are submitting.

answered Jan 30 '14 at 00:02

samanime

25,408
15
90
139

I can't believe I've just seen I put data: instead of error: !! I'll try fixing that now. – DJB Jan 30 '14 at 00:04
that was the problem, evidently I had put data twice. My deepest apologies! – DJB Jan 30 '14 at 00:05

score 0 · Answer 2 · answered Jan 30 '14 at 00:07

0

    data: $form.serialize(),
    ....
    data: function(data) {
        console.log('error ajaxing'+data);
    }

Probably a conflict here...maybe meant error: ?

answered Jan 30 '14 at 00:07

Deryck

7,608
2
24
43

score 0 · Answer 3 · edited May 23 '17 at 11:49

This does not answer you question but maybe it solves your problem.

new FormData(form)

is a new native way to send a form.(including files)

Check the pure javascript way to send forms with xhr2.

support all modern browser including mobile devices & ie10

function ajax(a,b,e,d,c){
 c=new XMLHttpRequest;
 c.onload=b;
 c.open(e||'get',a);
 c.send(d||null)
}
// Url,callback,method,formdata or {key:val},placeholder

Send the whole Form

var form=document.getElementsById('myForm');
form.onsubmit=function(e){
 e.preventDefault();
 ajax('submit.php',SUCCESSFunction,'post',new FormData(this));
}

More info

https://stackoverflow.com/a/20476893/2450730 with working copy & past php page.

if you have any questions just ask.

Ajax serialize() form error

3 Answers3