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