通过ajax提交提交嵌套表单中的子表单，无需刷新页面
通过ajax提交提交嵌套表单中的子表单，无需刷新页面
提问于 2016-08-17 21:09:26
我正在尝试通过ajax-jquery提交一个子表单，在父表单中，这样它就不会刷新整个页面。代码为：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$(document).on('submit', '#form-2', function() {
var data = $(this).serialize();
$.ajax({
type : 'POST',
url : 'a2.php',
data : data,
success : function(data) {
$("#form-2").fadeOut(500).hide(function() {
$(".result").fadeIn(500).show(function() {
$(".result").html(data);
});
});
}
});
return false;
});
}) // document ready ends here;
</script>
</head>
<body>
<form action="a1.php" method="post" name="form-1" id="form-1">
<input type="text" name="f1" />
<input type="text" name="f2" />
<input type="text" name="f3" />
<input type="text" name="f4" />
<!-----form 2 ajax starts----->
<form method="post" name="form-2" id="form-2">
<input type="text" name="g1" />
<input type="submit" id="sf2">
</form><!-----form-2 ends----->
</form><!-----form-1 ends----->
</body>
</html>但它不起作用，它什么也做不了。我也用了-()，有什么帮助吗？我试图简单地在数据库中提交form-2值，其中form-1的一些下拉列表可以获得所有选项值。
回答 1
Stack Overflow用户
发布于 2016-08-17 21:41:34
您可以使用：
$(document).on('click', '#sf2', function(event) {
var g1 = $('#g1').val();
$.ajax({
type : 'POST',
url : 'a2.php',
data : {
g1: g1
},
success : function(data) {
$("#form-2").fadeOut(500).hide(function() {
$(".result").fadeIn(500).show(function() {
$(".result").html(data);
});
});
}
});
});并使用普通按钮：
<input type="text" name="g1" id="g1" />
<button type="button" id="sf2">Submit</button>这不是一个好的风格，尽管表单不应该嵌套。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38997593
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号