JavaScript Tutorial/jQuery/Form Controls
Содержание
- 1 30. Build a list of all the values within a form.
- 2 30. Clicking the button enables the input next to it.
- 3 30. Get form image control
- 4 30. Get form password field
- 5 30. Get hidden form fields
- 6 30. Hides all the input elements within a form.
- 7 30. Query form file input field
- 8 30. Query reset from form
- 9 30. Query submit button
- 10 30. Set value to disabled form field
- 11 30. To trigger the select event on all input elements
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>
<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>
<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>