首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 24, 2012

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS类的封装及实现代码
Dec 02 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
js实现网页版贪吃蛇游戏
Feb 22 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 #Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 #Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 #Javascript
JavaScript之编码规范 推荐
May 23 #Javascript
javascript的数据类型、字面量、变量介绍
May 23 #Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 #Javascript
通过js动态操作table(新增，删除相关列信息)
May 23 #Javascript
lua(3) 相对定位(1) postcss-px2rem(1) ECharts(3) 匹配(1) 绝对定位(1) props(1) ref(1) mixin(1) geoserver(1)
You might like
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
详解PHP中的PDO类
2015/07/06 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
jQuery Tools tooltip使用说明
2012/07/14 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
Vue渲染函数详解
2017/09/15 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
利用Psyco提升Python运行速度
2014/12/24 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
python分析网页上所有超链接的方法
2015/05/08 Python
python 判断网络连通的实现方法
2018/04/22 Python
详解Python字典小结
2018/10/20 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
基于Python fminunc 的替代方法
2020/02/29 Python
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
卫校中专生的自我评价
2014/01/15 职场文书
安全责任协议书
2014/04/21 职场文书
学生自我评语
2015/01/04 职场文书
学校国庆节活动总结
2015/03/23 职场文书
继承Win10缺点！教你关闭Win11烦人的网络搜索
2021/11/23 数码科技