CODEWITHSUNDEEP
htmlnode.jsforms
divinelemon
divinelemon

Reputation: 2097

How to make a Normal Input Div Post Data to a Server

I know how to do a POST html form. However, I have a weird input system right now, and I am confused on how to switch to an HTML Post form. Here is the HTML code:

<div class="container-fluid" id='room-create' hidden>
    <div class="row">
        <div class="col-12 h2 mt-5 text-center">Create Room</div>
    </div>
    
    <div class="row mt-2">
        <div class="col-12 text-center">
            <span class="form-text small text-danger" id='err-msg'></span>
        </div>

        <div class="col-12 col-md-4 offset-md-4 mb-3">
            <label for="room-name">Room Name</label>
            <input type="text" id='room-name' class="form-control rounded-0" placeholder="Room Name">
        </div>

        <div class="col-12 col-md-4 offset-md-4 mb-3">
            <label for="your-name">Your Name</label>
            <input type="text" id='your-name' class="form-control rounded-0" placeholder="Your Name">
        </div>

        <div class="col-12 col-md-4 offset-md-4 mb-3">
            <button id='create-room' class="btn btn-block rounded-0 btn-info">Create Room</button>
        </div>

        <div class="col-12 col-md-4 offset-md-4 mb-3" id='room-created'></div>
    </div>
</div>

I already tried switching the first div to a form, but to no avail. How would I make the switch to have this post data to my server ("/")?

What I already tried:

<form action="/" method="post" class="container-fluid" id='room-create' hidden>
<!--- other code here ---->
</div>
(I also did the same switch in the second div, the div with `class="row mt-2"`)

Any help is appreciated!

Thanks so much

Upvotes: 2

Views: 392

Answers (2)

divinelemon
divinelemon

Reputation: 2097

I ended up wrapping the entire collection of elements (including the outer divs) in a form. However, it was actually the id of the submit button that was messing it up. I am still not sure why this happened, but for some odd reason, when I remove the id it works.

Upvotes: 2

yochanan sheinberger
yochanan sheinberger

Reputation: 735

Just wrap the relevant divs who contain the inputs and the button with form tags. And add type attribute with submit value to the button .

<form action="/" method="post">
        <div class="col-12 col-md-4 offset-md-4 mb-3">
            <label for="room-name">Room Name</label>
            <input type="text" id='room-name' class="form-control rounded-0" placeholder="Room Name">
        </div>

        <div class="col-12 col-md-4 offset-md-4 mb-3">
            <label for="your-name">Your Name</label>
            <input type="text" id='your-name' class="form-control rounded-0" placeholder="Your Name">
        </div>

        <div class="col-12 col-md-4 offset-md-4 mb-3">
            <button type="submit" id='create-room' class="btn btn-block rounded-0 btn-info">Create Room</button>
        </div>
</form>

Upvotes: 0

Related Questions