0

我正在构建的站点需要在每个页面上使用两个相同的表单，将数据发送到同一个位置，一个表单在侧边栏中，另一个表单在页脚中。我所尝试的只是轻量级 javascript，如果用户在任何或所有必填字段留空时尝试提交表单，它将弹出错误消息。这是我的问题：

一切都按照我对侧边栏表单的预期工作，但是 javascript 并没有像处理侧边栏表单那样处理放置在页脚中的表单。当表格 #2 中的所有表格要求都得到满足时，它不会处理数据，只显示错误消息，因为我假设它认为表格是空白的，因为另一个表格是空白的。

我知道可能存在利益冲突，并且由于输入 id 完全相同，javascript 引擎会感到困惑（因为它涉及销售人员，所以他们必须参与这个项目）。我已经在处理表单数据的 php 文件中内置了防弹垃圾邮件保护，我只需要一些基本的客户端验证来防止用户提交任何缺少“必需”数据的表单。就像我说的那样，第一种形式的一切都按我的意愿工作，但第二种形式根本不行。谁能帮我解决这个问题，因为我真的不知道从哪里开始。我对使用 javascript 还比较陌生，所以如果我写的东西很乱，我深表歉意。

表格 #1（在侧边栏中）

$("#messageSent").hide();
$("#form1").submit(function(ev){
    ev.preventDefault();

    var fname     = $('#first_name').val();
    var lname     = $('#last_name').val();
    var phone     = $('#phone').val();
    var email     = $('#email').val();
    var condition = $('#condition').val();
    var relationship = $('#relationship').val();
    var inquiry = $('#inquiry').val();

    if(fname && lname && phone && email && condition && relationship && inquiry){
    $.ajax({
           type: "POST",
           url: $(this).attr('action'),
           data: $("#form1").serialize(), // serializes the form's elements.
           success: function(data)
           {
               data = $("#messageSent").fadeIn(),
               $("#form1").fadeOut()
           }
         });
    } else {
    alert("You must complete the required fields before submitting the form.")
    return false;
    }
});

表格#2（在页脚部分）

$('#messageSent-bottom').hide();
$("#form2").submit(function(ev){
    ev.preventDefault();

    var fname     = $('#first_name').val();
    var lname     = $('#last_name').val();
    var phone     = $('#phone').val();
    var email     = $('#email').val();
    var condition = $('#condition').val();
    var relationship = $('#relationship').val();
    var inquiry = $('#inquiry').val();

    if(fname && lname && phone && email && condition && relationship && inquiry){
    $.ajax({
           type: "POST",
           url: $(this).attr('action'),
           data: $("#form2").serialize(), // serializes the form's elements.
           success: function(data){
               data = $("#messageSent-bottom").fadeIn(),
               $("#form2").fadeOut()
           }
         });
    } else {
    alert("You must complete the required fields before submitting the form.")
    return false;
    }
});
4

1 回答 1

0

当你使用 $('#the-id') 时，它只会抓取页面上的第一个（因为你真的不应该有多个具有相同 id 的元素）。

您可以尝试添加如下内容：

var fname = $(this).find('#first_name').val();

这会将其保留在当前表单的上下文中。虽然我可能只是在 id 前面加上前缀，因为您已经有单独的提交函数。

于 2013-07-02T17:36:47.680 回答