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

Question

[Михаил Иванов]

Есть форма, в ней поле ввода числа, нужно получить то что ввел пользователь в поле, записать в переменную, и вывести на этой же странице, без перезагрузки страницы, типо нажал кнопку проверить данные и вывелись данные поля которые ввел

<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 нуль, прошу помощи, либой, гугл к сожалению не помог (

Answer 1

[Ао]

Добавьте имя форме, и на кнопку проверить повести событие 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;
?>

Comments

[Михаил Иванов]

Спасибо вам за отклик, но у меня ошибка Uncaught ReferenceError: checkData is not defined
думаю я что то не так делаю, можете подсказать в чем проблема?
let URL = "АдресВашегоСервера"; - вот на месте АдресВашегоСервера что должно стоять ip или домен?)

[Ао]

Домен куда отправляете данные, https://домен.ru/скрипт.php

ну пишет что функци checkData не определена, Вы в инпуте переименовали её ?

[Михаил Иванов]

darknefrit, нет имя не менял, как у вас стоит, функция и в инпуте одинаковое название, и та же ошибка

[Михаил Иванов]

darknefrit, SyntaxError: Unexpected token В in JSON at position 0
сейчас в консоли пишет такой ответ

[Ао]

fetch(request, options).then(function (response) {				
                return response.text();
            }).then(function (response) {
console.log(response)
               document.getElementById('target').innerHTML = response;
            }).catch(function (error) {
              console.log(error);          
            });

Перепишите вот так и посмотрите что вам приходит в консоли. не правильный json приходит. пиши в вк если не разберёшся

[Михаил Иванов]

darknefrit, в ответ приходит то что написано в php файле, {$sum = "Вы ничего не написали";} -> Вы ничего не написали

[Ао]

Михаил Иванов, Ясно, тогда вот так попробуйте

{
$sum = json_encode(["message"=>"Вы ничего не написали"])
}

а fetch

fetch(request, options).then(function (response) {				
                return response.json();
            }).then(function (response) {
                console.log(response)
               document.getElementById('target').innerHTML = response.message;
            }).catch(function (error) {
              console.log(error);          
            });

[Михаил Иванов]

darknefrit, выводит тоже самое "Вы ничего не написали"(

[Ао]

$sum = $_POST["sum"];

           if(!$sum){
               $sum = json_encode(["message"=>"Вы ничего не написали"]);
           } else {
               $sum = json_encode(["message"=>$sum]);
           }
           echo $sum;

<script  type= text/javascript>
		   function checkDataAjax(event){
			   event.preventDefault();
			   console.log(document.formName);
		   let form = new FormData(document.formName);

		   let options = {
			   method: "POST",
			   body:form
		   };

		   let URL = "АдресСервера";
		  

		   fetch(URL, options).then(function (response) {
			   return response.json();
		   }).then(function (response) {
		   	 console.log(response);
			   document.getElementById('target').innerHTML = response.message;
		   }).catch(function (error) {
			   console.log(error);
		   });

		   }

так работает Demo