通过jquery获取所有表单值,一般都是后台语言处理的,这里通过jquery获取,确实不错的想法
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>" + '$("#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:
复制代码 代码如下: