Thứ Ba, 21 tháng 5, 2013

form & giới hạn form bởi java script



code : 

echo"<form action=\"".$site_live."modules.php?name=".$module_name."&op=add_basket&pid=$pid&newlang=$currentlang \" method=\"post\" id=\"form1\">";
   
    if($array_option[0]!="")   
            echo"<div class=\"oret\" style=\"font-weight:bold;margin:10px 0;border-bottom:1px solid #ccc;\">chọn size sản phẩm :</div>";
       
        echo"<div id=\"xuathien\">";
            if(in_array("ll",$array_option)){
                echo"<div id=\"largeicon\">L<div class=\"mask\"></div></div>";
                                       
            }else{
                echo"<section class=\"wanted\">L</section>";           
            }           
            if(in_array("mm",$array_option)){
                echo"<section id=\"middleicon\">M<div class=\"mask2\"></div></section>";           
            }else{
                echo"<section class=\"wanted\">M</section>";           
            }
            if(in_array("ss",$array_option)){
                echo"<section id=\"smallicon\">S<div class=\"mask3\"></div></section>";       
            }else{
                echo"<section class=\"wanted\">S</section>";           
            }
       
            echo"<div class=\"largebox\"></div>";
            echo"<div class=\"sexbox\">bạn phải chọn size !</div>";
           
            echo"</div>";
            echo"<section class=\"clear\"></clear>";
           
            echo "<div style=\"margin-top:10px;\">";
           
            echo"<input type=\"image\" src=\"".$site_live."images/b_dathang.png\" value=\"\">";
           
            echo "</div>";
           
        echo"</form>";

Điều kiện script : 

<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript"<?php echo" src=\"".$site_live."script/jquery-ui-1.9.2/ui/jquery-ui.js\">"; ?></script>

<script type="text/javascript">
        $(document).ready(function(){
            /****-- tabs  --****/
            $("#tab1").addClass("classmoi");
            $("#tab2").removeClass("classmoi");
            $("#tab3").removeClass("classmoi");
           
            $("#tab1").click(function(){
                $("#tab1").addClass("classmoi");
                $("#tab2").removeClass("classmoi");
                $("#tab3").removeClass("classmoi");
                $(".tab1").show();
                $(".tab2").hide();
                $(".tab3").hide();
            });
           
            $("#tab2").click(function(){
                $("#tab2").addClass("classmoi");
                $("#tab1").removeClass("classmoi");
                $("#tab3").removeClass("classmoi");
                $(".tab1").hide();
                $(".tab2").show();
                $(".tab3").hide();
            });   
           
            $("#tab3").click(function(){
                $("#tab3").addClass("classmoi");
                $("#tab1").removeClass("classmoi");
                $("#tab2").removeClass("classmoi");
                $(".tab1").hide();
                $(".tab2").hide();
                $(".tab3").show();
            });
/**************************************************************/

/******* chon size & neu ko chon size script g/han form ********/
           
            $("#largeicon").click(function(){
                       
                $(".largebox").html("<span>Lựa chọn của quý khách</span>:<span>Hiện đang có hàng</span>");               
                $(".mask2").hide();
                $(".mask3").hide();
                $(".sexbox").hide();       
                $(".mask").html("<input type='text' name='haha' value='L'>");   
                $("#smallicon").removeClass("classnew");
                $("#middleicon").removeClass("classnew");
                $(this).addClass("classnew");
                $(".largebox").hide(1000);           
                $(".largebox").toggle(1000);                               
                   
            });
           
            $("#middleicon").click(function(){               
                $(".largebox").html("<span>Lựa chọn của quý khách</span>:<span>Hiện đang có hàng</span>");
                $(".mask1").hide();
                $(".mask3").hide();
                $(".sexbox").hide();       
                $(".mask2").html("<input type='text' name='haha' value='M'>");
                $("#largeicon").removeClass("classnew");
                $("#smallicon").removeClass("classnew");
                $("#middleicon").addClass("classnew");
                $(".largebox").hide(1000);
                $(".largebox").toggle(1000);                               
                   
            });
           
            $("#smallicon").click(function(){               
                $(".largebox").html("<span>Lựa chọn của quý khách</span>:<span>Hiện đang có hàng</span>");
                $(".mask1").hide();
                $(".mask2").hide();   
                $(".sexbox").hide();   
                $(".mask3").html("<input type='text' name='haha' value='S'>");
                $("#largeicon").removeClass("classnew");
                $("#middleicon").removeClass("classnew");
                $("#smallicon").addClass("classnew");
                $(".largebox").hide(1000);
                $(".largebox").toggle(1000);                               
                   
            });           
       
            $("#form1").submit(function(event){
               
                if(!$("input[name='haha']").val()){
                   
                    $(".sexbox").css({color: "red",left: 120,position: "absolute",
    top:87});
                    $(".sexbox").show();
/************----thong bao dialog----***********/           
                /*$(".thongbao").dialog({
                resizable: false,
                height:40,
                width:500,
                modal: true,});*/
/***********************************************/               
                    event.preventDefault();
                    /****--note:--****/
                    /* event.preventDefault(); ngan khong cho form submit*/
                }
               
                   
            });
               
        });
       
</script>

Không có nhận xét nào:

Đăng nhận xét