Блог

Я отлаживал эту форму последние два дня и просто не могу понять, что происходит ..! Кажется, что все переменные и идентификаторы формы проверяются в каждом файле, но когда я его загружаю..Я получаю код ошибки JS-файла «Извините, ‘name’, возникла проблема».

Есть идеи?

.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'>amp;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'>amp;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.nn" . "User info:nnName: $namennCompany: $companynnE-mail: $emailnnTelephone: $phonennWebsite: $websitennMessage: $message";
$headers       = "From: Form website <my.email@email.com>rn";
mail($to, $email_subject, $email_body, $headers);
return true;
?>
  

Спасибо!!

Вы пытаетесь получить значение из переменной $qualform в вашем PHP-коде, которая не существует, таким образом, это выдаст вам ошибку (что означает неверный код состояния), которая затем запускает функцию ошибки в вашем JS.

Попробуйте чаще использовать сетевой инспектор в Chrome, вы сможете видеть все входящие и исходящие запросы с данными, которые отправляются обратно.

Я также советую использовать текстовый редактор, такой как PhpStorm, который выделяет синтаксические ошибки или неразрешенные переменные, и использовать отладчик, такой как xdebug, для приостановки вашего кода, чтобы посмотреть, что находится внутри ваших переменных.