Отправка формы с Js на php методом post через ajax

index.php

<form class="Callbackform-Popup-form" action="" method="post" id="CallBackform">

    <div class="input-group input-group-lg form-name">
      <span class="input-group-text" id="inputGroup-sizing-lg">Имя</span>
      <input type="text" name="CallBackform-name" id="CallBackform-namePopUp" class="form-control" maxlength="25">
    </div>
    <div class="input-group input-group-lg form-number">
      <span class="input-group-text" id="inputGroup-sizing-lg">Номер телефона</span>
      <input type="tel" name="CallBackform-number" id="CallBackform-numberPopUp" class="form-control"
        placeholder="+7 (___)-___-__-__">
    </div>
    <div class="input-group input-group-lg form-email">
      <span class="input-group-text" id="inputGroup-sizing-lg">E-mail</span>
      <input type="email" name="CallBackform-email" id="form-emailPopUp" class="form-control _email" maxlength="75">
    </div>
    <div class="form-floating">
      <textarea class="form-control form-comment" placeholder="Оставьте ваш комментарий" id="floatingTextarea2"
        maxlength="350" name="CallBackform-text" style="height: 150px;"></textarea>
      <label for="floatingTextarea2">Ваши вопросы</label>
    </div>
    <button type="submit" id="form-button" name="CallBack-btn" class="btn form-button">Заказать звонок</button>
    <div>
      <p id="CallBack-message">

      </p>
    </div>
  </form>

js.js

let form = document.getElementById("CallBackform");
if(form){
    form.addEventListener("submit", formSend);


    async function formSend(e){
        e.preventDefault();
        let formData = new FormData(form);
        var object = {};
        formData.forEach(function(value, key){
            object[key] = value;
        });
        var json = JSON.stringify(object);
        console.log(json);
        $.ajax({
            type: "post",
            url: "tg.php",
            data: json,
            contentType: false,
            cache: false,
            processData: false
        }).done(function(result){
            alert(result);
        })
    }
}

tg.php

    <?php
session_start();
$name = $_POST['CallBackform-name'] ?? '';
$phone = $_POST['CallBackform-number'] ?? '';
$email = $_POST['CallBackform-email'] ?? '';
$text = $_POST['CallBackform-text'] ?? '';


var_dump($_POST);
?>

Итого строка в консоли:

{"CallBackform-name":"Имя","CallBackform-number":"+7 (999)-999-99-99","CallBackform-email":"mail@mail","CallBackform-text":"вопрос"}

Строка в alert:

array(0){
}

Видеороликов пересмотрел сотни: одни говорят одно, другие говорят другое. Но у меня ни то, ни другое не пашет. Помогите пожалуйста!


Ответы (1 шт):

Автор решения: Алексей Шиманский

В данном случаа надо удалить contentType и processData, а также передавать в data просто object


А при использовании Jquery и отсутствии файлов вообще проще сделать так:

$.ajax({
    type: "post",
    url: "tg.php",
    data: $('#CallBackform').serialize(),
}).done(function(result){
    alert(result);
})
→ Ссылка