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