javascript - 模态通知出现在表单发送上，Foundation/Abide.js

Question

I'm doing something very similar to this site here 。当您发送页脚中的表单时，成功发送后会出现一个模式窗口，感谢用户提交表单。我已经在 Foundation 中构建了一个网站，并使用 Abide.js 验证字段。

今天早上一切正常，直到我尝试使用不同的 AJAX/jQuery 方法让消息出现在表单而不是模态的同一页面上。现在我正在尝试执行模式，但我的表单根本不起作用。

这是我的表单的 HTML:

<form id="form-contact" name="form-contact" action="include/contact-form-send.php" method="post" data-abide>
   <div class="row">
    <div class="large-12 columns">
        <input id="contact-name" name="name" type="text" placeholder="Full Name" pattern="alpha" required />
    </div>
</div>
<div class="row">
    <div class="large-12 columns">
        <input id="contact-email" name="email" type="text" placeholder="Email Address" pattern="email" required />
    </div>
</div>
<div class="row">
    <div class="large-12 columns">
        <input id="contact-phone" name="phone" type="text" placeholder="Phone Number" pattern="number" required />
    </div>
</div>
<div class="row">
    <div class="large-6 medium-6 small-12 columns" id="form-left">
        <input id="contact-security" name="security" type="text" placeholder="10 - 3 =" pattern="[7]" required />
    </div>
    <div class="large-6 medium-6 small-12 columns" id="form-right">
    <input type="submit" value="submit" class="button green-button" id="form-send" />
    </div>
</div>

PHP:

$name = $_POST["name"];
$email = $_POST["email"];
$phone = $_POST["phone"];

$to = "example@email.com";
$subj = "The Rivers Quick Contact Request";
$mess = "The following person has filled out the quick contact form on The Rivers    website:

Name: $name
Email: $email
Phone: $phone
";

$headers = "From: info@therivers.com" . "\r\n" .
"CC:example@email.com";
$mailsend = mail($to,$subj,$mess,$headers);

理想情况下，发送表单时有助于显示模式的 JS 行 using a function as defined by Foundation here.

$(document).ready(function() { 
   $('#form-contact').on('valid.fndtn.abide', function() {
     $('.modal').css({'opacity':'1'});
   });
});

据我了解，Abide.js 应该负责所有验证，然后 PHP 文件会将表单发送到指定的电子邮件。既然我已经打破了它，我很难弄清楚从这里该去哪里。

Answer 1

我认为我们缺少太多代码，没有多大帮助:/

当我转到提供的链接时，您的 php 错误位于第 19 行，但没有提供 19 行 php。

你检查过你的 php 语法吗？如果没有，here's a php syntax checker .

关于调用模态，您尝试过基金会的 Reveal 模态插件吗？ Check it out if you haven't .

顺便说一句，网站看起来很棒!