遇到超级复杂的表单需要提交,超过300个元素 换个思路,干脆整个页面全部入库,仅将需要索引或查询的重要字段作为数据库的列进行入库,其他表单部分包括源码全部入数据库大对象。页面源代码好获取,但是form表单中各个表单元素的状态就搞不定了,比如input框中输入的值或者select选中哪一个,用jquery返回页面源码根本不会包含表单元素的实际状态。谁有类似遭遇,能否告知解决方法。JavaScriptform表单

解决方案 »

  1.   

    换个思路,干脆整个页面全部入库 
    你最好还是存数据吧,你这一堆HTML存到数据里,数据的意义就不大了
    ---------------------
    你的意思是这样吧 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <form id="f1">
     <input id="t1"   >
     <select id="s1">
      <option value="1" >1</option>
      <option value="2" >2</option>
     </select>
     

    </form>
     <button onclick="getHtml()">get</button><script>
       
       function getHtml(){
       
        ///////添加测试测试值/////
        $('#t1').val('12345');
        $('#s1').val(2);
        /////////////
         $('#f1 input,select').map(function(){
           this.setAttribute('value',this.value)
         });    alert( $('#f1').html() );
       }
     
    </script>
      

  2.   

    $_POST 可以获取所有form提交值存入一个数组,只需要将这个数组插入数据库
      

  3.   

    存源码到数据库?
    你也不怕别人用注入手段或控制台将js节点注入到你的表单然后提交?找死的方法
    写表单项有那么辛苦么?实在觉得麻烦用js循环不就行了,数据库中所有表单值特殊符号分隔,发到页面解析,jquery筛出所有表单项,循环赋值,就搞定了
      

  4.   

    测试了一下基本可行,就是input类型中radio有问题,这个咋整?感谢!我是被逼无奈才这么存储数据,页面元素太多了,国家搞得什么XX调查表,巨大无比,我把关键字段抽取出来单独存储,作为索引和查询用.
      

  5.   

    加了 radio ,checkbox 处理    function getHtml(){
     
            $('#f1 input,select').map(function(){
                 this.setAttribute('value',this.value);
            });
            $(':radio,:checkbox').map(function(){
                 this[(this.checked?'set': 'remove')+'Attribute']('checked',1);
            });
           alert( $('#f1').html() );
       }
      

  6.   

    标准浏览器innerHTML返回的是直接查看源代码得到的,而不是修改过后的,这个IE反倒能通过innerHTML反应修改后的,select增加value属性后并不能选中option,设置select option的selected属性innerHTML也返回不了selected。。悲剧。。<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <form id="f1">
         <input type="text">
         <select multiple id="ss">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
         </select>
          
         <select>
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
         </select>
         <input type="radio" name="r1" value="1"/>
         <input type="radio" name="r1" value="2" />
         <input type="radio" name="r1" value="3" checked />
         <input type="checkbox" value="1"/>
         <input type="checkbox" value="2"/>
         <input type="checkbox" value="3"/>
         <textarea ></textarea>
    </form>
     <button onclick="alert(getHtml(true))">获取表单innerHTML</button>
     <button onclick="setHTML()">设置div的innerHTML,不做处理</button>
     <button onclick="setHTML(true)">设置div的innerHTML,处理数据并且设置状态</button>
     <div id="dv"></div>
    <script>
        function setHTML(process) {
            $('#dv').html(getHtml(process));
            if (!window.ActiveXObject && process) { 
                var arr, selector = '',i;
                $('#dv option[selectedx]').each(function () {
                    $(this).attr('selected', true);
                });
                //textarea有value属性没用,不会显示在输入框内,需要用js设置过value属性一次
                $('#dv textarea').each(function () {
                    $(this).val(this.getAttribute('value'));
                });
            }
       }
       function getHtml(process) {
           if (window.ActiveXObject || !process) return $('#f1').html();
           else {
               $($('#f1')[0].elements).each(function () {
                   switch (this.tagName) {
                       case 'INPUT':
                       case 'TEXTAREA': 
                           switch (this.type) {
                               case 'radio':
                               case 'checkbox':
                                   if (this.checked) this.setAttribute('checked', true);
                                   else this.removeAttribute('checked');
                                   break;
                               default:
                                   this.setAttribute('value', this.value);
                           }
                           break;
                       case 'SELECT':
                           $('option', this).removeAttr('selectedx').not(':selected').removeAttr('selected').end().filter(':selected').attr('selectedx', 'selected');
                           break;
                   }
               });
               return $('#f1').html();
           }
       }
    </script>
      

  7.   


    select好像不行,怎么样让opction选中?感谢!
      

  8.   


    您这个解决了select的问题了么?我测试了好像还是不行啊
      

  9.   


    select好像不行,怎么样让opction选中?感谢!<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <form id="f1">
         <input type="text">
         <select multiple id="ss">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
         </select>
         <select>
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
         </select>
         <input type="radio" name="r1" value="1"/>
         <input type="radio" name="r1" value="2" />
         <input type="radio" name="r1" value="3" checked />
         <input type="checkbox" value="1"/>
         <input type="checkbox" value="2"/>
         <input type="checkbox" value="3"/>
         <textarea ></textarea>
    </form>
     <button onclick="getHtml()">获取表单innerHTML</button>
     
     <div id="dv"></div>
    <script>
       function getHtml(id){
      var f=$('#f1');
            f.find(':text,select').map(function(){
                 this.setAttribute('value',this.value);
            });
            f.find('textarea').each(function(){
             this.innerHTML=this.value;
            });
            $(':radio,:checkbox,').map(function(){
                 this[(this.checked?'set': 'remove')+'Attribute']('checked',1);
            });
            f.find('option').each(function(){
            this[(this.selected?'set': 'remove')+'Attribute']('selected',1);
            });
            $('#dv').html( f.html() );
            return f.html();
       }
     
    </script>