联系表格未提交

Contact Form Not Submitting

本文关键字：提交 表格 联系      更新时间：2023-09-26

使用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

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

仅供参考

科尔斯

相关文章：