Maison >interface Web >js tutoriel >获得所有表单值的JQuery实现代码[IE暂不支持]_jquery

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

WBOY
WBOYoriginal
2016-05-16 17:53:05947parcourir

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


           

       
       
           

           

               
               
           

           

               
               
           

       

  •    
  •    

  •        

  •    








Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn