Heim >Web-Frontend >js-Tutorial >获得所有表单值的JQuery实现代码[IE暂不支持]_jquery

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

WBOY
WBOYOriginal
2016-05-16 17:53:05968Durchsuche

IE 暂不支持
CSS:

复制代码 代码如下:



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


           

       
       
           

           

               
               
           

           

               
               
           

       

  •    
  •    

  •        

  •    








Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn