Как сделать форму отправки и вывода данных без перезагрузки страницы?

Question

[Iluy]

Есть форма

<form method='POST'>
     <h2>Введите квадратуре:</h2>
     <input type="number" name="name" placeholder="Если 20м3">
     <input type="submit" value="Отправить">
</form>

Есть файл пхп с выводом ответа. Всё работает, но перезагружает страницу. Как сделать без перезагрузки. Пробовал с ajax но не срабатывает!

<?php
//Получить имя из строки запроса и сохранить в локальной переменной
     $name = $_POST['name'];
	 if($name <= 20){
		 echo "1590 р.<br/>";
	 }else if ($name > 20 && $name <= 25){
		 echo "1790 р.<br/>";
	 } else if ($name > 25 && $name <= 30){
		 echo "1990 р.<br/>";
	 }

?>

Comments

[Ипатьев]

Ну так и надо написать, как "пробовал", чтобы мы могли помочь

[John Didact]

Просишь ввести площадь, а в форме написано об объёме... Странно.

[Iluy]

John Didact, да, сорян, опечатка

[Сергей delphinpro]

Попробовать поиск – для слабаков?
https://yandex.ru/search/?text=Как+сделать+форму+о...

[Iluy]

Сергей delphinpro, да я всё это попробовал, он сей равно делает перезагрузку. Естественно я гуглил и подставлял в свой пример разные варианты, но конкретно в моем примере это не срабатывает.

[Сергей delphinpro]

Iluy, тогда где "конкретно ваш пример"?

[Iluy]

Сергей delphinpro, Есть форма с рабочей отправкой. То есть всё работает, но перезагружает страницу.

<div class="container-fluid">
     <h2 style="text-align:center; color:#09745F"> Узнай точную стоимость уборки! </h2>
   <h4 style="text-align:center; color:#09745F"> Просто введи квадратуру комнаты или всей квартиры, которые нужно убрать! </h4>
    
    
<form method='POST' id="ajax" onsubmit="return function dsm();">
     <h2>Введите квадратуру:</h2>
     <input type="number" name="name" placeholder="Если 20м2">
     <input type="submit" id="btn" value="Отправить">
</form>

<?php
//Получить имя из строки запроса и сохранить в локальной переменной
     $name = $_POST['name'];
   if($name <= 20){
     echo "1590 р.<br/>";
   }else if ($name > 20 && $name <= 25){
     echo "1790 р.<br/>";
   } else if ($name > 25 && $name <= 30){
     echo "1990 р.<br/>";
   }
?>

</div>

AJAX

function dsm()	{
$.ajax ({
		url: 'index.php',
		type: 'POST',
		cache:false,
		data: {'name':name},
		dataType: 'html',
		beforeSend:function() {
			$("btn").prop("disabled", true); /* После отправки кнопка становиться неактиной, что бы на неё не тыкали 100500 раз */
		},
		success: function(dsm) {
				alert($name);
			$("#btn").prop("disabled", false);
		}
	});
    return false;
	}

Сей равно делает перезагрузку!!!!!!

[Сергей delphinpro]

-<form method='POST' id="ajax" onsubmit="return function dsm();">
+<form method='POST' id="ajax" onsubmit="return dsm();">

Зачем здесь function? Вы понимаете что написали?

[Iluy]

Сергей delphinpro, тех. ошибка, фактически ничего не поменялось. Также страница перезагружается.

[Сергей delphinpro]

Iluy,

1. Заходим в консольку.
   
2. Переходим на вкладку Сеть.
   
3. Включаем Preserve log
   
4. Очищаем консоль
   
5. Пробуем отправить форму
   
6. Смотрим, что за ошибка валится
   
7. Сами догадываемся о причине, либо пишем сюда.
   

[Сергей delphinpro]

Iluy, Посмотрел ваши другие комменты в этом вопросе. Вангую, что ошибкой будет что-то типа
$ undefined

Сначала подключаем jquery, потом его используем.

Answer 1

[Slava Rozhnev]

AJAX для новичков

Comments

[Iluy]

я пробовал через AJAX, и сам писал и искал подобные решения, ничего не срабатывает, страница сей равно перезагружается

[Slava Rozhnev]

Iluy, Покажите как использовали AJAX, если не работает, значит использовали не правильно.

[Ипатьев]

Iluy, ну а зачем тогда спрашивать, как сделать, если вы и так знаете?
Откуда такая идея, что если один код у вас не заработал, то другой вот прям заработает?

[Ипатьев]

Ну и где вы вычитали, что AJAX запросы делаются именно так?
По ссылке выше ничего такого нет.
Давайте вы сделаете так, как показано в примерах, а потом начнете жаловаться, что ничего не работает?

[Iluy]

@rozhnev, 
<div class="container-fluid">
     <h2 style="text-align:center; color:#09745F"> Узнай точную стоимость уборки! </h2>
	 <h4 style="text-align:center; color:#09745F"> Просто введи квадратуру комнаты или всей квартиры, которые нужно убрать! </h4>
	 
	 
	 
	 
	 
	 
<form method='POST' id="#ajax">
     <h2>Введите квадратуру:</h2>
     <input type="number" name="name" placeholder="Если 20м2">
     <input type="submit" id="btn" value="Отправить">
</form>

<div id="result"></div>

<?php
//Получить имя из строки запроса и сохранить в локальной переменной
     $name = $_POST['name'];
	 if($name <= 20){
		 echo "1590 р.<br/>";
	 }else if ($name > 20 && $name <= 25){
		 echo "1790 р.<br/>";
	 } else if ($name > 25 && $name <= 30){
		 echo "1990 р.<br/>";
	 }
?>

<script>
    $('#ajax').submit(function(e) {
        e.preventDefault();
        var method = $(this).attr('method');
        var url = $(this).attr('url');
        $[method](url, $(this).serialize(), function(data) {
            $('#result').html(data);
        });
    });
</script>


</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- Подключаем jQuery для форм -->

[Iluy]

Роман Юрьевич Ипатьев,

<div class="container-fluid">
     <h2 style="text-align:center; color:#09745F"> Узнай точную стоимость уборки! </h2>
	 <h4 style="text-align:center; color:#09745F"> Просто введи квадратуру комнаты или всей квартиры, которые нужно убрать! </h4>
	  
	 
	 
<form method='POST' id="ajax" onsubmit="return function dsm();">
     <h2>Введите квадратуру:</h2>
     <input type="number" name="name" placeholder="Если 20м2">
     <input type="submit" id="btn" value="Отправить">
</form>


<?php
//Получить имя из строки запроса и сохранить в локальной переменной
     $name = $_POST['name'];
	 if($name <= 20){
		 echo "1590 р.<br/>";
	 }else if ($name > 20 && $name <= 25){
		 echo "1790 р.<br/>";
	 } else if ($name > 25 && $name <= 30){
		 echo "1990 р.<br/>";
	 }
?>


</div>

function dsm()	{
$.ajax ({
		url: 'index.php',
		type: 'POST',
		cache:false,
		data: {'name':name},
		dataType: 'html',
		beforeSend:function() {
			$("btn").prop("disabled", true); /* После отправки кнопка становиться неактиной, что бы на неё не тыкали 100500 раз */
		},
		success: function(dsm) {
				alert($name);
			$("#btn").prop("disabled", false);
		}
	});
    return false;
	}

ПХП работает!!!!! Но сей равно идет перезагрузка страницы

Answer 2

[Sergo Zar]

<form id="mainForm" onsubmit="return твояфункция();">
<!-- твой код -->

function твояфункция() {

    // здесь ajax запрос

    return false;
}

Дачить/гулить учись.. https://duckduckgo.com/?q=%D0%BA%D0%B0%D0%BA+%D0%B...

Comments

[Iluy]

Да не срабатывает:

<div class="container-fluid">
     <h2 style="text-align:center; color:#09745F"> Узнай точную стоимость уборки! </h2>
	 <h4 style="text-align:center; color:#09745F"> Просто введи квадратуру комнаты или всей квартиры, которые нужно убрать! </h4>
	 
	 
	 
	 
	 
	 
<form method='POST' id="#ajax">
     <h2>Введите квадратуру:</h2>
     <input type="number" name="name" placeholder="Если 20м2">
     <input type="submit" id="btn" value="Отправить">
</form>

<div id="result"></div>

<?php
//Получить имя из строки запроса и сохранить в локальной переменной
     $name = $_POST['name'];
	 if($name <= 20){
		 echo "1590 р.<br/>";
	 }else if ($name > 20 && $name <= 25){
		 echo "1790 р.<br/>";
	 } else if ($name > 25 && $name <= 30){
		 echo "1990 р.<br/>";
	 }
?>

<script>
    $('#ajax').submit(function(e) {
        e.preventDefault();
        var method = $(this).attr('method');
        var url = $(this).attr('url');
        $[method](url, $(this).serialize(), function(data) {
            $('#result').html(data);
        });
    });
</script>


</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- Подключаем jQuery для форм -->

[Алексей Володин]

<form method='POST' id="#ajax">
неверно id прописан. Удалите #
<form method='POST' id="ajax">

[Iluy]

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

[Sergo Zar]

Iluy,

$('#ajax').submit(function(e) {
        e.preventDefault();
        var method = $(this).attr('method');
        var url = $(this).attr('url');
        $[method](url, $(this).serialize(), function(data) {
            $('#result').html(data);
        });
        return false; //ты забыл
    });

Answer 3

[Developer]

Через Ajax

Comments

[Iluy]

серьёзно?