form 轉json

    <!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>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <script type="application/javascript" src="js/jquery-2.0.3.js"></script>  
    <title>無標題文檔</title>  
    <script type="application/javascript">  
      
    $.fn.serializeObject = function()    
    {    
       var o = {};    
       var a = this.serializeArray();    
       $.each(a, function() {    
           if (o[this.name]) {    
               if (!o[this.name].push) {    
                   o[this.name] = [o[this.name]];    
               }    
               o[this.name].push(this.value || '');    
           } else {    
               o[this.name] = this.value || '';    
           }    
       });    
       return o;    
    };  
      
    function onClik(){  
            //var data = $("#form1").serializeArray(); //自動將form表單封裝成json  
            //alert(JSON.stringify(data));  
            var jsonuserinfo = $('#form1').serializeObject();  
            alert(JSON.stringify(jsonuserinfo));  
    }  
    </script>  
    </head>  
      
    <body>  
    <form id="form1" name="form1" method="post" action="">  
      <p>進貨人 :  
        <label for="name"></label>  
        <input type="text" name="name" id="name" />  
      </p>  
      <p>性別:  
        <label for="sex"></label>  
        <select name="sex" size="1" id="sex">  
          <option value="1">男</option>  
          <option value="2">女</option>  
        </select>  
      </p>  
      <table width="708" border="1">  
        <tr>  
          <td width="185">商品名</td>  
          <td width="205">商品數量</td>  
          <td width="296">商品價格</td>  
        </tr>  
        <tr>  
          <td><label for="pro_name"></label>  
            <input type="text" name="pro_name" id="pro_name" /></td>  
          <td><label for="pro_num"></label>  
            <input type="text" name="pro_num" id="pro_num" /></td>  
          <td><label for="pro_price"></label>  
            <input type="text" name="pro_price" id="pro_price" /></td>  
        </tr>  
        <tr>  
          <td><input type="text" name="pro_name2" id="pro_name2" /></td>  
          <td><input type="text" name="pro_num2" id="pro_num2" /></td>  
          <td><input type="text" name="pro_price2" id="pro_price2" /></td>  
        </tr>  
      </table>  
      <p> </p>  
      <input type="button" name="submit" οnclick="onClik();" value="提交"/>  
    </form>  
    </body>  
    </html>  

[html] view plaincopy在CODE上查看代碼片派生到我的代碼片

    <span style="font-size:32px;"><strong>代碼效果演示:</strong></span>  




原文地址:http://blog.csdn.net/zhangdaiscott/article/details/18456215

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章