Posted in Javascript onMay 24, 2012
IE 暂不支持
CSS：
<style>
body{
margin:0;
padding:0;
}
div{
margin:0;
padding:0;
}
.container{
margin-left:10%;
margin-right:10%;
}
ul li{
list-style:none;
}
ul{
padding:0;
margin:0;
}
p.em{
color: red;
border:1px solid red;
padding:0 10px;
margin:0;
}
p.small {line-height:90%}
p {line-height:110%}
#left{
float:left;
width:300px;
padding:0;
margin:0 10px 0 0 ;
border-right:1px solid #AECEEB;
}
#right{
margin-left:300px;
}
span.clear{
clear:both;
}
h2{
border-bottom:1px solid #AECEEB;
}
</style>
JS：
function form(){
$('#myform').submit(function() {
// get text value
var tv = $("#mytxt").val(),
tf = $(this).find(":input[type='text']").val(),
tn = $(this).find(":input[name='txtname']").val();
$("#result1").text(tv);
/*$("#result1").append("You can get the value of text use these methods below: <br />"
+ "<b>" + tv + "</b>" + "<br />"
+ "<p class='em'>" + '$("#mytxt").val()' + "<br />"
+ '$(this).find(":input[type=\'text\']").val()' + "<br />"
+ '$(this).find(":input[name=\'txtname\']").val()' + "<br />"
+ "</p>");
*/
//$("#result1").delay(30000).fadeOut();
//tv.attr(value, ''); clean value
// get textarea value
var av = $("#myarea").val();
$("#result2").text(av);
/* $("#result2").append("You can get the value of textarea use these methods below: <br />"
+ "<b>" + av + "</b>" + "<br />"
+ '<p class=\'em\' >$("#myarea").val()'
+ "</p>");
*/
//$("#result2").delay(30000).fadeOut();
var str = "";
/* $("select").change(function () {
$("select option:selected").each(function () {
str += $(this).val();
});
$("#result3").text(str);
})
.trigger('change');
*/
// $("select[name='garden'] option:selected") if we have multiple select
$("select[id='mysel'] option:selected").each(function () {
str = $(this).val();
});
$("#result3").text(str);
var str2 = "";
$("select[id='multisel'] option:selected").each(function () {
str2 += $(this).val() + " ";
});
$("#result4").text(str2);
var str3 = [];
$("input[name='checkme']:checked").each(function(){
str3.push($(this).val());
});
var oa = "";
$.each(str3, function(key,val){
oa += key + ":" + val;
});
$("#result5").text(oa);
var ck = $("input[type='radio']:checked").val();
$("#result6").html( ck + " is checked!" );
return false;
});
}
form();
HTML：
<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div class="container"> <h2>Get All Form Elments Value</h2> <div id="left"> <form id="myform"> <ul> <li> <p class="small">Text</p> <input type="text" name="txtname" id="mytxt" value="" /> </li> <li> <p class="small">TextArea</p> <textarea name="myarea" id="myarea" value=""></textarea> </li> <li> <p class="small">Single Select</p> <select id="mysel"> <option name="apple">Apple</option> <option name="blue">Blue</option> <option name="mary">Mary</option> <option name="asia">Asia</option> </select> </li> <li> <p class="small">Multiple Select</p> <select name="garden" multiple="multiple" id="multisel"> <option>Flowers</option> <option selected="selected">Shrubs</option> <option>Trees</option> <option selected="selected">Bushes</option> <option>Grass</option> <option>Dirt</option> </select> </li> <li> <p class="small">Check Box</p> apple <input type="checkbox" value="apple" name="checkme" /> banana <input type="checkbox" value="banana" name="checkme" /> pear <input type="checkbox" value="pear" name="checkme" /> cherry <input type="checkbox" value="cherry" name="checkme" /> strawberry <input type="checkbox" value="strawberry" name="checkme" /> </li> <li> <p class="small">Radio</p> <div> <input type="radio" name="fruit" value="orange" id="orange"> <label for="orange">orange</label> </div> <div> <input type="radio" name="fruit" value="apple" id="apple"> <label for="apple">apple</label> </div> <div> <input type="radio" name="fruit" value="banana" id="banana"> <label for="banana">banana</label> </div> </li> <li> </li> <li><button>submit</button></li> </ul> </form> </div> <span class="clear"></span> <div id="right"> <div id="result1"></div> <div id="result2"></div> <div id="result3"></div> <div id="result4"></div> <div id="result5"></div> <div id="result6"></div> <div id="result7"></div> </div> </div> </body> </html>
获得所有表单值的JQuery实现代码[IE暂不支持]
声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@