不能让JS表单工作


Can't get JS form working

过去两天我一直在调试这个表单,我就是不知道发生了什么…!var和表单ID似乎都在每个文件中检查,但当我上传它时,我得到JS文件的错误代码"对不起,'名称',有问题"。

任何想法?

. html

<div class="col-md-6  padding-none">
                    <div class="box-white padding-all">
                        <h2 class="title-border right block-mobile">Contact Headquarters</h2>
                        <div class="data-form">
                        <input type="hidden" name="qualform" id="qualform" value="Headquarters">
                            <form action="post" name="sentMessage" id="contactForm" novalidate>
                            <div class="row">
                                <div class="col-md-6 col-md-6 col-md-12 col-md-12">
                                    <label>Name</label>
                                    <div class="form-field">
                                        <i class="fa fa-user"></i>
                                        <input type="text" class="form-control" name="name" placeholder="Enter your name" id="name" required>
                                    </div>
                                </div>
                                <div class="col-md-6 col-md-6 col-md-12 col-md-12">
                                    <label>Company</label>
                                    <div class="form-field">
                                        <i class="fa fa-building-o"></i>
                                        <input type="text" class="form-control" name="company" placeholder="Enter your company" id="company" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-md-6 col-md-12 col-md-12">
                                    <label>Telephone</label>
                                    <div class="form-field">
                                        <i class="fa fa-phone"></i>
                                        <input type="tel" class="form-control" name="phone" placeholder="Enter your telephone" id="phone" required>
                                    </div>
                                </div>
                                <div class="col-md-6 col-md-6 col-md-12 col-md-12">
                                    <label>E-Mail</label>
                                    <div class="form-field">
                                        <i class="fa fa-envelope-o"></i>
                                        <input type="email" class="form-control" name="email" placeholder="Enter your email" id="email" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-md-6 col-md-12 col-md-12">
                                    <label>Website</label>
                                    <div class="form-field">
                                        <i class="fa fa-globe"></i>
                                        <input type="text" class="form-control" name="website" placeholder="Enter your website" id="website">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-xs-12 col-xs-12 col-xs-12">
                                    <label>Message</label>
                                    <div class="form-field">
                                        <i class="fa fa-pencil-square-o"></i>
                                        <textarea class="form-control" name="message" placeholder="Enter your message" id="message" required></textarea>
                                        <div id="success"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-xs-12 col-xs-12 col-xs-12">
                                <button type="submit" class="btn btn-dark">SEND YOUR MESSAGE</button>
                                </div>
                            </div>
                            </form>
                        </div></div>
                    </div>
                </div>

. js

$(function() {
    $("input,textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function($form, event) {
            event.preventDefault(); // prevent default submit behaviour
            // get values from FORM
            var name = $(".show input#name").val();
            var company = $(".show input#company").val();
            var email = $(".show input#email").val();
            var phone = $(".show input#phone").val();
            var website = $(".show input#website").val();
            var message = $(".show textarea#message").val();
            var qualform = $(".show input#qualform").val();
            var firstName = name; 
            // For Success/Failure Message
            // Check for white space in name for Success/Fail message
            if (firstName.indexOf(' ') >= 0) {
                firstName = name.split(' ').slice(0, -1).join(' ');
            }
            $.ajax({
                url: '../mail/contact_me.php',
                type: "POST",
                data: {
                    name: name,
                    company: company,
                    phone: phone,
                    email: email,
                    website: website,
                    message: message,
                    qualform: qualform,
                },
                cache: false,
                success: function() {
                    // Success message
                    $('.show #success').html("<div class='alert alert-success'>");
                    $('.show #success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('.show #success > .alert-success')
                        .append(firstName + ", your e-mail was successfully sent.");
                    $('.show #success > .alert-success')
                        .append('</div>');
                    //clear all fields
                    $('.show #contactForm').trigger("reset");
                },
                error: function() {
                    // Fail message
                    $('.show #success').html("<div class='alert alert-danger'>");
                    $('.show #success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('.show #success > .alert-danger').append("<strong>Sorry, " + firstName + ", it seems like there is a problem. Please try again");
                    $('.show #success > .alert-danger').append('</div>');
                    //clear all fields
                    $('.show #contactForm').trigger("reset");
                },
            })
        },
        filter: function() {
            return $(this).is(":visible");
        },
    });
    $("a[data-toggle='"tab'"]").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
    });
});

/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
    $('.show #success').html('');
});

。php

<?php
// sanitize
foreach ($_POST as $key => $value) {
    if (ini_get('magic_quotes_gpc'))
        $_POST[$key] = stripslashes($_POST[$key]);
    $_POST[$key] = htmlspecialchars(strip_tags($_POST[$key]));
}
// Check for empty fields
if (empty($_POST['name']) || empty($_POST['company']) || empty($_POST['phone']) || empty($_POST['message']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
    echo "No arguments Provided!";
    return false;
}
$name          = $_POST['name'];
$company       = $_POST['company'];
$email         = $_POST['email'];
$phone         = $_POST['phone'];
$website       = $_POST['website'];
$message       = $_POST['message'];
$to            = 'my.email@email.com';
$email_subject = "Contact from website website ($qualform)";
$email_body    = "New form from $qualform.'n'n" . "User info:'n'nName: $name'n'nCompany: $company'n'nE-mail: $email'n'nTelephone: $phone'n'nWebsite: $website'n'nMessage: $message";
$headers       = "From: Form website <my.email@email.com>'r'n";
mail($to, $email_subject, $email_body, $headers);
return true;
?>

谢谢! !

你试图从一个变量$qualform在你的PHP代码不存在的值,因此它会给你一个错误(这意味着一个坏的状态代码),然后触发你的JS中的错误函数。

尝试在chrome中使用更多的网络检查器,您将能够看到所有入站和出站请求以及发回的数据。

我还建议使用PHPStorm这样的文本编辑器来突出显示语法错误或未解析的变量,并使用xdebug这样的调试器来暂停代码以查看变量内部的内容。