87,907
社区成员
发帖
与我相关
我的任务
分享jquery提交表单,获取不到表单的内容,获取不到input的值
我最近在写一个简单的工作流,涉及到一个流程就是先设计表单,然后人员填单后提交,
我的思路是,先设计表单,然后吧表单填充好之后,整个页面的表单html进行整体提交保存.
但是遇到了一个奇怪的是问题,发现很多表单提交到后台之后,表单在,内容不在.测试发现一些浏览器好用,一些不好用
IE9在提交的时候,可以把原来的html和input里面的值都提交过去,
chrom则只能获取到原本的html,获取不到input里面的值,
请问我该怎么解决.
我的思路是,先设计表单,然后吧表单填充好之后,整个页面的表单html进行整体提交保存.
但是遇到了一个奇怪的是问题,发现很多表单提交到后台之后,表单在,内容不在.测试发现一些浏览器好用,一些不好用
IE9在提交的时候,可以把原来的html和input里面的值都提交过去,
chrom则只能获取到原本的html,获取不到input里面的值,
请问我该怎么解决.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表单编辑 </title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function Button1_onclick() {
saveForm2(".content");
}
function saveForm2(contentCss) {
inputList = $("input");
for (var item = 0; item < inputList.length; item++) {
inputList.eq(item).val(inputList.eq(item).val());
}
inputList = $("input:checked")
for (var item = 0; item < inputList.length; item++) {
inputList.eq(item).attr("checked", "checked");
}
var postData = { "type": "add" };
postData.value = escape($(contentCss).html());
alert(postData.value); // John
// $.post(
// serviceUrl
// , postData
// , function (data) {
// alert("保存成功"); // John
// }
// , "json");
}
</script>
</head>
<body>
<form name="form1" method="post" action="editForm.aspx" id="form1">
<div>
</div>
<div class="control" style="background-color: #cccccc; width: 100%">
<input id="Button1" type="button" value="保存表单" onclick="return Button1_onclick()" />
</div>
<div id="divContent" class="content" style="">
<table border="1" cellpadding="1" cellspacing="1" style="width: 500px">
<tbody>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="radio" value="on" >
</td>
<td>
<input type="checkbox" value="on" >
</td>
<td>
<select>
</select>
</td>
</tr>
<tr>
<td>
<textarea></textarea>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<p>
</p>
</div>
</form>
</body>
</html>
...全文
请发表友善的回复…
发表回复
diamondTears1987 2013-11-03
- 打赏
- 举报
这个问题很有深究的必要,回去我好好研究研究,写篇博客,这里先节分了.
[/quote]
[/quote]
diamondTears1987 2013-11-03
- 打赏
- 举报
谢谢
羚羊号 2013-11-03
- 打赏
- 举报
从chrome开发工具中查看DOM结构，当用户在填写完表单时，表单元素当时的属性里并没有value值 。而是在表单元素下方有插入Document.fragement元素并包含一个div，而据我测试。如果用js获取此元素的value是能获取到的。 jquery的.val()也是ok的。 那对于input 和textarea来说，就需要手动的分别将 input 的value属性，textarea的text属性加上去。改写后的代码如下。
function saveForm2(contentCss) {
inputList = $("input");
for (var item = 0; item < inputList.length; item++) {
inputList.eq(item).attr("value",inputList.eq(item).val());
}
inputList = $("input:checked")
for (var item = 0; item < inputList.length; item++) {
inputList.eq(item).attr("checked", "checked");
}
$("textarea").each(function(){
$(this).text($(this).val());
})
var postData = { "type": "add" };
//postData.value = escape($(contentCss).html());
postData.value = $(contentCss).html();
alert(postData.value); // John
}
diamondTears1987 2013-11-03
- 打赏
- 举报
这个时间还在扣代码的,一定是苦逼程序员了,大家发发善心,我是真没折了
感谢这么多热心的it友人,大半夜的帮助我解决问题,感谢各位群友,希望你们能在此留言,我也好给分.
