获得所有表单值的JQuery实现代码[IE暂不支持] - Web前端
作者：98wpeu发布时间：2026-06-16分类：网页前端技术浏览：2
导读：ie暂不支持CSS：复制代码代码如下:<style> body{ margin:0; padding:...
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：
复制代码 代码如下:
functionFORM(){
$('#myform').submit(function() {
// gettextvalue
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!" );
returnfalse;
});
}
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> <option>Trees</option>
<option selected> <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>
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：
复制代码 代码如下:
functionFORM(){
$('#myform').submit(function() {
// gettextvalue
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!" );
returnfalse;
});
}
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> <option>Trees</option>
<option selected> <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>
- 上一篇：40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一 - Web前端
- 下一篇：已经是最后一篇了
相关推荐
- jQuery源码分析-03构造jQuery对象-源码结构和核心函数 - Web前端
- 可兼容IE的获取及设置cookie的jquery.cookie函数方法 - Web前端
- 20款非常优秀的 jQuery 工具提示插件 推荐 - Web前端
- jQuery中live方法的重复绑定说明 - Web前端
- jquery win 7透明弹出层效果的简单代码 - Web前端
- jQuery 一个图片切换的插件 - Web前端
- 用JQuery模仿淘宝的图片放大镜显示效果 - Web前端
- 详谈 Jquery Ajax异步处理Json数据. - Web前端
- 基于JQuery的Select选择框的华丽变身 - Web前端
- jQuery效果 slideToggle() 方法(在隐藏和显示之间切换) - Web前端
- 网页前端技术排行
- 最近发表
-
- WordPress随机显示特色图片插件：Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案：坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP：Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性