It's my second question today and I really want you to help again. I wrote a little program which contains a text field. When the user enters his phone number, I do some instructions to finally calculate a certain parameter and I want to show the final result of my program on a modal window just after clicking on the submit button. It's simple I think but I am really newer in programmation, that's why I find many difficulties. I wrote my program with node js (but no using template ! So the program is awful) but my question is mainly related to html I think. This my program :
var express = require('express'),
request = require('request'),
bodyParser = require('body-parser');
var app = express();
function createMainPage (req, res, msg) {
res.setHeader('Content-Type', 'text/html; charset=utf-8');
var result = '<html><head><script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>';
result += '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">';
result += '<link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.min.css">';
result += '<title> Demo </title>';
result += '</head><body><br /><br /><br /><div class="container">';
result += '<form class="form-horizontal" method="post"><fieldset><legend> Demo </legend>';
result += '<br /><h2><center>Please enter your Phone Number</center></h2> <br /> <br />';
result += '<div class="col-lg-2 col-lg-offset-5">';
result += '<input type="text" class="form-control" id="inputphonenumber" name="inputphonenumber"placeholder="+33XXXXXXXXX"></div>';
result += '</fieldset></div><br/><p style="text-align:center; font-weight:700; font-size:1.2em;">' + msg + '</dialog></p><br /><br /><br />';
//
//msg here is the parameter that i want to show on a modal windows after click on submit button
//
result += '<div class="form-group"><div class="col-lg-10 col-lg-offset-6">';
result += '<button type="reset" class="btn btn-default">Cancel</button>';
result += '<button type="submit" class="btn btn-primary">Submit</button></form>';
result += '<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>';
result += '</body></html>';
res.send(result);
}
app.set('port', (process.env.PORT || 8080)); // cannot force 80
app.use(bodyParser.urlencoded({extended: false}));
app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res, next) {createMainPage(req, res, "")
});
app.post('/', function(req, res, next) {
var myText = req.body.inputphonenumber;
//......
// I do some operations to finally get the parameter "message"
//......
createMainPage(req, res, customMessage);}
app.listen(app.get('port'), function() {
console.log('userDetails Node app is running on port',
app.get('port'));
});
I'd start simple without JS. When your form is submitted, render a page that just shows your parameter.
Then, add the modal markup to that page:
After that, attach a jQuery submit listener to your form: