How to send a read-only value from a form?

Question

<form action="/upload" method="POST" enctype="multipart/form-data">
    <fieldset>
        <span>Event name</span>
        <input name = "name" type="text" class="form-control" value="<%= `${event.name}` %>" readonly>
    </fieldset>
    <fieldset>
        <span>File</span>
        <input name = "eventImage" type="file" class="form-control" id="name" placeholder="Event name..." required>
    </fieldset>
    <fieldset>
        <button type="submit" id="form-submit" class="btn">Add Event</button>
    </fieldset>
</form>

and first console.log(req.body.name) is getting undefined... How do i resolve it?

app.post("/upload", (req, res) => {
    console.log(req.body.name);  // output is undefined
    const storage = multer.diskStorage({
        destination: './public/images' + req.body.name,
        filename: function(req, file, cb){
            cb(null, file.originalname);
        }
    });

    const upload = multer({
        storage: storage,
    }).single('eventImage');

    upload(req, res, (err) => {
        if(err){
            console.log(err);
        }
        else{
            console.log(req.body.name); // output is correct
            console.log(req.file);
        }
     })
});

the first console.log(req.body.name) is outputting as undefined and other console.log are evaluating fine.. how to resolve it?

Hello. I tried the form itself in fiddler and examined the network traffic and I see the "name" field being submitted correctly. If the field was marked as "disabled" I would have expected it not to be there, but "readonly" fields are sent in the POST. have you verified that "event.name" is not set as undefined? — nkahootzShawn, May 23 '20 at 05:45
yes I've verified that it is not undefined as i'm using is elsewhere on the page also and it is getting rendered properly and even that readonly field is showing the correct value @nkahootzShawn — Heet Mehta, May 23 '20 at 05:48
can you post up a working html file with this form so I can test? — nkahootzShawn, May 23 '20 at 05:50
sorry but this is the whole html..above and below are just html, head and body tag and one
<%= `${event.name}` %> — Heet Mehta, May 23 '20 at 05:54
can you replace your console.log with console.dir(req) and see what the console prints please? — nkahootzShawn, May 23 '20 at 06:01
also based on the question are you saying it works if the field is not `readonly`? — Always Learning, May 23 '20 at 06:03
{} { fieldname: 'eventImage', originalname: 'big_portfolio_item_2.png', encoding: '7bit', mimetype: 'image/png', destination: './public/imagesundefined', filename: 'big_portfolio_item_2.png', path: 'public/imagesundefined/big_portfolio_item_2.png', size: 485655 } this is what console.dir(req.body) is showing @nkahootzShawn — Heet Mehta, May 23 '20 at 06:09
what value did the `name` input field have at the time of submit? If it was empty it wouldn't get sent. Try changing value="<%= `${event.name}` %>" to `value="test"` and see if it gets sent. If so then the initial value is not being set properly — Always Learning, May 23 '20 at 06:15
I would try removing the enctype first. I believe it has to do with the body-parser. — nkahootzShawn, May 23 '20 at 06:18
First check your `HTML` source code to see if `${event.name}` id getting evaluated correctly or not. If it is, it should work fine. You can also try using `body-parser` — mrid, May 23 '20 at 06:19
but console.log(req.file) is giving me output so i guess body-parser is working fine @nkahootzShawn — Heet Mehta, May 23 '20 at 06:21
I believe this is a duplicate of: https://stackoverflow.com/questions/37630419/how-to-handle-formdata-from-express-4 — nkahootzShawn, May 23 '20 at 06:21
${event.name} is getting evaluated correctly and i'm using body-parser only. @mrid — Heet Mehta, May 23 '20 at 06:21
@HeetMehta Can you try sending the value through a hidden field. Please have a look at my answer. Hope that helps! — Kiran Dash, May 23 '20 at 06:42

score 0 · Answer 1 · answered May 23 '20 at 06:25

0

Try using this:

var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false })) // urlencoded
app.use(bodyParser.json()) // json

...
...

app.post("/upload", (req, res) => {
    console.log(req.body.name);
    console.log(req.file);
});

answered May 23 '20 at 06:25

mrid

5,782
5
28
71

Okay, try sending the data through ajax instead of sending it directly – mrid May 23 '20 at 06:29

score 0 · Answer 2 · answered May 23 '20 at 06:26

I had a similar issue which I had solved by passing the value through a hidden input but still keep the readonly field so users can see the data.

<form action="/upload" method="POST" enctype="multipart/form-data">
    <fieldset>
        <span>Event name</span>
        <input name="display_name" type="text" class="form-control" value="<%= `${event.name}` %>" readonly>
        <input name="name" type="hidden" value="<%= `${event.name}` %>">
    </fieldset>
    <fieldset>
        <span>File</span>
        <input name = "eventImage" type="file" class="form-control" id="name" placeholder="Event name..." required>
    </fieldset>
    <fieldset>
        <button type="submit" id="form-submit" class="btn">Add Event</button>
    </fieldset>
</form>

And then check your result

app.post("/upload", (req, res) => {
    console.log(req.body.name);
    console.log(req.file);
});

Directly console.log is outputting as undefined – Heet Mehta May 23 '20 at 06:48 — Heet Mehta, May 23 '20 at 06:48

How to send a read-only value from a form?

<%= `${event.name}` %>

2 Answers2