mishaweb
@mishaweb
учусь делать сайты

Ajax перезагрузка формы?

Есть форма, в ней поле ввода числа, нужно получить то что ввел пользователь в поле, записать в переменную, и вывести на этой же странице, без перезагрузки страницы, типо нажал кнопку проверить данные и вывелись данные поля которые ввел
<form method="POST" id="fors" action="" >
<input type="text" name="sum" value="">
<input type="button"  value="Проверить данные">
<input type="submit" id="btn" name="sum" value="Отправить" />
</form>

<?php
$sum = $_GET["sum"];
if(!$sum)
{$sum = "Вы ничего не написали";}
echo $sum;
?>

А вот как сделать обработку через ajax по клику не понимаю, в ajax нуль, прошу помощи, либой, гугл к сожалению не помог (
  • Вопрос задан
  • 128 просмотров
Пригласить эксперта
Ответы на вопрос 1
@darknefrit
Добавьте имя форме, и на кнопку проверить повести событие onclick="checkData(event)", в функции checkData выполните проверку и выведите результат куда надо
<form method="POST" id="fors" action="" name="formName"  >
<input type="text" name="sum" value="">
<input onclick="checkDataAjax(event)" type="button"  value="Проверить данные">
<input type="submit" id="btn" name="sum" value="Отправить" />
</form>
<div id="target"></div>

function checkDataAjax(event){
  event.preventDefault(); 
  form = new FormData(document.formName);
  let options = {
                method: "POST",               
                body:formData,
                credentials: "include",
                mode: 'cors'
            };
       let URL = "АдресВашегоСервера";
			let request = new Request(URL, options);
			
            fetch(request, options).then(function (response) {				
                return response.json();
            }).then(function (response) {
               document.getElementById('target').innerHTML = response;
            }).catch(function (error) {
              console.log(error);          
            });
  
}

Demo

Только на сервере не $_GET а $_POST
<?php
$sum = $_POST["sum"];
if(!$sum)
{$sum = "Вы ничего не написали";}
echo $sum;
?>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы