JavaScript实现当前页面显示文本框中输入的信息
要求点击“提交”后，可以把表单中输入的信息显示在页面上原来的位置，网页为了排版美观使用了表格例如图中表单姓名栏后面有一个单行文本框，要求点击“提交”按钮后，文本框及后面的提示信息消失，替换为文本框内用户输入的信息。自己写的代码（简化）如下，但是没有反应，操作失败，请各位大佬帮忙看看~<body> <form> <table class="table table-striped"> <caption>用户注册</caption> <tbody> <tr class="title"> <td colspan="2">登录信息填写：以下请填写登录信息</td> </tr> <tr> <td id="a2" class="title">用 户 名<br /><span>长度限制8个字符或汉字</span></td> <td id="b2"><input type="text" name="username" id="uname"> <span>（必填项目）（建议使用真实姓名注册）</span></td> </tr> </tbody> <tfoot> <tr> <td colspan="2"><input type="submit" value=" 提 交 " onClick="submit()"><input type="submit" value=" 重 置 "></td> </tr> </tfoot> </table> </form> <script type="text/javascript"> function submit(){ var vuname = document.getElementByName("username").value; var b2 = document.getElementById("b2"); b2.innerHTML = vuname; } </script></body>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form>
<table class="table table-striped">
<caption>用户注册</caption>
<tbody>
<tr class="title">
<td colspan="2">登录信息填写：以下请填写登录信息</td>
</tr>
<tr>
<td id="a2" class="title">用 户 名<br /><span>长度限制8个字符或汉字</span></td>
<td id="b2"><input type="text" name="username" id="uname"> <span>（必填项目）（建议使用真实姓名注册）</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><input type="submit" value=" 提 交 " onClick="submit()"><input type="submit" value=" 重 置 "></td>
</tr>
</tfoot>
</table>
</form>
<script type="text/javascript">
/**
* 获取地址栏参数
* @param key 参数名
*/
var getParam = function (key) {
var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
var r = window.location.search.substring(1).match(reg);
return r ? decodeURI(r[2]) : null;
};
var username = getParam('username');
if (username) {
document.getElementById("b2").innerHTML = username;
}
</script>
</body>
</html>追问
谢谢大佬，实测成功，不过邮箱地址的@符号在地址栏会转换为“%40”，怎么样在输出的时候转换回来呢？