1

There are two pages in my ExpressJS app. home and user. I create a form in my home.js file and a navigate user.js from this form. I can get values of input components but i can not get values of other components. How can I do that ?

home.js :

<form action="/users" method="POST">
    <input id="input_name" type="text" placeholder="name" name="name">
    <input id="input_pwd" type="text" placeholder="password" name="pwd">
    <input id="input_mail" type="text" placeholder="mail" name="mail">

    <button type="submit" name="button_name" value='register1'>register</button>

    ....

    <div id="selection" name="selection">selection</div>
</form>

I populate selection div with user selections and I want to sent this data to server. I catch the request in my index.js

router.post('/users', function (req, res, next) {
    console.log("register name : " + req.body.name);
    console.log("register mail : " + req.body.mail);
    console.log("register pwd : " + req.body.pwd);
    console.log("register selection : " + req.body.selection);
}

I can get value of req.body.name, req.body.mail and req.body.pwd. but req.body.selection is always undefined. how can I get this value ?

utarid
  • 1,642
  • 4
  • 24
  • 38
  • yes. I added body-parser to my app.js. const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: true })) – utarid Jun 30 '19 at 19:28
  • 1
    Hmm, looking into your form again, actually it's obvious that your form doesn't send `div` values, because... well it's not considered as form data. Anyway, what output do you expect for `console.log(req.body.selection)` part? EDIT: Actually, you probably should populate that div with checkboxes or something – ionizer Jun 30 '19 at 19:30
  • yes user choose some options and I populate selection div. but i can not access them. i can not find what i missed. How can I send non-input component to server side ? – utarid Jun 30 '19 at 19:37
  • 1
    One solution I can think of is to use `onSubmit` attribute in your `form` tag and create a custom form submission function. In this function, you can try to customize what you send. Or, create an `onClick` handler for your `button` to handle the form submission and use AJAX to send your data instead. – ionizer Jun 30 '19 at 19:43
  • And by any chance, could you share with us your populated `div` with the options you mentioned? – ionizer Jun 30 '19 at 19:46
  • i tried hardcode string only. but i can not get it also. i can not find any example in google. also i tried ajax but i can not open users page without form ? – utarid Jun 30 '19 at 19:56
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/195772/discussion-between-ionizer-and-user4757345). – ionizer Jun 30 '19 at 19:57

2 Answers2

2

The html form only cares about its form elements (input, textarea and select etc) with named attributes. div is not an html form element. So how would you send the div centent through form? There are only tricks to handle this problem.

1- Use of hidden form elements: Put one of the form elements in the form in hidden mode which would contain data of your div element. As soon div contents changed, update the content of the hidden form element through JS. Don't forget to name this hidden form element.

2- Submit Form through JS: Don't submit the form through its primitive way. (Through action attribute in the form). Use JS to submit the form. Before submitting it, parse your div contents and put them in the data which is going to be submitted.

P.S: I only know these two tricks. If any other person knows more, do share.

Mukarram Ishaq
  • 748
  • 1
  • 8
  • 18
  • thanks for your answer. I do not know how open users page if I do not use action attributes in form. can you give me an example ? – utarid Jun 30 '19 at 20:35
  • Its simple, if you are using ajax, once a positive response is received from server, redirect the page to users page through JS – Mukarram Ishaq Jun 30 '19 at 20:40
  • I removed action attribute from form and I tried res.redirect('/users'); in index.js. but nothing happened. – utarid Jun 30 '19 at 20:53
  • When you are going to submit form through JS from front side, this res.redirect() won't serve your purpose. Just on front-side, when you received success after submitting the form, redirect the page to /users from front-side through JS, not from back-end side, which you are doing right now by using res.redirect() – Mukarram Ishaq Jun 30 '19 at 20:59
  • Okay, make two routes, one for handling form, and one whatever you want to show on /users page. Make an ajax request to form handling route which on success will return true. On front-side, in ajax code, handle the success event. On encountering this success event in ajax, redirect the page to /users page. This is one of the workarounds to solve your problem – Mukarram Ishaq Jun 30 '19 at 21:08
0

How can I do that ?

You can't. Submitting a form will not send the "filled out document" back to the server, it will just send back the form data, meaning the inputs names paired with their values. And <div>s aren't inputs.

Jonas Wilms
  • 132,000
  • 20
  • 149
  • 151
  • thank you for your answer. so how can I send this data to server ? I want to send request message with selection data to server and if it is ok i want to open users page. I can use ajax to send selection data to server without using form. but this time i can not open users page ? – utarid Jun 30 '19 at 20:21
  • Use an `` ? – Jonas Wilms Jun 30 '19 at 20:24
  • I am using input for username, password, mail. but user choose some options for selection. becuase of that it is div. – utarid Jun 30 '19 at 20:27