如何将JavaScript应用于重复自身的DOM元素(本例中是表单)

How to apply JavaScript on a DOM element(a form in this case) that repeat it self

本文关键字：元素 表单 DOM JavaScript 应用于      更新时间：2023-09-26

我创建了JavaScript来针对表单和它的元素，一切都很好，直到表单在页面上出现两次，就像这个页面一样。在这样的页面上，JavaScript代码只适用于第一个表单。我甚至试过循环，但是…?所以帮帮我…下面是代码…

HTML 

<div class="row">
<div class="small-12 columns" id="subscribe_form">
    <span class="errors" id="subscriber_names_error"></span>
    <input type="text" id="subscriber_names" placeholder="your names if you wish..."/>
    <span class="errors" id="subscriber_email_error"></span>
    <input type="email" id="subscriber_email" placeholder="your e-mail please!"/>
    <span class="errors" id="subscribe_btn_error"></span>
    <input type="submit" id="subscribe_btn" value="SUBSCRIBE" class="submit_btn">
</div>

JavaScript 

var subscriber_names = "";
var subscriber_email = "";
$("#subscriber_names").keyup(function(){
var val = $(this).val();
if(val == ""){
    $("#subscriber_names_error").html("<p style='color: #ffffff; background: #ff0000'>Fill in your names please.</p>");
    subscriber_names = "";
} else if(val.length < 5){
    $("#subscriber_names_error").html("<p style='color: #ffffff; background: #ff0000'>Names to short.</p>");
    subscriber_names = "";
} else {
    $("#subscriber_names_error").html("");
    subscriber_names = val;
}
});
$("#subscriber_email").keyup(function(){
var val = $(this).val();
var re = /^(([^<>()[']''.,;:'s@'"]+('.[^<>()[']''.,;:'s@'"]+)*)|('".+'"))@(('[[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'])|(([a-zA-Z'-0-9]+'.)+[a-zA-Z]{2,}))$/;
if(val == ""){
    $("#subscriber_email_error").html("<p style='color: #ffffff; background: #ff0000'>Fill in your e-mail please.</p>");
    subscriber_email = "";
} else if(re.test(val)){
    $("#subscriber_email_error").html("");
    subscriber_email = val;
} else {
    $("#subscriber_email_error").html("<p style='color: #ffffff; background: #ff0000'>Invalid E-mail.</p>");
    subscriber_email = "";
}
});
$("#subscribe_btn").click(function(){
var subscribe_form_div = $("#subscribe_form");
if(subscriber_names != "" && subscriber_email != ""){
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: 'subscriber_email='+subscriber_email+'&subscriber_names='+subscriber_names,
        success: function(message){
            subscribe_form_div.html("<img src='imgs/loading_two.gif' />");
            $("#subscribe_form").html(message);
        }
    });
} else {
    $("#subscribe_btn_error").html("<p style='color: #ffffff; background: #ff0000'>Fill in correctly please.</p>");
    subscriber_email = ""
}
});

注意:电子邮件验证的REGEX从这里

不建议在同一页面中有两个具有相同ID的项，因为它使元素唯一，当我在一个页面中有相同的表单两次时，我使用不同的表单ID和相同的类名进行字段的工作，然后您可以使用表单作为验证的参考。

我希望我已经回答了你的问题

相关文章：