JS部分怎么写才能把form表单里的数据输出出来

举报该问题

推荐答案 2015-09-09

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>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://33.wendadaohang.com/zd/45BdB5dW5.html

其他回答

第1个回答推荐于2016-08-29

调试通过的
<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>本回答被提问者采纳

第2个回答推荐于2018-05-11

js就直接：document.(formid).(控件id).value
一般我们做都用jquery，引进一个jquery包。$("#控件id").val()
就可以了

参考资料：我空间：http://hi.baidu.com/songmu6/home

本回答被网友采纳

第3个回答 2012-03-21

<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>追问

你这个代码我拿去调试了，不好使呀

第4个回答 2015-08-21

使用表单的ID或者class类为依据,获取的这个表单的输入内容,然后alert弹窗输出

1 2 下一页

相似回答

JS:表单输出自动显示在表格里答：下面就给你写下具体的代码： (复制粘贴到一个TXT文档中，将后缀名改为htm就可以)<script language="javascript"> function chk(){ setTimeout("chk()",100);text1.innerHTML = form1.t1.value;text2.innerHTML = form1.t2.value;text3.innerHTML = form1.t3.value;} </script> <body ...

js表单提交后,如何获取表单中的数据并显示出来答：表单是用form来填写，在提交前可以获取表单里面的数据。我这里用jquery实现。<html><body> <form method='post' action=''> <label for='inputText'>inputText</label> <input type='text' id='inputText'/> <br/> <label for='checkBox1'>checkBox1</label> <input type...

前端小技巧:学会用FormData对象收集表单数据答：可以看到，我们已经实现了需求，但是我们写的JS代码很繁琐，我们需要先获取form表单中input框元素，然后元素的value值，最后包装成一个对象。FormData的JS写法：效果如下：通过这个例子你应该能感受到FormData的便利性，只需要 new FormData(form) 一句代码就可以把form表单内的所有信息都以键值对的形式包装成...

大家正在搜

form表单的action怎么写 form表单怎么写 form表单指定跳转怎么写 form表单提交数据 java获取form表单数据 form表单怎么用 form表单中的action属性 html怎么处理表单提交的内容表单怎么写