JavaScript Tutorial/jQuery/Form Controls

Материал из Web эксперт
Перейти к: навигация, поиск

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

<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>
          <p></p>
          <form>
        
            <input type="text" name="name" value="A"/>
            <input type="text" name="password" value="B"/>
          </form>
    </body>
</html>


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

<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>


30. Get form image control

<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>
     <DIV></DIV>
  </body>
</html>


30. Get form password field

<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>
     <div></div>
  </body>
</html>


30. Get hidden form fields

<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>
      <span></span>
        <div></div>
        <div style="display:none;">Hider!</div>
        <div></div>
        <div></div>
        <form>
            <input type="hidden" />
            <input type="hidden" />
            <input type="hidden" />
        </form>
        <span></span>
  </body>
</html>


30. Hides all the input elements within a form.

<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>


30. Query form file input field

<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>
  <div>
  </div>
  </body>
</html>


30. Query reset from form

<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>
  <div>
  </div>
  </body>
</html>


30. Query submit button

<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>
     <div id="result"></div>

  </body>
</html>


30. Set value to disabled form field

<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>
  <div>
  </div>
  </body>
</html>


30. To trigger the select event on all input elements

$("input").select();
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Form_Controls&oldid=9695»