JQuery Ajax Form Submit with Form Data returns nothing on submit

Question

The following example below returns nothing. Could you please clarify if I missed something?

Javascript:

$('#add-modal').submit(function(e) {        
  e.preventDefault();
  var formData = new FormData( document.getElementById("add-modal"));
  $.ajax({
    type: "POST",
    url: "/add-form",
    data: formData,
    processData: false,
    contentType: false,
    success: function (data) { console.log("SUCCESS : ", data); },
    error: function (e) {console.log("ERROR : ", e); }
  });
});

HTML (submission form):

<form id="add-modal" method="POST" enctype="multipart/form-data">
    <div class="modal-body">                    
        <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control"  name="name" required>
        </div>
        <div class="form-group">
        <label>Classes</label>
         <select class="form-control" name="classes">
         <option value="Direct">Direct</option>
         <option value="Merketing">Merketing</option>
         <option value="Partnets">Partnets</option>
         </select>
        </div>  
        <div class="form-group">
        <label>File</label>
         <input type="file"  class="form-control" name="file">
        </div>                  
    </div>
    <div class="modal-footer">
        <input type="submit" class="btn btn-success" value="Add">
    </div>
</form>

Server-side (node js):

app.post('/add-form', function(req, res, next){
    
    console.log(req.body);
    
});

With my best regards, Evgeniy

What do you mean by _"returns nothing"_? Do you mean _"logs nothing"_? — Phil, Dec 21 '21 at 00:12
When you use ajax to send form content, the server's reply is not displayed in the browser like when you send a form the "regular" way. The only thing that'll happen is jQuery will call the function you passed as `success` and pass along the reply. So if you check your console, you should see the server's output there. Why are you using $.ajax to send the form in the first place? — , Dec 21 '21 at 00:17
@ChrisG given this looks like a modal, I imagine OP wants to submit the form via AJAX then close the modal — Phil, Dec 21 '21 at 00:29
@Phil Probably true but not necessarily. We'll have to wait for clarification. Evgeniy? — , Dec 21 '21 at 08:41
@ChrisG, My form is shown as a modal, but... is it really important?! By "returns nothing" I mean I get empty object on my server side (added additional code) when I click on submit — Evgeniy Sharahov, Dec 21 '21 at 23:28
I see, which express body parser did you set up and how? You're also not using the popular [multer](https://www.npmjs.com/package/multer) which makes me think no body parsing at all is happening. — , Dec 22 '21 at 08:09
@ChrisG, thanks a lot. The issue is I use "bodyParser" instead of "multer". I can see my data now using "multer". — Evgeniy Sharahov, Dec 22 '21 at 23:38

score 0 · Accepted Answer · edited Dec 23 '21 at 01:14

0

The form is using express to process the back-end. The form is multi-part and processing a file upload.

A multi-part processor is required to parse the form data. The comment by @ChrisG suggested using multer. It was expected that bodyParser was doing this parsing. Replacing it with multer which needs to be imported in the express app as per the multer documentation

const express = require('express')
const multer  = require('multer')
const upload = multer({ dest: 'uploads/' })

app.post('/add-form', function(req, res, next){  
  console.log(req.body);   
});

edited Dec 23 '21 at 01:14

Interlated

5,108
6
48
79

answered Dec 22 '21 at 23:41

Evgeniy Sharahov

27
5

You need to include `upload` in your route handler though; the third line on its own does nothing afaik. See here: https://github.com/expressjs/multer#usage Also, this seems to be a dupe of https://stackoverflow.com/questions/23691194/node-express-file-upload – Dec 24 '21 at 10:07

JQuery Ajax Form Submit with Form Data returns nothing on submit

1 Answers1