Question

使用Zurb Foundation 5和联系表格将不会提交。单击提交按钮时没有任何反应。它应该用谢谢消息替换表单并将表单数据发送到我的电子邮件。任何帮助都非常感谢...

HTML：

<body>    
  <section id="footer">
    <div class="row">
        <div class="small-12 medium-6 large-6 columns">
            some other stuff
        </div>
        <div class="small-12 medium-6 large-6 columns">
            <form id="myForm" data-abide="ajax">
                <div class="contactform">
                    <div class="name-field">
                        <label>Your name <small>required</small>
                        <input id="name" type="text" required pattern="[a-zA-Z]+">
                        <small class="error">Be sure and leave your name.</small>
                        </label>

                    </div>
                    <div class="email-field">
                        <label>Email <small>required</small>
                        <input id="email" type="email" required>
                        <small class="error">Oops, you forgot your email.</small>
                        </label>

                    </div>
                    <div class="text-field">
                        <label>Message <small>required</small>
                        </label>
                        <textarea id="message" required></textarea>
                        <small class="error">I see you're the quiet type. How about a short message?</small>
                    </div>
                    <button type="submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
</section>

JS：

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).on('opened', '[data-reveal]', function () {
var modal = $(this);
$(window).trigger('resize');
});
</script>

<script>
  $(document).foundation();
</script>

<script>    
    $('#myForm')
    .on('valid.fndtn.abide', function () {
        var name = $("input#name").val();
        var email = $("input#email").val();
        var message = $("textarea#message").val();

        //Data for response
        var dataString = 'name=' + name +
            '&email=' + email +
            '&message=' + message;

        //Begin Ajax call
        $.ajax({
            type: "POST",
            url:"php/mail.php",
            data: dataString,
            success: function() {
                $('.contactform').html("<div id='thanks'></div>");
                    $('#thanks').html("<h2>Thanks!</h2>")
                    .append("<p>Glad to hear from you "+ name +"! I'll be in touch soon.</p>")
                    .hide()
                    .fadeIn(1500);
            },
            }); //ajax call
            return false;
    });
</script>

PHP

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

$msg = "

Name: $name
Email: $email
Comments:
$message
";

$to = "parker.w.gibson@gmail.com";
$subject = "Web Form";
$message = $msg;
$headers = "Web Form";
mail($to,$subject,$message,$headers);

?>

编辑以分隔JS

Answer 1

我认为这是某种跨域问题。您的代码实际上是在尝试创建跨域（ CORS ）请求，而不是普通的POST。现代浏览器只允许Ajax调用与请求在同一域中的服务。要在远程服务器上启用CORS，请转到以下网页，该网页提供了有关不同类型服务器的说明。请阅读this。

<强> FYI

CORS

联系表格未提交

1 个答案: