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以创建唯一的ID名称，如

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

对于每个输入元素？

Answer 1

页面上不应该有多个具有相同ID的元素，但在这种情况下，只要您要查找的任何元素，表单字段的重复ID和名称都应该是正确的jquery有一个唯一的id或你只是通过他们的类或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;
    }
});

当然，我更改为按类而不是ID引用的项目也应根据需要进行更新。

创建我的fancybox和表单的许多实例的最佳方法

1 个答案: