zoukankan      html  css  js  c++  java
  • Jquery添加元素append及阻止表单提交submit

     HTML代码: 

      <td><input name="duration[]" value="" type="text" /></td>
         <td>

        <a href="javascript:;" class="low">-</a>

        <a href="javascript:;" class="add">+</a>

      </td>

    Jquery添加元素append

    <script>
                function show(){
                    $('.add').unbind();
                    $('.low').unbind();

                    $('.add').click(function(){ // 加好;
                        var html=$(this).closest('tr').html();
                        var str='<tr class="tr">'
                            str+='<td><input name="material[]" type="text" /></td>'
                            str+='<td><input name="size[]" type="text" /></td>'
                            str+='<td><input name="membrane[]" type="text" /></td>'
                            str+='<td><input name="angle[]" type="text" /></td>'
                            str+='<td><input name="moq[]" type="text" /></td>'
                            str+='<td><input name="price[]" type="text" /></td>'
                            str+='<td><input name="duration[]" type="text" /></td>'
                            str+='<td><a href="javascript:;" class="low">-</a><a href="javascript:;" class="add">+</a></td>'
                            str+='</tr>'
                        $('.tbody').append(str);
                        // $(this).remove();
                        show();
                    })

                    $('.low').click(function(){ // 剑豪
                        if($('.tbody tr').length > 1){
                            $(this).parents('tr').remove();
                        }
                    })    
                }
                show();
            </script>
    阻止表单提交submit(#submit是form的ID)
            <script>
                $('#submit').submit(function(){
                    bool=true;
                    $(".tbody input").each(function(){
                        var src=$(this).val();
                        if(src==''){
                            bool=false;
                        }
                    })
                    if(bool==false){
                        alert('请完成名片信息');
                        return false;
                    }
                })

    bind绑定方法(.sub-btn是input的类名)

       <script type="text/javascript">
                $(function(){
                   $(".sub-btn").bind("click",function(event){
                         var name = $(".name").val();  //获取元素的值
                         if(name==""){     //判断值是否为空
                                alert('名片名不能为空');        //提示信息
                                return false;
                           }
                   })
                })
            </script>
            </script>

  • 相关阅读:
    全面了解Nginx主要应用场景
    手把手教你构建 C 语言编译器
    Docker镜像原理和最佳实践
    Docker网络深度解读
    PostgreSQL 10.0 preview 功能增强
    阿里沈询:分布式事务原理与实践
    CPU、内存、IO虚拟化关键技术及其优化探索
    原理、方法双管齐下,大神带你细解Redis内存管理和优化---场景研读
    ASP.NET 5已终结,迎来ASP.NET Core 1.0和.NET Core 1.0 转
    RabbitMQ学习系列
  • 原文地址:https://www.cnblogs.com/sweet521/p/5649738.html
Copyright © 2011-2022 走看看