我有以下对话框:
<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>
和他的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>
当我点击 x 时,即<a class='close' data-dismiss='modal'>×</a>
,表单关闭,让我留在当前页面,而我想进入主页。
还有“添加标签”按钮,即<div class='btn btn-primary'><input name="commit" type="submit" value="Add tag" /></div>
不要执行任何操作,同时单击键盘上的 jaust ENTER 执行此操作,我想单击“添加标签”执行相同的操作。
我对 JS 和前端编程不太熟练,所以欢迎任何帮助。
您的提交按钮位于表单标签之外。
它不知道要提交什么表格。
使用 javascript 将其连接到表单。
<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>
至于<a class='close' data-dismiss='modal'>×</a>
应该链接到主页,为什么不直接删除data-dismiss='modal'
并使用标准使其像普通链接一样工作href='home.html'
.
下面是一些附加代码,可以为您指明使用 AJAX 提交表单的正确方向:
// 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;
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)