0

这是我今天的第二个问题，我真的希望你再次提供帮助。我写了一个包含文本字段的小程序。当用户输入他的电话号码时，我会执行一些指令来最终计算某个参数，并且我想在单击提交按钮后在模态窗口上显示我的程序的最终结果。我认为这很简单，但我在编程方面真的很新，这就是我发现很多困难的原因。我用node js编写了我的程序（但没有使用模板！所以程序很糟糕）但我的问题主要与我认为的html有关。这是我的程序：

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'));
});
4

1 回答 1

0

如果没有 JS，我会从简单开始。提交表单后，呈现一个仅显示您的参数的页面。

然后，将模态标记添加到该页面：

<div id="my_modal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal Title</h4>
      </div>
      <div class="modal-body"></div>
    </div>
  </div>
</div>

之后，将 jQuery 提交侦听器附加到您的表单：

$('.form-horizontal').submit(function() {
  // do an AJAX get request for the page that's showing your parameter
  $.get(that_pages_url), function (data) {
    // set the modal's body to what the get request is returning
    $('#my_modal .modal-body').html(data);
    // show it
    $('#my_modal').modal('show');
  }

  // don't submit the form as normal, otherwise the user will be redirected
  return false;
});
于 2015-06-11T14:14:45.963 回答