`

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

 
阅读更多

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

分享到:
评论

相关推荐

    jquery_dialog jquery_dialog jquery_dialog

    《jQuery Dialog 深度解析与实践应用》 在Web开发领域,jQuery Dialog是一款非常流行的JavaScript库,用于创建可交互的对话框。它基于jQuery框架,提供了丰富的功能和灵活的定制选项,使得开发者能够轻松地在网页上...

    仿 JQuery Dialog 简洁登录页面

    【标题】"仿 JQuery Dialog 简洁登录页面"是一个基于JQuery Dialog组件设计的简单登录界面,旨在提供用户友好的交互体验。JQuery Dialog是jQuery UI库中的一个功能,它允许开发者创建可自定义的弹出对话框,用于显示...

    jQueryDialog 插件使用范例

    最后,`html5.js`是为了确保在不支持HTML5的浏览器中,也能正常运行jQueryDialog。这个文件可能包含了对旧版浏览器的一些兼容性修复,例如添加HTML5新特性的polyfill。 使用jQueryDialog插件,开发者可以方便地实现...

    jquery dialog简单实现插件

    jQuery Dialog 是一个非常流行的JavaScript库,它为网页提供了一种优雅的方式来创建弹出式对话框。这个插件是基于jQuery框架构建的,主要用于创建模态或非模态的窗口,通常用于显示警告、确认信息或者作为用户交互的...

    jQuery Dialog 弹出层对话框插件(可加载url地址)

    在本文中,我们将深入探讨jQuery Dialog的使用方法、功能特性以及如何实现加载URL地址。 ### 1. jQuery Dialog基础 jQuery Dialog是基于jQuery和jQuery UI库构建的,它提供了一种模态或非模态的对话框,可以用来...

    JQuery Dialog

    本篇文章将深入探讨jQuery Dialog的使用方法、特性以及在实际项目中的应用。 ### 1. jQuery Dialog 基础 - **初始化 Dialog**:在HTML中,我们需要一个隐藏的`&lt;div&gt;`元素作为Dialog的基础。通过调用`$.fn.dialog()...

    jQuery dialog对话框插件点击弹出对话框代码

    jQuery dialog对话框插件是jQuery UI库中的一个核心组件,用于创建可自定义的模态或非模态对话框。这个插件提供了丰富的功能,包括拖动、调整大小、自动定位以及多种主题样式,使开发者能够轻松地在网页中添加交互式...

    jquery ui Dialog 添加最大最小化按钮控制

    jQuery UI Dialog组件默认情况下只提供关闭按钮,但开发者经常需要增加更多的功能,如最大化和最小化,以便用户能更好地管理和操作对话框。这个主题提供了两种实现方法: 1. **替换UI Close按钮**: 在这种方法中...

    jquery dialog弹出层

    在实际使用jQuery Dialog时,开发者首先需要在页面中引入jQuery库和jQuery UI库,然后通过jQuery选择器找到目标元素,并调用`.dialog()`方法来初始化Dialog。Dialog的配置项非常丰富,包括但不限于宽度、高度、是否...

    JQuery dialog

    **jQuery Dialog 深度解析** jQuery Dialog 是 jQuery UI 库中的一个组件,它提供了一种弹出式对话框的功能,常用于展示警告、确认、信息...结合实际的项目需求,不断探索和实践,将能充分发挥 jQuery Dialog 的潜力。

    jQuery Dialog

    jQuery Dialog jQuery DialogjQuery DialogjQuery DialogjQuery DialogjQuery DialogjQuery Dialog

    jquery dialog 用法

    jQuery Dialog是jQuery UI库中的一个核心组件,它提供了一种优雅的方式来创建模态或非模态对话框。对话框在Web应用中广泛用于显示警告、确认消息、详细信息或者进行表单输入等交互操作。本篇文章将深入探讨jQuery ...

    jqueryDialog

    在IT领域,jQuery Dialog是一种广泛使用的插件,它允许开发者创建弹出对话框,用于提示、警告、确认或提供交互式表单等。这个特定的知识点聚焦于如何将原本的jQuery Dialog功能转换成类似JavaScript内置的`alert`、`...

    18、jQuery弹出对话框jQuery插件Dialog

    jQuery Dialog是jQuery UI库中的一个核心组件,它提供了一种优雅的方式来实现弹出对话框功能。这个插件允许开发者创建可自定义的模态或非模态窗口,用于显示警告、确认信息、输入数据或者展示丰富的内容。在网页交互...

    jquery-dialog demo

    3. **初始化 Dialog**:使用 JavaScript 或 jQuery 调用 `.dialog()` 方法,设置相关参数,如宽度、高度、模态状态等。 4. **打开和关闭**:根据需求调用 `.dialog('open')` 和 `.dialog('close')` 方法来控制 ...

    JQuery UI Dialog使用样例

    使用 jQuery 的 `.dialog()` 方法初始化 Dialog。你可以设置各种选项,如宽度、高度、是否模态、关闭按钮等。 ```javascript $(function() { $("#dialog").dialog({ autoOpen: false, // 默认不自动打开 ...

    jQuery.dialog.js网页弹出对话框美化特效插件

    无论是在大型项目中作为基础组件,还是在小型应用中快速构建对话框,jQuery.dialog.js都能提供强大的支持,帮助开发者打造更具吸引力的网页应用。通过深入理解和灵活运用,开发者可以充分利用这个插件,提升网页的...

    jQuery通用dialog对话框 popup提示信息窗口插件demo

    本文将深入探讨jQuery通用Dialog插件的原理、使用方法以及如何通过源码分析增强自己的前端开发技能。 **jQuery Dialog 插件简介** jQuery Dialog是jQuery UI库中的一个组件,它提供了一种灵活的方式来创建弹出式...

    Jquery中dialog属性

    Jquery中dialog属性的小计,详细介绍dialog的使用

Global site tag (gtag.js) - Google Analytics