Madeas
@Madeas
UI / UX Designer, Frontend Developer

Как заменить содержание формы?

Всем привет. Подскажите, как исправить формы?
Раньше стояла форма обратной связи, где, при отправке письма на ее место вставала галочка с уведомлением. Вот php:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (isset($_POST['formData'])) {$formData = $_POST['formData'];}
    if (isset($_POST['name'])) {$name = $_POST['name'];}
    if (isset($_POST['phone'])) {$phone = $_POST['phone'];}
    if (isset($_POST['email'])) {$email = $_POST['email'];}
    if (isset($_POST['message'])) {$message = $_POST['message'];}
    $to = "example@mail.ru";
    $headers = "Content-type: text/plain; charset = utf-8";
    $subject = "$formData";
    $message = "$formData\n\nОткуда: $email \n\nОтправитель: $name \n\nТелефон: $phone \n\nСообщение: $message";
    $send = mail ($to, $subject, $message, $headers);
    if ($send == 'true')
    {
    echo "
	<center>
	<p style='font-size:1rem'>Спасибо за отправку вашего сообщения! <br>Наши специалисты свяжутся с вами в течение часа.</p>
	<div class='ksadake'>
		<svg viewbox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'>
			<path d='M 18 32.34 l -8.34 -8.34 -2.83 2.83 11.17 11.17 24 -24 -2.83 -2.83 z' stroke='#3da35a' fill='transparent'/>
		</svg>
	</div>
	</center>
	<style>
	.ksadake svg {
		max-width:370px;
	}
	</style>";
    }
    else 
    {
    echo "
	<center><b>Ошибка. Сообщение не отправлено! Проверьте правильность введенных данных</b>
	<br>
	<svg id='psfmje' width='12' height='12' viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
    <defs>
        <linearGradient x1='0%' y1='0%' x2='100%' y2='100%' id='linearGradient-1'>
            <stop stop-color='#DD5497' offset='0%'></stop>
            <stop stop-color='#F9BDAA' offset='100%'></stop>
        </linearGradient>
    </defs>
    <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
        <g transform='translate(-1022.000000, -5316.000000)' fill='url(#linearGradient-1)' id='Pricing-Guide'>
            <g transform='translate(150.000000, 4786.000000)'>
                <path d='M880.058875,536 L884,539.941125 L881.941125,542 L878,538.058875 L874.058875,542 L872,539.941125 L875.941125,536 L872,532.058875 L874.058875,530 L878,533.941125 L881.941125,530 L884,532.058875 L880.058875,536 Z' id='Combined-Shape-Copy-6'></path>
            </g>
        </g>
    </g>
	</svg>
	</center>";
    }
} else {
    http_response_code(403);
    echo "Попробуйте еще раз";
}
?>


Сейчас пришлось идти по другому пути и заменить его на:

<?
if (array_key_exists('message', $_POST)) {
   $to = 'example@mail.ru';
   $subject = 'Заявка с сайта '.$_SERVER['HTTP_REFERER'];
   $subject = "=?utf-8?b?". base64_encode($subject) ."?=";
   $message = "Имя: ".$_POST['name']."\nEmail: ".$_POST['mail']."\nТелефон: ".$_POST['phone']."\nКомпания: ".$_POST['company']."\nIP: ".$_SERVER['REMOTE_ADDR']."\nСообщение: ".$_POST['message'];
   $headers = 'Content-type: text/plain; charset="utf-8"';
   $headers .= "MIME-Version: 1.0\r\n";
   $headers .= "Date: ". date('D, d M Y h:i:s O') ."\r\n";
   mail($to, $subject, $message, $headers);
   echo $_POST['name'];
}
?>


+ обработчик:

document.getElementById('feedback-form').addEventListener('submit', function(evt) {
        var http = new XMLHttpRequest(),
          f = this;
        evt.preventDefault();
        http.open("POST", "feedback.php", true);
        http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        http.send("name=" + f.name.value + "&mail=" + f.mail.value + "&phone=" + f.phone.value + "&message=" + f.message.value);
        http.onreadystatechange = function() {
          if (http.readyState == 4 && http.status == 200) {
            alert(http.responseText + ', Ваше сообщение получено.');
            f.message.removeAttribute('value'); 
            f.message.value = '';
          }
        }
        http.onerror = function() {
          alert('Извините, данные не были переданы');
        }
      }, false);


Но в этом обработчике уведомления выводятся через алерт. Подскажите, как переделать обработчик, чтобы вместо алертов, на месте формы вставала старая галочка/крестик с текстом? Как раньше.
Или можно сократить как-то обработчик и прописать ответы в php
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
@nurjigit92
Вставьте свою форму в div
Допустим форма форма форма
поменяй:
alert(http.responseText + ', Ваше сообщение получено.');
на:
document.getElementById("test").innerHTML = "Ваше сообщение получено"

если остальное все правильно, то должно работать.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Вставить нужный html в html, скрыть (допустим класс hide добавить), по результату убирать класс hide.
Ответ написан
Ваш ответ на вопрос

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

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