JavaScript Tutorial/jQuery/Form Controls

Материал из Web эксперт
Версия от 11:25, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

30. Build a list of all the values within a form.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               
           $("p").append( $("input").map(function(){
               return $(this).val();
           }).get().join(", ") );
                   
       });
   </script>
 </head>
 <body>
   <body>

         <form>
       
           <input type="text" name="name" value="A"/>
           <input type="text" name="password" value="B"/>
         </form>
   </body>

</html></source>


30. Clicking the button enables the input next to it.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
              $("button").click(function () {
                 $(this).next().removeAttr("disabled")
                        .focus()
                        .val("editable now");
              });
       });
   </script>
 </head>
 <body>
   <body>
     <button>Enable</button>
     <input type="text" disabled="disabled" value="can"t edit this" />
   </body>

</html></source>


30. Get form image control

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
       var input = $(":image");
       $("div").text(input.length).css("color", "red");
   });
   </script>
 </head>
 <body>
    <form><input type="image" /></form>
 </body>

</html></source>


30. Get form password field

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
       var input = $("input:password");
       $("div").text(input.length);
       
       
   });
   </script>
 </head>
 <body>
    <form>
     <input type="password" />
   </form>
 </body>

</html></source>


30. Get hidden form fields

   <source lang="javascript">

<html>

 <head>
   <style>
     .test{ border: 1px solid red; }
   </style>
 
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
          $("span:last").text($("input:hidden").length + " hidden inputs.");
   });
   </script>
 </head>
 <body>
     
Hider!
       <form>
           <input type="hidden" />
           <input type="hidden" />
           <input type="hidden" />
       </form>
       
 </body>

</html></source>


30. Hides all the input elements within a form.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
         
           
          
            $(myForm.elements).hide()

       });
   </script>
 </head>
 <body>
   <body>
      <form id="myForm">
          <input type="radio" name="newsletter" value="Hot Fuzz">adf</input>
      </form>
   </body>

</html></source>


30. Query form file input field

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           var input = $(":file");
           $("div").text(input.length);
       });
   </script>
 </head>
 <body>
   <form>
      <input type="file" />
   </form>
 </body>

</html></source>


30. Query reset from form

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           var input = $(":reset");
           $("div").text(input.length);
       });
       
           
       
   </script>
 </head>
 <body>
   <form>
   
   <input type="reset" />
   
 </form>
 </body>

</html></source>


30. Query submit button

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
      var input = $(":submit");
   
      $("#result").text("jQuery matched " + input.length + " elements.");
       
   });
   </script>
 </head>
 <body>
    <form><input type="submit" /></form>
 </body>

</html></source>


30. Set value to disabled form field

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("input:disabled").val("data");
       });
   </script>
 </head>
 <body>
   <form>
      <input name="email" disabled="disabled" />
      
   </form>
 </body>

</html></source>


30. To trigger the select event on all input elements

   <source lang="javascript">

$("input").select();</source>