问题描述
我有以下对话框:
和他的 JS:
//
当我点击 x,即
<a class='close' data-dismiss='modal'>×</a>
时,表单关闭,让我留在当前页面,而我想去主页.
还有添加标签"按钮,也就是
什么都不做,点击键盘上的 jaust ENTER 完成这项工作,我想点击添加标签"也一样.我对 JS 和前端编程不是很熟练,所以欢迎任何帮助.
解决方案 您的提交按钮在表单标签之外.
它不知道要提交什么表单.
使用 javascript 将其连接到表单.
<div class='modal-body'><form id="modal-form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post"><输入名称=某物"值=某值"/></表格></div><div 类='模态页脚'><a id="modal-form-submit" class='btn btn-primary' href="#">提交</a></div><脚本>$('#modal-form-submit').on('click', function(e){//我们不希望它充当链接所以取消链接动作e.preventDefault();//查找表单并提交$('#modal-form').submit();});</脚本>
至于应该链接到主页的 <a class='close' data-dismiss='modal'>×</a>
为什么不直接删除data-dismiss='modal'
并使用标准 href='home.html'
使其像普通链接一样工作.
这里有一些额外的代码可以为您指明使用 AJAX 提交表单的正确方向:
//因为我们想要同时按下 'Enter' 和点击按钮来工作//我们将订阅提交事件,该事件由两者触发$('#modal-form').on('提交', function(){//序列化表单并发布到服务器$.post("/yourReceivingPage", $(this).serialize(), function(){//当它执行时,我们知道表单已提交//给动画一些时间,//让我们在重定向前添加 200 毫秒的延迟var延迟= 200;设置超时(函数(){window.location.href = 'successUrl.html';}, 延迟);//隐藏模态$("#my-modal").modal('hide');});//停止正常的表单提交返回假;});
I have the following dialog form :
<div class='modal' id='myModal'>
<div class='modal-header'>
<a class='close' data-dismiss='modal'>×</a>
<h3>Add Tags</h3>
</div>
<div class='modal-body'>
<form accept-charset="UTF-8" action="/tagging" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="mCNvbvoPFWhD7SoJm9FPDh+BcRvCG3d16P+oOFACPuc=" /></div>
<input id="tags_string" name="tags_string" type="text" value="luca" />
<input id="id" name="id" type="hidden" value="4f1c95fd1d41c80ff200067f" />
</form>
</div>
<div class='modal-footer'>
<div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div>
</div>
</div>
and his JS :
<script>
//<![CDATA[
$(function() {
// wire up the buttons to dismiss the modal when shown
$("#myModal").bind("show", function() {
$("#myModal a.btn").click(function(e) {
// do something based on which button was clicked
// we just log the contents of the link element for demo purposes
console.log("button pressed: "+$(this).html());
// hide the dialog box
$("#myModal").modal('hide');
});
});
// remove the event listeners when the dialog is hidden
$("#myModal").bind("hide", function() {
// remove event listeners on the buttons
$("#myModal a.btn").unbind();
});
// finally, wire up the actual modal functionality and show the dialog
$("#myModal").modal({
"backdrop" : "static",
"keyboard" : true,
"show" : true // this parameter ensures the modal is shown immediately
});
});
//]]>
</script>
When I click x, which is <a class='close' data-dismiss='modal'>×</a>
, the form close down leaving me on the current page, while I'd like to go on the hamepage.
Also "Add tag" botton, which is <div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div>
don't do nothing, while clicking jaust ENTER on the keyboard do the job and I'd like clicking "Add tag" did the same.
I'm not so skilled on JS and front-end prog, so any help is welcome.
解决方案 Your submit button is outside of the form tags.
It won't know what form to submit.
Use javascript to connect it to the form.
<div class='modal-body'>
<form id="modal-form" accept-charset="UTF-8" action="/tagging" data-remote="true" method="post">
<input name="something" value="Some value" />
</form>
</div>
<div class='modal-footer'>
<a id="modal-form-submit" class='btn btn-primary' href="#">Submit</a>
</div>
<script>
$('#modal-form-submit').on('click', function(e){
// We don't want this to act as a link so cancel the link action
e.preventDefault();
// Find form and submit it
$('#modal-form').submit();
});
</script>
As for the <a class='close' data-dismiss='modal'>×</a>
that is supposed to link to the homepage, why not just remove the data-dismiss='modal'
and make it act like a normal link using a standard href='home.html'
.
Here is some additional code to point you in the right direction for using AJAX to submit the form:
// Since we want both pressing 'Enter' and clicking the button to work
// We'll subscribe to the submit event, which is triggered by both
$('#modal-form').on('submit', function(){
//Serialize the form and post it to the server
$.post("/yourReceivingPage", $(this).serialize(), function(){
// When this executes, we know the form was submitted
// To give some time for the animation,
// let's add a delay of 200 ms before the redirect
var delay = 200;
setTimeout(function(){
window.location.href = 'successUrl.html';
}, delay);
// Hide the modal
$("#my-modal").modal('hide');
});
// Stop the normal form submission
return false;
});
这篇关于Twitter Bootstrap 2 模态表单对话框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!