0

I created JavaScript to target a form and it's elements, and everything work fine until the form appear twice on a page like this page. On such a page the JavaScript code only works on the first form. I've even tried loops, but...? So help me out,... Below is the code...

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 = ""
}
});

Note: the REGEX for e-mail validation is from here

Community
  • 1
  • 1
Issa Abdullah
  • 1
  • 2

1 Answers1

0

Its not recomendable to have two itens with the same ID in same page, because its what make elements unique, when i have the same form twice in a page i work with diferent form ID's and same class name for the fields, and then you can use the form as reference for validation.

I hope I have answered your question

Lucas Schirm
  • 107
  • 5