Where The Streets Have No Name

field plug-in 예제 본문

Developement/Web

field plug-in 예제

highheat 2008. 4. 12. 15:10
참고 : http://www.pengoworks.com/workshop/jquery/field/field.plugin.htm

<html>
  <head>
     <script type="text/javascript" src="../../lib/jquery.js"></script>
     <script type="text/javascript" src="../../lib/jquery.form.js"></script>
     <script type="text/javascript" src="../../lib/jquery.field.js"></script>
     <script type="text/javascript" src="../../lib/json.js"></script>
     <script type="text/javascript">
            $(document).ready(function(){
                         
                $("#msg").ajaxError(function(event, request, settings){
                   $(this).append("<li>Error requesting page : " + settings.url + "</li>");
                 });
                                 
                 $("#msg").ajaxStart(function(){                    
                   $(this).empty();
                   $('#images').empty();                
                 });
                                 
                 $("#msg").ajaxStop(function(){
                     var now = new Date(); // 현재시간 가져오기                        
                     var stopTime = now.toLocaleString()+':'+now.getMilliseconds()+'ms';
                     $(this).append("stop : "+stopTime);              
                 });
               
                 $('#btn2').click(function(){                  
                    $.getJSON("form.json", function(data){                  
                      $.each(data, function(i,val){
                            $('<div>'+val.fruit+','+val.inObj+'</div>').appendTo('#images');              
                            /*
                             $("select[@name='fruit']").setValue(val.fruit);
                             $("input[@name='inObj']").setValue(val.inObj);
                             $("input[@name='passObj']").setValue(val.passObj);
                             $("input[@name='rdoObj']").setValue(val.rdoObj);
                             $("input[@name='checkObj']").setValue(val.checkObj);
                             $("textarea[@name='txtObj']").setValue(val.txtObj);
                            */
                            $('#frmMst').formHash(val); //한방에 처리
                      });
                   });
                });
                               
                $('#btn9').click(function(){                                      
                    alert($('#frmMst').formHash().toJSONString());
                });      
               
                $('#btn10').click(function(){                                      
                    alert($('input, textarea, select').serialize());
                });      
               
                $('#btn11').click(function(){                                      
                    alert($('#frmMst').formSerialize());
                });
               
                $('input[@name="checkObj"]').limitSelection({
                    // number of items to limit to
                    limit: 2,
                    // on error, do this
                    onfailure: function (n){
                        $("#idCheckboxMsg").html(
                            "You can not select more than " + n + " items."
                        );
                        return false;
                    },
                    // on success, do this
                    onsuccess: function (n){
                        $("#idCheckboxMsg").html("");
                        return false;
                    }
                });
               
            });

           

     </script>
   </head>
  <body>        
    <div id="msg"></div>
    <br>
    <input type="button" id="btn2" value="call (.getJSON)">          
    <br>
    <div id="images"></div>  
    <br>
    <form id="frmMst" name="frmMst">
        <P><SELECT name="fruit">
                <OPTION name="apple" value="A">사과
                <OPTION name="peach" value="P">복숭아
                <OPTION name="mandarin" value="M">감귤
                <OPTION name="grape" value="G">포도
                <OPTION name="grapefruit"  value="J">자몽
            </SELECT></P>          
            <P>성명<INPUT name="inObj" type=text value="&#54861;&#44600;&#46041;">
            <P>암호 <INPUT name="passObj" type="password" value="&#50516;&#54840;">
            <P>색상<INPUT type="radio" name="rdoObj" value="red" checked>적색
                            <INPUT type="radio" name="rdoObj" value="green">녹색
                            <INPUT type="radio" name="rdoObj" value="blue">청색        
            <P><INPUT name="checkObj" type=checkbox value='A'>회신 요청
                 <INPUT name="checkObj" type=checkbox value='B'>회신 요청2
                 <INPUT name="checkObj" type=checkbox value='C'>회신 요청3
                 <div id="idCheckboxMsg"></div>
                </P>
            <P><INPUT name="showBut" type=button value="내용보기">
                    <INPUT name="submitBut" type="submit" value="송신">
                    <INPUT name="resetBut" type="reset" value="다시"></P>
            <P><TEXTAREA name="txtObj" rows=5 cols=20>as</TEXTAREA>
    </form>  
    <P><input type="button" id="btn9" value="formHash()">  
         <input type="button" id="btn10" value=".serialize()">                      
         <input type="button" id="btn11" value=".formSerialize()">                      
  </body>
</html>

form.json화일
[
  {'fruit':'M',
   'inObj':'김철수',
   'passObj':'',
   'rdoObj':'blue',
   'checkObj':['A','B'],
   'txtObj':'아무거나'} 
]
'Developement/Web' Related Articles more