Question

我有这个电子邮件订阅表格，通过电子邮件使用PHP发送给我。它位于页脚，这意味着它可以在整个网站的所有页面上使用。

表单现在运行正常，但问题是它干扰了包含表单的网站的其他部分 - 它会混淆那些并导致错误显示在其他字段上。

我的问题是如何仅为此部分代码隔离此表单和脚本，以便仅为网页的这一部分定义？我做错了什么？

Answer 1

如上面的评论中所述，您需要使用“class”属性替换html中的“id”属性。然后，修改您的jQuery查找器以按类搜索，约束在#subscribe表单中。

HTML

<form id="subscribe" name="subscribe" action="#" method="post">    
  <input name="email" type="email" class="email" placeholder="Your e-mail adresss"> 
  <span><button class="send" type="button">Subscribe</button></span>
</form>

和Javascript

$(document).ready(function () {
    $("#subscribe").submit(function () {
        return false;
    });


    $("#subscribe .send").on("click", function () {
        $('#subscribe input.error').removeClass('error');

        var emailval = $("#subscribe .email").val();
        var mailvalid = validateEmail(emailval);
        if (mailvalid == false) {
            $("#subscribe .email").addClass("error");
        }

        var minlen = $('#subscribe input[minlength]').filter(function(){
            return this.value.length < +$(this).attr('minlength')
        }).addClass('error').length;

        if (mailvalid == true && minlen == 0) {
            // if both validate we attempt to send the e-mail
            // first we hide the submit btn so the user doesnt click twice
            $("#send").replaceWith("<p><strong>Sending, please wait...</strong></p>");

            $.ajax({
               //you shouldn't need to change what you had here in the Fiddle; I didn't
               //copy it for brevity's sake
            });
        }
    });
});

提交表格干扰他人

1 个答案: