I have a basic messaging service on a web Node / Express web app, and I'm trying to submit the form via Ajax, using the FormData object.

If I submit the form without AJAX, then everything works fine, but with AJAX the req.body. are all undefined.

On the server, I need to look for the data somewhere other than req.body when using AJAX??

Creating the FormData object:

var ajaxData = new FormData;
ajaxData.append('newMessage', $('.new-message').val()) // I've console.logged these, and their values are correct
ajaxData.append('senderId', $('[name="senderId"]').val())
ajaxData.append('senderName', $('[name="senderName"]').val())// I've console.logged these, and their values are correct
ajaxData.append('recipientId', $('[name="recipientId"]').val())
ajaxData.append('recipientName', $('[name="recipientName"]').val())// I've console.logged these, and their values are correct

And this is the POST request:

$.ajax({
  url: $form.attr('action'),
  type: $form.attr('method'),
  data: ajaxData,
  dataType: false,
  cache: false,
  contentType: false,
  processData: false,
  plete: function() {
    console.log('message created');
  },
  success: function(data) {


  },
  error: function(xhr, textStatus, errorThrown) {
    console.log(xhr.statusText);
    console.log(textStatus);
    console.log(errorThrown);
  }
});

EDIT

Thanks to G. Mansour for his answers below. In case anyone else gets here, the issue was the line:

contentType: false,

I tried this line at some point, which also doesn't work

contentType: 'application/json',

But when I remove the line entirely, everything is working as normal... If anyone can tell me why this line was breaking everything, I'd be interested to know.

I have a basic messaging service on a web Node / Express web app, and I'm trying to submit the form via Ajax, using the FormData object.

If I submit the form without AJAX, then everything works fine, but with AJAX the req.body. are all undefined.

On the server, I need to look for the data somewhere other than req.body when using AJAX??

Creating the FormData object:

var ajaxData = new FormData;
ajaxData.append('newMessage', $('.new-message').val()) // I've console.logged these, and their values are correct
ajaxData.append('senderId', $('[name="senderId"]').val())
ajaxData.append('senderName', $('[name="senderName"]').val())// I've console.logged these, and their values are correct
ajaxData.append('recipientId', $('[name="recipientId"]').val())
ajaxData.append('recipientName', $('[name="recipientName"]').val())// I've console.logged these, and their values are correct

And this is the POST request:

$.ajax({
  url: $form.attr('action'),
  type: $form.attr('method'),
  data: ajaxData,
  dataType: false,
  cache: false,
  contentType: false,
  processData: false,
  plete: function() {
    console.log('message created');
  },
  success: function(data) {


  },
  error: function(xhr, textStatus, errorThrown) {
    console.log(xhr.statusText);
    console.log(textStatus);
    console.log(errorThrown);
  }
});

EDIT

Thanks to G. Mansour for his answers below. In case anyone else gets here, the issue was the line:

contentType: false,

I tried this line at some point, which also doesn't work

contentType: 'application/json',

But when I remove the line entirely, everything is working as normal... If anyone can tell me why this line was breaking everything, I'd be interested to know.

• javascript
• jquery
• ajax
• express
• form-data

• are there files involved? If not much simpler to just serialize form and get rid of the custom settings you created – charlietfl Commented Oct 9, 2016 at 20:27
• Thanks for the ment @charlietfl No, there aren't any files involved. I've just had a go at serializing the form, the way that G. Mansour suggested below, but I get a parseerror with an unexpected token at position 0. – Runny Yolk Commented Oct 9, 2016 at 20:51
• inspect the actual request in browser dev tools network .. can see what is returned. It's not valid json – charlietfl Commented Oct 9, 2016 at 20:54
• Yeah, the response I get is the page's HTML, which doesn't help me much. I put in an XHR breakpoint to see what that showed up, and it just gave me the FormData object. I searched it for the message string that I'd submitted, but it wasn't in there... – Runny Yolk Commented Oct 9, 2016 at 21:04
• well depends on how you parse body...if looking for json to be sent need to modify ajax or else get the post sent – charlietfl Commented Oct 9, 2016 at 21:07

2 Answers 2

This is the html part

<form id="form" action="" method="post">
<input type="text" name="msgID" id="msgID">
<input type="text" name="senderId" id="senderId">
<input type="text" name="senderName" id="senderName">
<input type="text" name="recipientId" id="recipientId">
<input type="text" name="recipientName" id="recipientName">
<input type="submit" name="dsq" value="dsqdsq">
</form>

this is the JavaScript part

<script type="text/javascript">

$(document).ready(function(){
$("#form").submit(function(){
    $.ajax({
        url: "test.php", 
        data: $("#form").serialize(), 
        type: "POST", 
        dataType: 'json',
        success: function (e) {
            console.log(JSON.stringify(e));


        },
        error:function(e){
            console.log(JSON.stringify(e));


        }
    }); 
    return false;
});
});

</script>

And this is the php code

<?php 
die(json_encode(array("status"=>true)));
?>

Hope that will helps you.

I checked your code it says that's

Illegal invocation

So i'll give a solution you can use

data: $form.serialize(),
dataType: 'json',

And then you can catch your returned result by

console.log(JSON.stringify(e));

Wish that helps. If you have some errors i can help you.