获得所有表单值的JQuery实现代码[IE暂不支持]

时间：2021-05-18

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").delay(30000).fadeOut();
//tv.attr(value, ''); clean value
// get textarea value
var av = $("#myarea").val();
$("#result2").text(av);

//$("#result2").delay(30000).fadeOut();
var str = "";

// $("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>&nbsp;&nbsp;&nbsp;</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>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章