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

通过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:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdjwgw.html