Отправка формы в html файле через AJAX

Question

Я создал файл contact.html, имеющий форму для связи с нами. Форма, содержащая поля имени, электронной почты и сообщения, а также кнопку отправки.

<section class="module" id="contact" > <!---->
          <div class="container">
            <div class="row">
              <div class="col-sm-6 col-sm-offset-3">
                <h2 class="module-title font-alt">Get in touch</h2>
                <div class="module-subtitle font-serif"></div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-sm-offset-3">
                  <form  id="contactForm" role="form" method="post" action="php/contact.php"> <!---->
                  <div class="form-group">
                    <label class="sr-only" for="name">Name</label>
                    <input class="form-control" type="text" id="name" name="name" placeholder="Your Name*" required="required" data-validation-required-message="Please enter your name."/>
                    <p class="help-block text-danger"></p>
                  </div>
                  <div class="form-group">
                    <label class="sr-only" for="email">Email</label>
                    <input class="form-control" type="email" id="email" name="email" placeholder="Your Email*" required="required" data-validation-required-message="Please enter your email address."/>
                    <p class="help-block text-danger"></p>
                  </div>
                  <div class="form-group">
                    <textarea class="form-control" rows="7" id="message" name="message" placeholder="Your Message*" required="required" data-validation-required-message="Please enter your message."></textarea>
                    <p class="help-block text-danger"></p>
                  </div>
                  <div class="text-center">
                    <button class="btn btn-block btn-round btn-d"  id="cfsubmit" name ="cfsubmit" type="submit">Submit</button><!---->
                  </div>
                </form>
                <div class="ajax-response font-alt" id="contactFormResponse"></div>
              </div>
            </div>
          </div>
        </section>

Это HTML-файл. Также в папке php есть файл php с именем contact.php, который используется для html-страницы. Файл php, содержащий строку кода для предупреждения. Это тестирование.

Код JQUERY для контактной формы:

$("#contactForm").submit(function (e) {

        e.preventDefault();
        var $ = jQuery;

        var postData = $(this).serializeArray(),
            formURL = $(this).attr("action"),
            $cfResponse = $('#contactFormResponse'),
            $cfsubmit = $("#cfsubmit"),
            cfsubmitText = $cfsubmit.text();
            alert(cfsubmitText);
        $cfsubmit.text("Sending...");


        $.ajax(
            {
                url: formURL,
                type: "POST",
                data: postData,
                success: function (data) {
                    $cfResponse.html(data);
                    $cfsubmit.text(cfsubmitText);
                    $('#contactForm input[name=name]').val('');
                    $('#contactForm input[name=email]').val('');
                    $('#contactForm textarea[name=message]').val('');
                },
                error: function ( data ) {
                    alert("Error occurd! Please try again");
                }
            });

        return false;

    });

Этот код не работает хорошо. Пожалуйста, дайте решение для этого.

Answer 1

Пожалуйста, проверьте ниже код для jQuery для передачи данных через AJAX в POST.

$(document).ready(function(){
    $("#contactForm").submit(function(event){
        event.preventDefault();
        var formData = new FormData(this);
          $.ajax({
             url: 'php/contact.php',
             type: 'POST',
             data: formData,
             async: false,
             success: function(result) {
               alert(result);
            },
            cache: false,
            contentType: false,
            processData: false
        });
     });
});

Пожалуйста, удалите атрибут действия в Form.

И код проверки в php/contact.php.

<?php
print_r($_POST);
?>

Answer 2

Используя ваш html, я предлагаю вам использовать отправку формы, используя btn click, а не метод submit с preventDefault. Я создал скрипку , которая должна работать нормально и будет отвечать вашим требованиям. Также вам нужно изменить тип btn с submit на простой button

<button class="btn btn-block btn-round btn-d" id="cfsubmit" name ="cfsubmit" type="button">Submit</button>

$("#cfsubmit").on('click', function (e) {

                const $thisBtn = $(this),
              $form = $('#contactForm'),
                    $cfResponse = $('#contactFormResponse'),
                    formData = $form.serialize();

        $thisBtn.text("Sending...");

        $.ajax({
                url: 'php/contact.php',
                type: "POST",
                data: formData,
                success: function (data) {
                    $cfResponse.html(data);
                    $thisBtn.text('Send');
                    $form.find(':input').val('');
                },
                error: function ( data ) {
                    alert("Error occurd! Please try again");
                }
            });

        return false;

    });