jquery提交表单,获取不到表单的内容,获取不到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>
                        &nbsp;
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
            </tbody>
        </table>
        <p>
            &nbsp;</p>
    </div>
    </form>
</body>
</html>
jqueryjq提交表单jq获取input值

解决方案 »

  1.   

    从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

    }