CODEWITHSUNDEEP
htmlnode.jsexpresshandlebars.js
Alex Antoine
Alex Antoine

Reputation: 63

Form post request is not returning necessary information

I'm trying to pull the information from this form but I am only able to do that with the TIME input box and the Count input box. I need ROOM as well as SESSION but when I send the post request I'm only getting information from TIME and COUNT. I think it has something to do with them being "options" and "input" but I'm not sure.

<form class="form-container"  method="POST">

            <div class="form-group">
                <label>Room</label>
                <select class="form-select" required aria-label="select example">
                {{#each room}}
                <option class="rooms" name="room">{{this.room}}</option>
                {{/each}}
                </select>
                <label>Session</label>
                <select class="form-select" required aria-label="select example">
                {{#each room}}
                    <option class="rooms" name="sessions">{{this.session_name}}</option>
                {{/each}}
                </select>
            </div>

            <div class="form-group">
                <label for="exampleInputPassword1">Time</label>
                <input type="time" name="count_time" class="form-control" id="exampleInputPassword1">
            </div>

            <div class="form-group">
                <label for="exampleInputPassword1">Count</label>
                <input type="number" name="room_counts" class="form-control" id="exampleInputPassword1" placeholder="Count">
            </div>

            <div class="button-container">
                  <button type="submit" class="btn btn-primary">Submit</button>
            </div>       
          
        </form>

This is the code that I'm using for the back end

app.post('/count', (req,res)=>{

    console.log(req.body);

    res.redirect('/count');

});

When I hit submit, this is what I get {count_time: '', room_counts:''}. I would appreciate your help in figuring out what is going on and how to fix it.

Upvotes: 0

Views: 40

Answers (1)

Đăng Khoa Đinh
Đăng Khoa Đinh

Reputation: 5411

In the form, the select field doesn't have the name, that's why you don't have the full object in the server. The rule is :

  • In the <select> tag, you need to add the name attribute
  • In the <option> tag, you need to add the value attribute

Here is my working code (I simplified the code for testing purpose) :

<html>

<head>

</head>

<body>
    <form class="form-container" method="POST" action="/count">

        <div class="form-group">
            <label>Room</label>
<!-- add "name" property in select -->
            <select name="room" class="form-select" required
                aria-label="select example">

<!-- add "value" property in option -->
                <option class="rooms" value="A">A</option>
                <option class="rooms" value="B">B</option>
            </select>
            <label>Session</label>
            <select name="sessions" class="form-select" required
                aria-label="select example">
                <option class="rooms" value="C">C</option>
                <option class="rooms" value="D">D</option>
            </select>
        </div>

        <div class="form-group">
            <label for="exampleInputPassword1">Time</label>
            <input type="time" name="count_time" class="form-control"
                id="exampleInputPassword1">
        </div>

        <div class="form-group">
            <label for="exampleInputPassword1">Count</label>
            <input type="number" name="room_counts" class="form-control"
                id="exampleInputPassword1" placeholder="Count">
        </div>

        <div class="button-container">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>

    </form>
</body>

</html>

In the server, I have the full object like this : { room: 'A', sessions: 'C', count_time: '22:01', room_counts: '1' }

Upvotes: 1

Related Questions