2011-01-04

jqueryphp.com 에서 퍼온 소스임.

* jquery

1. <script language="javascript">  
2.   
3. $(document).ready(function(){  
4.     //global vars  
5.     var userName = $("#name"); //name field  
6.     var userEmail = $("#email"); //email field  
7.     var userTxt = $("#txt"); //comment field  
8.     var targetDiv = $("#targetDiv"); //target div to print results  
9.   
10.     //function to check name and comment field   
11.     function checkCommentsForm(){  
12.         if(userName.attr("value") && userTxt.attr("value"))  
13.             return true;  
14.         else  
15.             return false;  
16.     }  
17.   
18.     //When form submitted  
19.     $("#form1").submit(function(){  
20.         if(checkCommentsForm()){  
21.             targetDiv.show('fast');  
22.             //send to test.php  
23.             $.ajax({  
24.                 type: "POST", url: 'test.php', data: "name="+userName.val()+"&email="+userEmail.val()+"&txt="+userTxt.val(),  
25.                 complete: function(data){  
26.                     //print results as appended   
27.                     targetDiv.append(data.responseText);  
28.                     //print result in targetDiv  
29.                     //targetDiv.html(data.responseText);  
30.                 }  
31.             });  
32.         }  
33.         else alert("Please fill required fields!");  
34.         return false;  
35.     });  
36. });  
37. </script>  

* html

1. <div>  
2. <form id="form1" name="form1" method="post" action="" onsubmit="return false;">  
3.   
4. <input type="text" name="name" id="name">  
5.       Name  
6.   
7. <input type="text" name="email" id="email">  
8.       Email  
9.       
10.   
11. <input type="text" name="txt" id="txt">  
12.       Comment  
13.       
14.   
15. <input type="submit" name="button" id="button" value="go go...">  
16.     <span onclick="$('#targetDiv').html('')" style="cursor:pointer;">Clear result</span>  
17. </form>  
18. </div>  
19. <div id="targetDiv" style="display:none;">  
20. </div>  

이렇게 해서 입력받은 데이터를 넘기고, php나 jsp 등에서 쿼리를 날리면 될듯. +_+