美文网首页
订阅邮件功能

订阅邮件功能

作者: Robyn_Luo | 来源:发表于2018-01-10 11:26 被阅读0次

    html结构

                    <form class="clearfix">
                        <input class="email_input fl" type="text" name="subscribe" placeholder="Enter your Email address">
                        <button type="button" class="btn_submit fr">Subscribe</button>
                    </form>
                    <div style="" id="email_msg">Please enter email address</div>
    

    CSS样式省略

    JS

      // 尾部订阅邮件_Robyn
      var status = 'false';
      $('input[name="subscribe"]').blur(function () {
        var email = $(this).val();
        if (!email.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/) || email.length > 30) {
          $('#email_msg').html('Please enter email address').show();
          status = 'false';
        } else {
          $('#email_msg').hide();
          /*$('#email_msg').html('Thanks for your subscription!').show();*/
          status = 'true';
        }
      });
      $(".btn_submit").click(function () {
    
        if (status == 'true') {
          var email = $("input[name=subscribe]").val();
          $('#email_msg').html('Thanks for your subscription!').show();
          $.post("index.php?com=ajax&t=saveSubscribeEmail", {
            email: email
          }, function (data) {
            console.log(data);
            if (data == 1) {
              $('#email_msg').html("Thanks for your subscription!");
            } else {
              $('#email_msg').html("Subscribe failed");
            }
            $("input[name=subscribe]").val('');
            /*$("input[name=subscribe]").val('');
            $('#email_msg').hide();*/
          }, "json");
    
        } else {
          $('#email_msg').show();
          $('#email_msg').html("Please enter email address");
        }
      });
    

    相关文章

      网友评论

          本文标题:订阅邮件功能

          本文链接:https://www.haomeiwen.com/subject/mptonxtx.html