Отправка формы с 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);
})