编辑保存表单数据

最新推荐文章于 2022-04-14 16:46:49 发布

yinhe272680158

最新推荐文章于 2022-04-14 16:46:49 发布

阅读量145

点赞数

分类专栏： Java 文章标签： Ajax JavaScript XHTML CSS HTML ViewUI

Java 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>编辑保存表单</title>
<style type="text/css">
body{
	font-size:12px;}
.editdiv{
	border:solid 1px #F00;
	background-color:#FFF;
	width:300px;
	height:200px;
	display:inline
	}
#data_area{
	border:solid 1px #999}
label{}
</style>
<script type="text/javascript">
function edit(but){
	var myform=document.getElementsByName("myform")[0];
	/**
	but.value=but.value=='编辑'?'保存':'编辑';
	for(var i=0;i<myform.elements.length;i++){
			var el=myform.elements[i];
			var tem_1=el.style.display;
			el.style.display=el.nextSibling.style.display;
			el.nextSibling.style.display=tem_1;
			}
			*/
	
	if(but.value=='编辑'){
		for(var i=0;i<myform.elements.length;i++){
			myform.elements[i].style.display="inline";
			myform.elements[i].value=myform.elements[i].nextSibling.innerHTML;
			myform.elements[i].nextSibling.style.display="none";
			}
		but.value='保存';
		}else{
			for(var i=0;i<myform.elements.length;i++){
			myform.elements[i].style.display="none";
			myform.elements[i].nextSibling.innerHTML=myform.elements[i].value;
			myform.elements[i].nextSibling.style.display="inline";
			}
			but.value='编辑';
			myform.submit();
			}
	}
</script>

</head>

<body>
<div id="data_area">
<form name="myform" action="这里是你提交的保存地址" method="get" target="tempframe">
	<span><label for="username">用户名：</label><input id="username" name="username" style="display:none" type="text" value="TOM"/><span>TOM</span></span><br />
    <span><label for="sex">性&nbsp;&nbsp;&nbsp;&nbsp;别：</label><select  id="sex" name="sex" style="display:none">
    <option value="男" selected="selected">男</option>
    <option value="女">女</option>
    </select><span>男</span></span><br />
    <span><label for="email">邮&nbsp;&nbsp;&nbsp;&nbsp;箱：</label><input  id="email" name="email" type="text" style="display:none" value="admin@163.com"/><span>admin@163.com</span></span><br />
    </span>

<br />
</form>
<input name="editbut" type="button" value="编辑" οnclick="edit(this)" />
</div>
<iframe name="tempframe" style="display:none"></iframe>
</body>
</html>

内容数据填充自己填写，保存后，默认会提交数据到form指定地址，隐藏IFRAME保存，也算是无刷新吧，必须用AJAX的话，再告诉我吧