CODEWITHSUNDEEP
node.jsexpresspostbootstrap-modal
Solaris_9
Solaris_9

Reputation: 201

POST not working using express + bootstrap modal

at the client side, the modal is defined as:

<div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message to undefined</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="modal-body">
        <form>
            <div class="form-group">
                <label class="col-form-label" for="tag-name">Tag:</label>
                <input class="form-control" id="tag-name" type="text">
            </div>
            <div class="form-group">
                <label class="col-form-label" for="url-name">URL:</label>
                <input class="form-control" id="url-name" type="text">
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
                <button class="btn btn-primary" type="submit">Save</button>
            </div>
        </form>
    </div>
</div>

At the server side, the app.js is defined as:

var express = require('express');
...
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
...
var app = express();
...
app.use('/', indexRouter);
app.use('/users', usersRouter);

in the ./routes/index.js, I have this callback handler

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});


/* POST handler. */
router.post('/', function (req, res, next) {
  res.send('POST request to homepage');
  console.log('post received')
});

module.exports = router;

I'm expecting this result: when Save button is clicked, a POST request will be sent to the server side. and then "post received" will be printed in the console log. But in my implementation, nothing happened. Is there anything wrong?

Upvotes: 0

Views: 1603

Answers (2)

Ivan Vasiljevic
Ivan Vasiljevic

Reputation: 5718

As you can find in documentation you are missing attribute action and method in your form tag. So when you press Send browser don't know where to send data.

Could you try to add that two attributes like in example below?

<div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message to undefined</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="modal-body">
        <form method="localhost:3000" method="post">
            <div class="form-group">
                <label class="col-form-label" for="tag-name">Tag:</label>
                <input class="form-control" id="tag-name" type="text">
            </div>
            <div class="form-group">
                <label class="col-form-label" for="url-name">URL:</label>
                <input class="form-control" id="url-name" type="text">
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
                <button class="btn btn-primary" type="submit">Save</button>
            </div>
        </form>
    </div>
</div>

Upvotes: 1

Mauricio Irace
Mauricio Irace

Reputation: 41

If what you want is a synchronous form submit, you will need to tell what method you want (post or get) and where to send it. In your case, it may be something like

<form method="post" action="/">...</form>

Regards

Upvotes: 1

Related Questions