лучший способ создания многих экземпляров моей фантазии и формы

Question

<a href="#login_form" class="the_form">click to Contact</a>

Форма:

<div style="display:none">
 <form id="login_form" method="post" action="">
  <p id="login_error">Please, enter data</p>
  <p>
   <div class="name_label">Name:</div>
   <input class="styled name" type="text" id="name" name="name" size="30" />
  </p>
  <p>
   <div class="email_label">eMail:</div>
   <input class="styled email" type="text" id="email" name="email" size="30" />
  </p>
  <p>
   <div class="note_label">Message:</div>
    <textarea id="msg" name="msg" class="light_box_msg"></textarea>
  </p>
  <p>
   <input type="submit" value="Login" />
   <input type="hidden" value="<?php echo $vantage_array[$i][10]; ?>" id="occupancy_contact_email"/>
  </p>
  <p class="lightbox_close"><a href="javascript:;" onclick="$.fancybox.close();">close</a></p>
 </form>
</div>

JavaScript:

$(".the_form").fancybox({
    'scrolling'     : 'no',
    'overlayOpacity': 0.1,
    'showCloseButton'   : false,
    'onClosed'      : function() {
        $("#login_error").hide();
    }
});

$("#login_form").bind("submit", function() {

    if ($("#name").val().length < 1 || $("#email").val().length < 1 || $("#msg").val().length < 1)  {
        $("#login_error").show();
        $.fancybox.resize();
        return false;
    }
});

Этот код прекрасно работает, у меня есть только одна ссылка, одна форма и одна Fancybox , но мне нужно иметь несколько экземпляров и правильно передать его значения через ajax.

В своей базе данных while я создал форму для каждой ссылки / записи. Я думаю, это то, где я облажался.

Должен ли я пройти через php и javascript для создания уникальных имен идентификаторов, таких как

#login_form_1 and #name_1, #msg_1 etc... 

Для каждого элемента ввода?

Answer 1

У вас не должно быть более одного элемента на странице с одинаковым идентификатором, но в этом случае дубликаты идентификаторов и имен для полей формы должны быть в порядке, пока любой из элементов, которые вы хотите найти с У jquery либо уникальный идентификатор, либо вы просто находите их по их классу или по какой-то другой комбинации класса и местоположения в DOM.

Итак, этот код

$("#login_form").bind("submit", function() {

    if ($("#name").val().length < 1 || $("#email").val().length < 1 || $("#msg").val().length < 1)  {
        $("#login_error").show();
        $.fancybox.resize();
        return false;
    }
});

вероятно станет чем-то вроде этого

$(".login_form").bind("submit", function() {

    if ($(this).find(".name").val().length < 1 || $(this).find(".email").val().length < 1 || $(this).find(".msg").val().length < 1)  {
        $(this).find(".login_error").show();
        $.fancybox.resize();
        return false;
    }
});

И, конечно, те элементы, на которые я изменил ссылку на класс вместо идентификатора, также должны обновляться по мере необходимости.