javascript的问题，高手请进

Question

<form action="" method="post">
<table>
<tr><td></td>用户名：<td><input type="text"></td></tr>
<tr><td></td>密码：<td><input type="text"></td></tr>
<tr><td></td>确认密码：<td><input type="text"></td></tr>
<tr><td></td>性别：<td><input type="text"></td></tr>
<tr><td></td>年龄：<td><input type="text"></td></tr>
<tr><td></td>地址：<td><input type="text"></td></tr>
<tr><td></td>提交：<td><input type="submit" value="保存"></td></tr>
</table>
</form>
我刚刚自己手敲的，如果有错误自己修改下
我的要求是在我点击保存按钮的时候，保存按钮value="编辑" type="button"，然后文本框都变为不可编辑状态，再点击的时候，编辑按钮value="保存" value="submit"，文本框都变为可以编辑的状态,input标签的name和id你们自己加，然后将写好的form表单和javascript都写给我，我只要运行可以，我就再追二十分，越快越好，着急用！

Answer 1

楼上的代码都有这个缺陷:
初次载入页面时，input框是可编辑或者不可编辑状态，在你点击提交后，不管怎么设置，因为页面重载，input框都会恢复成初次载入的状态，并且input框填写的内容都会清空。
如果提交的信息有误，比如用户名在数据库中没有找到或者用户名已被注册，要求重新提交，这时候你得全部重新填写，而不是保留其他内容只重新填写用户名。

还有就是你要想让页面载入时input是可编辑的，提交后变成不可编辑，再点击按钮后变成可编辑应该做不到。载入时不可编辑，点击按钮后变成可编辑，再提交后又变成可编辑倒是可以做到。但是绝大部分的网站都是我说的前一种情况，载入页面时input是可编辑的。还有根本没有必要为了这么简单的功能用jquery，这个js库的1.71min版本有91.6k，多了9万多字节的代码啊，就为了使用个选择器，影响页面打开速度，就用for循环遍历input节点好了。解决你的问题代码我都有，因为觉得你的要求有问题没贴。你测试过了大家给的代码再说吧。

Answer 2

用jquery实现起来比较方便：
<form action="" method="post">
<table id="inarea">
<tr><td>用户名：</td><td><input type="text"></td></tr>
<tr><td>密码：</td><td><input type="text"></td></tr>
<tr><td>确认密码：</td><td><input type="text"></td></tr>
<tr><td>性别：</td><td><input type="text"></td></tr>
<tr><td>年龄：</td><td><input type="text"></td></tr>
<tr><td>地址：</td><td><input type="text"></td></tr>
<tr><td>提交：</td><td><input type="button" id="Edit" value="编辑"><input type="button" id="Save" value="保存"></td></tr>
</table>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#Edit").click(function () {
$("#inarea input[type='text']").attr("disabled", false);
});
$("#Save").click(function () {
$("#inarea input[type='text']").attr("disabled", true);
});
});
</script>

Answer 3

按钮类型及value的切换，实际上这个完全可以换个思路，就是用2个按钮来做，一个隐藏一个显示，来回切换，这样比较方便，至于数据提交方面，你上面没提，所以这里不写了，具体代码：

<form action="" method="post" name="form1">
<table>
<tr><td>用户名：</td><td><input type="text"></td></tr>
<tr><td>密码：</td><td><input type="text"></td></tr>
<tr><td>确认密码：</td><td><input type="text"></td></tr>
<tr><td>性别：</td><td><input type="text"></td></tr>
<tr><td>年龄：</td><td><input type="text"></td></tr>
<tr><td>地址：</td><td><input type="text"></td></tr>
<tr><td>提交：</td><td><input type="submit" value="保存" id="btn_save" onclick="return(save_form(document.form1));"><input type="button" value="编辑" id="btn_edit" onclick="edit_form(document.form1);" style="display: none;"></td></tr>
</table>
</form>

<script type="text/javascript">
function save_form(s_form){
for(var i=0; i<s_form.length; i++){
if(s_form[i].type =='text'){
s_form[i].disabled ='true';
}
}
document.getElementById('btn_save').style.display ='none';
document.getElementById('btn_edit').style.display ='';
return false;
}
function edit_form(s_form){
for(var i=0; i<s_form.length; i++){
if(s_form[i].type =='text'){
s_form[i].disabled ='';
}
}
document.getElementById('btn_save').style.display ='';
document.getElementById('btn_edit').style.display ='none';
}
</script>

追问

特效是做出来了，我的action不能用了，麻烦你再给我写点吧，坐等，收到后一小时内就采纳，并且会追加分的！

追答

不太明白你的意思，提交数据这里你不是用xmlhttp吗？如果不是的话，那你把上面代码中的 return false; 去掉应该就可以执行你原来的action了。

Answer 4

其实最好用jquery
用jquery实现起来比较方便：
<form action="" method="post">
<table id="inarea">
<tr><td>用户名：</td><td><input type="text"></td></tr>
<tr><td>密码：</td><td><input type="text"></td></tr>
<tr><td>确认密码：</td><td><input type="text"></td></tr>
<tr><td>性别：</td><td><input type="text"></td></tr>
<tr><td>年龄：</td><td><input type="text"></td></tr>
<tr><td>地址：</td><td><input type="text"></td></tr>
<tr><td>提交：</td><td><input type="button" id="Edit" value="编辑"><input type="button" id="Save" value="保存"></td></tr>
</table>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#Edit").click(function () {
$("#inarea input[type='text']").attr({"disabled":"disabled"});
});
$("#Save").click(function () {
$("#inarea input[type='text']").removeAttr("disabled");
});
});
</script>
这样保证没问题 采纳哦！