Home > Web Front-end > JS Tutorial > JQuery implementation code to obtain all form values ​​[IE is not supported yet]_jquery

JQuery implementation code to obtain all form values ​​[IE is not supported yet]_jquery

WBOY
Release: 2016-05-16 17:53:05
Original
962 people have browsed it

IE does not currently support
CSS:

Copy code The code is as follows:

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 10px;
                                                                                                                        ;
width:300px;
padding:0;
margin:0 10px 0 0 ;
border-right:1px solid #AECEEB;
}
       #right{
                                                                     -left:300px;
                                                                                                                                                                                    ;
}



JS:




Copy code


The code is as follows:

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:
"
                            "" tv "" "
"
                            "

" '$("#mytxt").val()' "
"
                            '$(this).find(":input[type='text']").val()' "
"
                            '$(this).find(":input[name='txtname']").val()'  "
"
                            "

");
            */
            //$("#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:
"
                            "" av "" "
"
                            '

$("#myarea").val()'
                            "

");
            */
            //$("#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:
复制代码 代码如下:



   



Get All Form Elments Value




   

           

  •        

    Text


           
           

  •    

  •        

    TextArea


           
       

  •    

  •        

    Single Select


           
       

  •    

  •    

    Multiple Select


       
       

  •    

  •        

    Check Box


            apple
            banana
            pear
            cherry
            strawberry
       

  •    

  •        

    Radio


           

       
       
           

           

               
               
           

           

               
               
           

       

  •    
  •    

  •        

  •    








Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template