>我想在调用表单的同一选项卡中加载表单的操作。 我有一个主页如下:
<script>
$(function() {
$( "#tabs" ).tabs(
);
});
</script>
<body>
<div id="tabs">
<ul>
<li><a href="page1.php">page1</a></li>
<li><a href="page2.php">page2</a></li>
</ul>
</div>
</body>
在第1页.php和第2页.php我有不同的表格。例如.php在第 1 页中:
<form name="form1" id="form1" action="page1.php" method="post">
/* form components */
</form>
基本上,表单重新加载页面本身并在下面填充一个div。如何在选项卡上进行提交(并刷新它)?现在通过提交表单 page1.php 在新窗口中加载。我尝试使用我在堆栈溢出中搜索的这个片段,但没有运气
<script>
$(document).on('submit', '#form1', function() {
var data = $(this).serialize();
var actionUrl = $(this).attr('action');
$.post(actionUrl, data, function(response) {
/* do something when form submittal completed*/
})
return false; /* prevent browser default submit and redirect*/
});
</script>
>通过在从选项卡加载的页面上添加以下代码来解决此问题
$('#formID').on('submit', function(e){
e.preventDefault();
var formSrc = $(this).attr('action');
var formMethod = $(this).attr('method');
var formData = $(this).serialize();
$.ajax({
url: formSrc,
type: formMethod,
data: formData,
success: function(data){
//work with returned data from requested file
$("#divID").html(data);
}
});
});