美文网首页
订阅邮件功能

订阅邮件功能

作者: 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