getting user input from form using express js and body parser

Question

I am having problems getting user input from form. could you please tell where am I going wrong??

here's the add-employee.html code

<!DOCTYPE HTML>
<html>
<head>
    <title>Add Employee</title>
    <!--<script type="text/javascript" src="main.js"></script> -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<form action="/form"  method="post">
<tr>
<th>
<label>Name:</label>
<input type="text" name="name">
</th>
<th>
<label>Designation:</label>
<input type="text" name="designation">
</th>
<th>
<label>PAN No:</label>
<input type="text" name="pan">
</th>
<th>
<label>Aadhar No:</label>
<input type="text" name="aadhar">
</th>
<th>
<label>Bank A/c:</label>
<input type="text" name="bank">
</th>
<th>
<label>Basic Salary:</label>
<input type="text" name="basicsalary">
</th>
<th>
<label>Other Allowance:</label>
<input type="text" name="allowance">
</th>
<th>
<label>ESI No:</label>
<input type="text" name="esi">
</th>
<th>
<label>UAN No:</label>
<input type="text" name="uan">
</th>
</tr>

<tr>
<td>
<input type="submit" name="submit_button">
</td>
</tr>
</form>
</table>


</body>


</html>

And here's the link to the server.js code which I am using to run the app. https://github.com/silentarrowz/payroll/blob/master/server.js when I submit the form I am expecting to get a response of 'employee' + name + 'added'

But I am getting the result as " employee undefined added ".

now, why is this happening? where am I going wrong?

grimurd · Accepted Answer · 2017-01-17 15:42:06Z

2

In your server.js you have the line.

app.use(bodyParser.json());

This means that your server can only read JSON data in requests. However, unless you are using javascript/jquery to send the form to the server, the data is never formatted as JSON. Instead browsers use urlencoded or multipart formats to send the form. multipart is normally only used when you are sending files with your form so it is most likely using urlencoded format.

That means that you need to include a body parser for the urlencoded format.

Simply change it so we have the urlencoded parser below the json parser like this:

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

However if you will be sending files with your forms, you must parse the request using a module like multiparty.

answered Jan 17, 2017 at 15:42

grimurd

2,8701 gold badge26 silver badges39 bronze badges

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

11 Comments

faraz Over a year ago

ok, I have done that and now when I click the submit button I see this in the url bar - localhost:8080/form and the page says The localhost page isn’t working localhost didn’t send any data. ERR_EMPTY_RESPONSE

grimurd Over a year ago

Thats because you arent sending a response in the post() method. At the bottom in it add res.status(200).send(); to get a response.

faraz Over a year ago

ok, I am a bit confused. I had put res.send('employee' + name +'added'); In there earlier, so isnt that considered a response?

faraz Over a year ago

anyways, i'll try it now

faraz Over a year ago

ok, I have done that now and I am still getting the same error. Another thing that I noticed is that the browser status bar keeps showing "Waiting for local host "for a long time after I have clicked on the submit button. dont know why that is

|

Collectives™ on Stack Overflow

getting user input from form using express js and body parser

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related