<html>
<body>
<form method="get" name="f">
<table border="1">
<tr valign="top">
<td>姓名:
<input type="text" name="f_name"><br />
年龄:
<input type="text" name="age"><br />
性别:
<select name="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
<td align="center">备注:<br />
<textarea rows="10" cols="30"></textarea><br />
<input type="submit" value="提交">
<input type="reset" value="重置"></td></tr>
</table>
</form>
<table border="1">
<tr>
<td>姓名:</td>
<td id="v_name" width="100" ></td>
</tr>
<tr>
<td>年龄:</td>
<td id="v_age" width="100"></td>
</tr>
<tr>
<td>性别:</td>
<td id="v_name" width="100"></td>
</tr>
</table>
</body>
</html>
document.getElementById("ddd").innerHTML = document.getElementById("xxx").value + document.getElementById("yyy").value;
将表单数据获取好后进行拼接赋给某个dom节点显示出来。
js获取表单数据命令是:document.getElementById("xxx").value;
输出表单数据到某个dom元素内是使用:document.getElementById("ddd").innerHTML;
因此要使用js输出表单数据可以先讲表单数据整合临时存储到某个变量,在统一输出到某个dom节点内
举例:
<form id="fm" name="fm">
<input type="text" id="name" />
<input type="text" id="tel" />
<input type="button" onClick="fmResult()" />
</form>
输出表单值:<div id="d"></div>
js:
<script>
function fmResult(){
var name = document.getElementById("name").value;
var tel = document.getElementById("tel").value;//获取值
document.getElementById("d").innerHTML = name + tel;//输出表单值
}
</script>
<html>
<body>
<form method="get" name="f">
<table border="1">
<tr valign="top">
<td>姓名:
<input type="text" id="f_name" name="f_name"><br />
年龄:
<input type="text" id="age" name="age"><br />
性别:
<select name="sex" id="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
<td align="center">备注:<br />
<textarea rows="10" cols="30"></textarea><br />
<input type="submit" value="提交" onClick="return getMessage();">
<input type="reset" value="重置"></td></tr>
</table>
</form>
<table border="1">
<tr>
<td>姓名:</td>
<td id="v_name" width="100" ></td>
</tr>
<tr>
<td>年龄:</td>
<td id="v_age" width="100"></td>
</tr>
<tr>
<td>性别:</td>
<td id="v_sex" width="100"></td>
</tr>
</table>
<script language="javascript">
function getMessage()
{
document.getElementById("v_name").innerHTML=document.getElementById("f_name").value;
document.getElementById("v_age").innerHTML=document.getElementById("age").value;
document.getElementById("v_sex").innerHTML=document.getElementById("sex").value;
return false;
}
</script>
</body>
</html>本回答被提问者采纳
一般我们做都用jquery,引进一个jquery包。$("#控件id").val()
就可以了
参考资料:我空间:
本回答被网友采纳<body>
<form method="get" name="f" id="TestForm">
<table border="1">
<tr valign="top">
<td>姓名:
<input type="text" name="name"><br />
年龄:
<input type="text" name="age"><br />
性别:
<select name="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
<td align="center">备注:<br />
<textarea rows="10" cols="30"></textarea><br />
<input type="submit" value="提交">
<input type="reset" value="重置"></td></tr>
</table>
</form>
<table border="1">
<tr>
<td>姓名:</td>
<td id="v_name" width="100" ></td>
</tr>
<tr>
<td>年龄:</td>
<td id="v_age" width="100"></td>
</tr>
<tr>
<td>性别:</td>
<td id="v_sex" width="100"></td>
</tr>
</table>
<input type="button" value="Test" id="TestBtn"/>
</body>
<script type="text/javascript">
document.getElementById('TestBtn').onclick=function(){
for(var eles=document.getElementById('TestForm').elements,i=0,l=eles.length;i<l;i++){
document.getElementById('v_'+eles[i].name)&&(document.getElementById('v_'+eles[i].name).innerHTML=eles[i].value);
}
};
</script>
</html>追问
你这个代码我拿去调试了,不好使呀