遇到一个小需求,
即得到一个页面某一块的html源码, 这段html中包涵了一个表单, 且表单的值是被编辑过的,
直接用innerHTML(或jquery的html()方法)即可得到, 但各个浏览器表现不统一,表单的值有的原始值, 有的是最新值所以写了下面一个小方法来搞定
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>复制html</title>
<meta name="author" content="sanshizi" />
<style>
*{font-size:14px;}
body{padding:20px;height:500px;}
</style>
<script type="text/javascript" src="jQuery.js"></script>
</head>
<body onclick="get()">
<div id="data">
<input type="text" name="t1" value="1" />
<input type="text" name="t2" value="2" />
<input type="text" name="t3" value="3" />
<select name="age">
<option value="1">1</option>
<option selected value="2">2</option>
<option value="3">3</option>
</select>
<input type="checkbox" name="ha" value="fff" />
<input type="checkbox" name="ha" value="zzz" />
<input type="checkbox" name="ha" value="ccc" />
<input type="checkbox" name="ha" value="xxx" />
<input type="radio" name="dd" value="1" />
<input type="radio" name="dd" value="2" />
<input type="radio" name="dd" value="3" />
<input type="radio" name="dd" value="4" />
<textarea cols="40" rows="3">asdfasfsf</textarea>
</div>
<script>
function get(){
//搞定 type=text, 同时如果checkbox,radio,select>option的值有变化, 也绑定一下, 这里忽略button
$("input,select option").each(function(){
$(this).attr('value',$(this).val());
});
//搞定 type=checkbox,type=radio 选中状态
$("input[type='checkbox'],input[type='radio']").each(function(){
if($(this).attr('checked'))
$(this).attr('checked',true);
else
$(this).removeAttr('checked');
});
//搞定select选中状态
$("select option").each(function(){
if($(this).attr('selected'))
$(this).attr('selected',true);
else
$(this).removeAttr('selected');
});
//搞定 textarea
$("textarea").each(function(){
$(this).html($(this).val());
});
alert($('#data').html())
}
</script>
</body>
</html>
分享到：
相关推荐
这个"jquery单击功能按钮复制相同表单内容特效代码下载"的资源显然是一个利用jQuery实现的特定功能，即当用户单击一个按钮时，能够复制表单内的所有内容并显示为一个新的相同表单。 首先，我们需要了解jQuery的核心...
这个压缩包"tfForm"包含了一个基于layui的后台表单生成器，允许开发者快速创建和编辑表单，同时支持条件判断，大大提升了开发效率。 layui的核心组件包括模块化（layui.use）、元素操作（layui.$）、表格（layui....
这个“ry复制表单元素代码.rar_airplanebqt_ry复制表单元素代码”压缩包提供了一个使用jQuery实现的解决方案，允许用户通过单击按钮快速复制表单内的元素内容。下面将详细介绍这个功能的实现原理和相关知识点。 ...
本主题聚焦于使用jQuery来动态地复制表单元素，尤其是`tr`（表格行）以便用户可以添加多行输入，同时实现信息的递交。这在创建如订单、清单或者用户填写多项数据的场景中特别实用。 首先，我们需要了解`tr`元素在...
- 在用户界面设计中，有时需要提供复制表单字段的功能，比如增加新的输入行。这通常通过监听某个按钮的点击事件实现，然后调用`clone()`方法。 - 复制后，可能需要清除或调整新复制元素的一些属性，如ID（避免重复...
html，表单自动填充，避免重复性工作，一个一个填写，复制粘贴到文本域，自动识别对应表单属性，复制之后自动识别，点击提交就行了。超级简单，有什么不懂的可以直接私信问我。
"js excel 批量复制数据到 html（新）"这个主题涉及到的是使用JavaScript技术将Excel文档中的数据高效地导入到HTML页面中，这对于数据分析展示、网页表单填充等场景非常实用。下面我们将详细探讨这一技术实现的关键...
本资源“jquery动态复制或者删除input表单特效代码下载.zip”提供了利用jQuery实现的一种实用功能，即动态地在网页上复制或删除input表单元素，这对于创建动态、交互性强的用户界面非常有用。 首先，jQuery的选择器...
总结来说，"jQuery复制表单元素代码.zip"中的内容很可能是关于如何利用jQuery高效地复制和管理表单元素，同时处理相关的事件和数据提交。通过熟练掌握这些技巧，开发者能够构建更灵活、响应式的前端应用。
本篇文章将详细讲解一个特定的jQuery插件——用于显示、隐藏和复制表单中密码字段的插件。 首先，表单中的密码字段通常以星号或圆点显示，以保护用户的隐私。然而，在某些情况下，用户可能需要查看或复制他们输入的...
最普通最常用最一般的方法就是用submit type..看代码： 复制代码代码如下: <form name=”form” method=”post” action=”#”> <input type=”submit” name=”submit...第三种是使用链接来提交表单，用到了
以下是一个基础示例，展示了如何通过点击按钮来触发一个函数，该函数将一个表单的文本框值复制到另一个表单的文本框中。 ```html <html> 表单数据传递示例 function ok() { document.form2.textfield2.value ...
- **`onChange`**：当表单元素的内容发生变化时触发，例如选择不同的选项或更改文本框中的值。 - **`onFocus`**：当表单元素获得焦点时触发，可用于高亮显示或提供输入建议。 - **`onReset`**：当重置表单时触发...
1 method是指定数据如何发送到服务器的一个属性 2 只...比如说有2个页面，a.htm和b.asp，你想将a.htm页面表单中的值传递给b.asp页面。 那么在a.htm中就会有如下的表单代码： 复制代码代码如下: <form id=”form1″
3. 交换值：将一个输入框的值复制到另一个输入框，同时保留原始值的副本，以避免交换过程中的数据丢失。 4. 更新界面：使用`.value = newValue`（原生JS）或`.val(newValue)`（jQuery）更新输入框的显示值。 这个...
"MAC表单输入样式（仿win）"这个项目旨在为用户提供一个模仿Mac操作系统风格的表单输入体验，这种风格通常被认为简洁且易用。在描述中提到了几种格式化的十六进制颜色代码输入方式，以及对非16进制输入的错误提示...
该功能用于禁止用户通过右键进行操作，如复制、粘贴等，常用于保护网页内容。 **实现代码示例：** ```html ``` **解析：** 1. **事件监听**：`oncontextmenu`、`ondragstart` 和 `onselectstart` 分别用于监听鼠标...