当点击一个表单提交button时,启动一个远程引导模式,然后远程模式内容显示表单数据?

我很难find一种方法来实现这一点。

我正在使用Node.js,Bootstrap 3,并表示

我想从一个表单页面开始。 当用户填写表单时,他们点击提交。 在这里,我想发射一个远程模式。 (从常规链接或button完成此操作无困难。)

这启动了一个职位。 那么我怎样才能启动远程模式,并将表单数据从post传递给它,这样一个带有答案的新的远程页面就可以显示在原始表单页面的模式窗口中。

这里是我有的代码:

forms翡翠(cover-form.jade):

html head meta(name="viewport" content="width=device-width, initial-scale=1.0") title= title link(href="/stylesheets/coverform_custom.css" rel="stylesheet") body .modal.fade(id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true") .modal-dialog.wide-modal .modal-content form.form-horizontal(id="coverform" name="coverform" method="post" action="") .LoginBox.LoginText fieldset.animated.fadeInUp // Form Name legend.LoginText  Cover Strategy // Text input .form-group label.col-xs-4.control-label(for='symbol') Stock Ticker: .col-xs-5 input#symbol.form-control.input-xs(type='text', name='symbol', placeholder='example: AAPL', autofocus, required) span.help-block Enter Stock Symbol (all capitals) // Text input // Select Basic .form-group label.col-xs-4.control-label(for='optiondate') Option Date: .col-xs-5 select#optiondate.form-control(name='optiondate' required) - for opdate in OptionDates option(value="#{opdate.OptionDate}") #{moment(opdate.OptionDate).format('dddd, MMMM Do, YYYY')} span.help-block Date the option closes. .form-group label.col-xs-4.control-label(for='strikeprice') Strike Price: .col-xs-5 input#strikeprice.form-control.input-xs(type='number', name='strikeprice', placeholder='example: 100.00', pattern="[0-9]+([\.|,][0-9]+)?", min="0", step="0.50", required) span.help-block Strike price of the option. // Text input .form-group label.col-xs-4.control-label(for='optionprice') Option Selling Price: .col-xs-5 input#optionprice.form-control.input-xs(type='number', name='optionprice', placeholder='example: .45', pattern="[0-9]+([\.|,][0-9]+)?", min="0", step="0.05", required) span.help-block Price the option is selling for. // Button .form-group label.col-xs-4.control-label(for='submit') .col-xs-4 button#submit.btn.btn-primary(name='submit' type='submit') Submit script(src='/javascripts/jquery-2.0.3.min.js') script(src='/javascripts/bootstrap.min.js') 

远程模态Jade(尚未引用任何表单数据)answer.jade:

 html body .modal-header button(type="button" class="close" data-dismiss="modal" aria-hidden="true")× h4.modal-title(id="myModalLabel") This Is An Awesome Title .modal-body p This Body Is Great .modal-footer button.btn.btn-default(data-dismiss="modal") Close 

路由的app.js:

 ... app.get('/', routes.index); app.get('/cover', cover.coverForm); app.post('/cover', cover.doCover); ... 

cover.js:

 exports.doCover = function(req, res) { var mystockdata = []; console.log("Here is the symbol I got: " + req.body.symbol); StockPrices.find({ Symbol: req.body.symbol }) .sort('Date') .exec(function(err, stockdata) { if (!err) { stockdata.forEach(function(stockdata) { mystockdata.push({ "MarketDate": stockdata.Date, "Open": stockdata.Open, "High": stockdata.High, "Close": stockdata.Close, "Volume": stockdata.Volume }); }); console.log("Here is the stock Data: " + stockdata); } else { console.log(err); } res.render('answer', {}); }); }; 

所以我的问题真的是如何路由这个,所以点击提交cover-form.jade我可以执行一个引导模式,并使用doCover函数来启动渲染模式内容的文章?

也许我正在接近这个完全错误的,不知道如何完成我想要的。

任何帮助不胜感激。

能够使其工作,但不能远程

引导3button默认提交types,所以我用一个标准的一个发射一个模式…

 button#submit.btn.btn-primary(name='submit' data-toggle="modal" data-target="#myModal") Submit 

然后,我把标准Bootstrap模态的东西放在我的页面顶部:

 .modal.fade(id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true") .modal-dialog.wide-modal .modal-content .modal-header button.close(type='button', data-dismiss='modal', aria-hidden='true') × h4.myModalLabel.modal-title | #{title} .modal-body #container(style="width:90%; height:400px;") .modal-footer button.btn.btn-primary(type='button', data-dismiss='modal') Close 

然后真正的技巧是检查从app.js发起的路线是一个post还是一个get。 如果这是一个意思表单提交,那么我用jQuery来显示模式。 否则,它会尝试显示,但立即返回到表单。 我通过检查仅在post函数(strikeprices)上呈现的variables来做到这一点:

 script. $(document).ready(function(){ if(#{strikeprices}){ $('#myModal').modal('show') } $('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); }); });