@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>


Я написал 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;
	}


В общем маюсь уже день, не могу понять что не так. Явно здесь есть люди в сотни раз опытнее, подскажите, как исправить, что добавить/убрать.
  • Вопрос задан
  • 123 просмотра
Пригласить эксперта
Ответы на вопрос 1
@Fenix957
Нужно прерывать событие отправки а не клика
т.к форму могут и просто этером пробелом и т д тригернуть
Так должно сработать

const element = document.querySelector('#ajax');<br>
element.addEventListener('submit', event => {<br>
  event.preventDefault();<br>
$.ajax ({<br>
    url: 'calc.php',<br>
    type: 'POST',<br>
    cache:false,<br>
    data: {'name':name},<br>
    dataType: 'html',<br>
    beforeSend:function() {<br>
      $("btn").prop("disabled", true); /* После отправки кнопка становиться неактиной, что бы на неё не тыкали 100500 раз */<br>
    },<br>
    success: function(dsm) {<br>
        alert($name);<br>
      $("#btn").prop("disabled", false);<br>
    }<br>
  });<br>
    return false;<br>
});
Ответ написан
Ваш ответ на вопрос

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

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