form表单提交写在行间的4种方式、form表单提交不刷新的方法 

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<body>
    <!--
        form表单提交写在行间的4种方式：
        1.直接在formy元素上调用检查的方法 onsubmit="return check();"
        2.input[type="submit"] onclick=" return check();"
        3.input[type="button"] onclick=" return check();"
        4.button[button="button"] onclick=" return check();
        

　　　　form表单提交非行间提交方式
        前提有input[type="submit"]的按钮
        <input type="submit" value="提交" />
          $('#form1').submit(function(){
               return check()//check()函数单独写 还不如写把函数写在行间方便
           });



        form表单提交不刷新的方法：
        这样即提交了FORM保存了数据,页面也不会跳转.
          隐藏的iframe，让form元素上的  target='iframe的name'
    -->
    <form id="form1"  method="post"  action="1.html"  target="nm" ><!--action="1.html"-->
        <p>
            <label for="">姓名：</label>
            <input class="nameTxt" type="text" />
        </p>
        <p>
            <label for="">年龄：</label>
            <input class="passTxt" type="text" />
        </p>
        <input type="submit" value="提交" onclick="return check();" />
        <!--<button  type="button"  >点击</button>-->
        
    </form>
    <iframe id="nm" name="nm" style="display:none;"></iframe>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
          function check(){
          var ntxt=$(".nameTxt").val();
          var ptxt=$(".passTxt").val();
          
              if(ntxt==''||ptxt==''){
                  $('body').append('<p>姓名和年龄不能为空</p>');
                      return false;
              }else{
                  $('body').append('<p>提交中</p>');
              }
//              
              
          }
    </script>
</body>
</html>

 form表单提交推介写法行为分离

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<body>

    <form id="form1"  method="post"  action="1.html"  target="nm" >
        <p>
            <label for="">姓名：</label>
            <input class="nameTxt" type="text" />
        </p>
        <p>
            <label for="">年龄：</label>
            <input class="passTxt" type="text" />
        </p>
        <input id="btn3" type="submit" value="提交" />
        
    </form>
    <iframe id="nm" name="nm" style="display:none;"></iframe>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        
        $("#btn3").on('click',function(){
            
          var ntxt=$(".nameTxt").val();
          var ptxt=$(".passTxt").val();
          
              if(ntxt==''||ptxt==''){
                  $('body').find('p.tip').remove();
                  $('body').append('<p class="tip">姓名和年龄不能为空</p>');
                      return false;  //为空   return false; 后面代码不会再执行了
              }
              
              $('body').find('p.tip').remove();
              $('body').append('<p class="tip">提交中</p>');
             
             $('#form1').submit();
            
        })
        

        
          
          
          
    </script>
</body>
</html>

 

posted @ 2017-09-11 11:27  small-match  阅读(554)  评论(0)    收藏  举报