Zaid Humayun Zaid Humayun - 1 year ago 58
Node.js Question

Two different POST requests being made to the same route at the same time

I am creating a voting app and I have an issue that I don't know how to work around. I think I have just structured my app badly. I have a POST route like so

.post(function(req, res) {
var userID; //variable to store the authentication id for the user
var incoming_id = Object.keys(req.body)[0];


serverHandler.newPoll(req, res, db, function(id) {
user_id = id;



I am passing in some form data to this route like so from the HTML

<form action='' method='post' enctype='multipart/form-data' name='new-poll-form'>
<div class='form-group'>
<input type='text' name='title' class='form-control' placeholder='Title' />
<div class='form-group'>
<textarea class="form-control poll-options" rows="5" placeholder='Options' name='options'></textarea>
<button type='submit' class='btn btn-primary submit-butt'>Submit</button>

The data entered in the form is directly sent to the route with no need for an AJAX request on my part. I assume this is because I am setting the method='post' in the form.

Now, my problem is that I also need to pass in an object from the JavaScript file linked to the above HTML file. I am doing that through an AJAX call like so

$('.submit-butt').on('click', function() {
console.log('From in here');
ajaxFunctions.ready(ajaxFunctions.ajaxRequest('POST', appUrl + '/poll-create', response.authResponse.userID, function(data) {


Here is the AJAX function below

'use strict';
var appUrl = window.location.origin;

var ajaxFunctions = {
ready: function ready (fn) {
if (typeof fn !== 'function') {

if (document.readyState === 'complete') {
return fn();

document.addEventListener('DOMContentLoaded', fn, false);
ajaxRequest: function ajaxRequest (method, url, data, callback) {
var xmlhttp = new XMLHttpRequest();
console.log('Inside ajaxRequest');

xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
};, url, true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

So, the first issue I face is that when I try console.log the data sent through the AJAX request (assuming I send in an object), the output I get is {'object Object': ' '}. Which is why I opted to send in only the userID from that object. In that case I get this, {'userID': ' '}. Its annoying but I can work with it at the very least.

My second issue is that, even if I work my way around the first issue, I am essentially making two AJAX calls to the same route. So, I don't have access to the form data and the userID at the same time. So, I can't insert them into a single document. How do I work my way around this? Is there a better way of passing around data than I am doing currently? Please help!
I am using body-parser to parse incoming data and formidable to parse incoming form-data.

Answer Source

You should make only one request like this:

$('.submit-butt').on('click', function() {
    var formData = {}; // Prepare form data.

    // Add code to get form data as json and insert it in formData
    // You can either use Javascript for this or, with jQuery you can look into

    formData.userId = response.authResponse.userID; // This is how you add new data.

    // Make ajax request with formData.

    return false; // It is important to return false so the normal form POST request will not trigger, since you already did all that job with Ajax.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download