JS部分怎么写才能把form表单里的数据输出出来
<html><body><formmethod="get"name="f"><tableborder="1"><trvalign="top"><td>姓名：<inputt...
<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> 展开
<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> 展开
7个回答
展开全部
JS获取form表单里的数据并输出的方法：
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>
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>
<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>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
js就直接：document.(formid).(控件id).value
一般我们做都用jquery，引进一个jquery包。$("#控件id").val()
就可以了
一般我们做都用jquery，引进一个jquery包。$("#控件id").val()
就可以了
参考资料： 我空间：http://hi.baidu.com/songmu6/home
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<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>
<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>
追问
你这个代码我拿去调试了，不好使呀
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
使用表单的ID或者class类为依据,获取的这个表单的输入内容,然后alert弹窗输出
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（5）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
