-2

So im experimenting with a simple form submission and I'm using node js to write the form information to a text file, the problem is that I cant seem to call an HTML 'id' in node js.

const fsLibrary  = require('fs')

let data = frm1
  
fsLibrary.writeFile('data.txt', data, (error) => {
      
    if (error) throw err;
})
<!DOCTYPE html>
<html>
<head>
    <script src="main.js"></script>
</head>
<body>

<p>Please enter the following information and submit the form</p>

<form id="frm1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br><br>
  Date Of Birth: <input type="text" name="dob"><br>
  Home Address: <input type="text" name="addr"><br><br>
  Country: <input type="text" name="country"><br>
  Zip Code: <input type="text" name="zip"><br><br>
  SSN: <input type="text" name="ssn"><br>
  Primary phone number: <input type="text" name="phone"><br><br>
  Primary email: <input type="text" name="email"><br>
  Secondary phone number: <input type="text" name="sphone"><br><br>
  Secondary email: <input type="text" name="semail"><br><br>
  <input type="button" onclick="submit()" value="Submit">
</form>

<script>
function submit() {
  document.getElementById("frm1").submit();
}
</script>

</body>
</html>
Peacock
  • 1
  • 1
  • 1
    What have you tried so far? (What is your full nodejs code?) – theusaf Jun 02 '21 at 23:02
  • 2
    You can't really "call" an `id` and there is not a direct link from node.js to the browser. Can you explain what you are trying to do to the html? – Matt Jun 02 '21 at 23:07
  • Why are you using a `submit()` function instead of just using normal form submission? – Barmar Jun 02 '21 at 23:08
  • You should use middleware such as Express in node.js to get the form fields. Then you can write them to the file. – Barmar Jun 02 '21 at 23:08
  • You should generally use `method="post"` in the form. – Barmar Jun 02 '21 at 23:09
  • [tutorial on processing forms with Express](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/forms) – Barmar Jun 02 '21 at 23:10
  • @Barmar I don't see Express mentioned anywhere. It's not the only webserver framework for Node, either. See [`server`](https://www.npmjs.com/package/server), or even [`http`](https://nodejs.org/api/http.html) – j1mbl3s Jun 02 '21 at 23:35
  • @Barmar all my code is just taken right off of w3 schools with a little bit of modification – Peacock Jun 02 '21 at 23:37
  • @j1mbl3s I said "such as". From what I've read, it seems to be the most popular. – Barmar Jun 02 '21 at 23:40
  • @Barmar Sorry, I missed that. But it's definitely not the only way - you can parse the request for the form data as mentioned in my answer, which is what any middleware would do. – j1mbl3s Jun 02 '21 at 23:47
  • @j1mbl3s It was just a recommendation, as it makes it far easier than rolling your own middleware. – Barmar Jun 02 '21 at 23:48

2 Answers2

1

You Express in nodeJs along with a body parser so that you dont get undefined data.

Also to render html pages and get the data from forms to nodejs better use render engines like Handle bar, EJS, etc. I prefer EJS, use them, it'll work

Mohak Gupta
  • 163
  • 1
  • 9
0

Generally, data from an HTML form POST submits are sent over the network in the body of an HTTP request encoded similarly to URL query parameters. GET submits are sent as query parameters. For each input - and if submitted through a <button type="submit" ...>, the button - the data is encoded as name=value, with each input separated by an ampersand (&). It does not contain the form's id or name.

You will need to parse the request on the server before working with the submitted form data.

Example

Assuming you have pulled a POST request's body or GET request's query parameters into a variable requestData and want to map-reduce it into an object with keys being input names and values being input values:

// example data
const requestData = 'input1=hello&input2=what%27s%20up&input3=how%20u%20do,ing?';

function decodeInput(str) {
  return str.split('=').map(decodeURI);
}
function intoObject(obj, input) {
  obj[input[0]] = input[1];
  return obj;
}
const output = requestData.split('&').map(decodeInput).reduce(intoObject, {});
console.log(output);

/* Expected output:
   {
     input1: "hello",
     input2: "what's up",
     input3: "how u do,ing?"
   }
*/
j1mbl3s
  • 994
  • 3
  • 16