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="https://zhanzhang360.qulang.net/imgupload/008187/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>
