jQuery dialog form 提交后台不能取值的解决办法

最新推荐文章于 2023-03-23 17:20:19 发布

xiaojianhx

最新推荐文章于 2023-03-23 17:20:19 发布

阅读量443

点赞数

分类专栏： HTML & JS & CSS 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/xiaojianhx/article/details/84493625

版权

HTML & JS & CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.众所周知，被jQuery dialog处理后，相应的模块是加到body上的，不在form里，提交form的时候，后台获取不到数据。

2.解决方法：

利用隐藏变量，即：在form里定义隐藏变量，dialog响应事件后，为隐藏变量赋值，这样form提交，可将隐藏变量带到后台。

3.例：

<html>
 <head>
  <script type="text/javascript" src="jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
  <link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>
 </head>
 <body>
<script>
 $(function(){
	$('#dialogDiv').dialog({
		modal:true,
		autoOpen:false,
		width: 300,
		height:216,
		resizable:false,
		position:"center",
		buttons: {
			'确定': function() {
				$('#id').val($('#dialogId').val());
				$('#name').val($('#dialogName').val());
				$(this).dialog('close');
			},
			'取消': function() {
				$(this).dialog('close');
			}
		}
	});
	$.openDialog = function() {
		$('#dialogDiv').dialog('open');
	}
	$.show = function() {
		alert('form中id的值:' + $('#mainForm #id').val());
		alert('form中name的值:' + $('#mainForm #name').val());
		alert('form提交后,后台可获取id、name的值');
	}
 })
</script>
<form id="mainForm">
	<input type="hidden" id="id"/>
	<input type="hidden" id="name"/>
	<input type="button" value="打开对话框" onclick="$.openDialog()"/>
	<input type="button" value="查看" onclick="$.show()"/>
	<div id="dialogDiv" title="test">
		<input type="text" id="dialogId"/><br/>
		<input type="text" id="dialogName"/>
	</div>
</form>
 </body>
</html>

4.问：如果内容很多，要定义多个隐藏变量？

答：那不适合用dialog