Как отправить форму обработчику PHP без перехода на нее?

Question

[Shuboanator]

Суть в том, что при отправке формы открывает белую и чистую страницу PHP.

Можно как-то этого избежать, чтобы после отправки оставаться на этой же странице?

Comments

[Shuboanator]

Cделал все как указано в мануалке. www.poseti.net/otpravka-formyi.html
Вместо res.php поставил свой PHP, но почему то форма вообще перестала работать.

[Юрий Лобанов]

@Shuboanator И сразу решили, что все ответы неправильные! Браво!

[Shuboanator]

@iiil (просто что бы у вопроса небыло (Вопрос решен)) Потом верну)

[Shuboanator]

как то так?

<script type="text/javascript" src="css/jquery.min.js"></script>
<script type="text/javascript" src="css/animate.js"></script>
<script type="text/javascript" src="http://yandex.st/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
    function call() {
      var msg   = $('#forms').serialize();
        $.ajax({
          type: 'POST',
          url: 'mail.php',
          data: msg,
          success: function(data) {
            $('.results').html(data);
          },
          error:  function(xhr, str){
                alert('Возникла ошибка: ' + xhr.responseCode);
            }
        });
 
    }
</script>

<form method="POST" id="formx" action="javascript:void(null);" onsubmit="call()">
     <p>Ф.И.О:<font color="#ff5856">*</font><br>
    <input type="text" name="name" class="pole"></p>
    <p>E-mail:<font color="#ff5856">*</font><br>
    <input type="email" name="email" class="pole" ></p>
    <p>Телефон:<font color="#ff5856">*</font><br>
    <input type="tel" name="tel" class="pole" ></p> 
    <p>Коментарии:<br>
    <textarea class="pole1" name="koment"></textarea></p>
    
    <input type="submit" name="button" id="but" value="Отправить">
    </form>

Answer 1

[Александр Карабанов]

Cделал все как указано в мануалке. www.poseti.net/otpravka-formyi.html

jQuery, наверно неправильно подключили.

Либо так подключайте:

<script type="text/javascript" src="http://yandex.st/jquery/2.1.0/jquery.min.js"></script>

Либо скачайте jQuery и поместите рядом с вашими скриптами (естественно путь параметре "src" придётся поменять)

Comments

[Shuboanator]

@karabanov а если я вставлю вашу ссылку, то где мне указать путь к своему PHP обработчику?

[Александр Карабанов]

Там же, где и раньше указывали :-)

[Shuboanator]

@karabanov как то так?

<script type="text/javascript" src="css/jquery.min.js"></script>
<script type="text/javascript" src="css/animate.js"></script>
<script type="text/javascript" src="http://yandex.st/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
    function call() {
      var msg   = $('#forms').serialize();
        $.ajax({
          type: 'POST',
          url: 'mail.php',
          data: msg,
          success: function(data) {
            $('.results').html(data);
          },
          error:  function(xhr, str){
                alert('Возникла ошибка: ' + xhr.responseCode);
            }
        });
 
    }
</script>

<form method="POST" id="formx" action="javascript:void(null);" onsubmit="call()">
     <p>Ф.И.О:<font color="#ff5856">*</font><br>
    <input type="text" name="name" class="pole"></p>
    <p>E-mail:<font color="#ff5856">*</font><br>
    <input type="email" name="email" class="pole" ></p>
    <p>Телефон:<font color="#ff5856">*</font><br>
    <input type="tel" name="tel" class="pole" ></p> 
    <p>Коментарии:<br>
    <textarea class="pole1" name="koment"></textarea></p>
    
    <input type="submit" name="button" id="but" value="Отправить">
    </form>

[Александр Карабанов]

Только не надо jQuery двух разных версий одновременно подключать. Уберите:

<script type="text/javascript" src="css/jquery.min.js"></script>

[Александр Карабанов]

И в форме идентификатор указан id="formx", а в скрипте #forms, надо сделать и там и там одинаково.

[Shuboanator]

@karabanov Как отправить форму обработчику PHP без перехода на нее? гляньте еще туда если не сложно)

[Александр Карабанов]

Так ведь там же тоже самое...

[Shuboanator]

@karabanov :D
нее просто обработчик вроде написан корректно, а вот само сообщение вместо [name] приходит пустое. вот в чем беда то

[Александр Карабанов]

Вот так должно работать:

<script type="text/javascript" src="http://yandex.st/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
    function call() {
      var msg   = $('#forms').serialize();
        $.ajax({
          type: 'POST',
          url: 'mail.php', // Если обработчик лежит не рядом с формой, то здесь следует указать полный путь до него. Например http://example.com/mail.php
          data: msg,
          success: function(data) {
            $('#results').html(data);
          },
          error:  function(xhr, str){
                alert('Возникла ошибка: ' + xhr.responseCode);
            }
        });
 
    }
</script>

<form method="POST" id="forms" action="javascript:void(null);" onsubmit="call()">
     <p>Ф.И.О:<font color="#ff5856">*</font><br>
    <input type="text" name="name" class="pole"></p>
    <p>E-mail:<font color="#ff5856">*</font><br>
    <input type="email" name="email" class="pole" ></p>
    <p>Телефон:<font color="#ff5856">*</font><br>
    <input type="tel" name="tel" class="pole" ></p> 
    <p>Коментарии:<br>
    <textarea class="pole1" name="koment"></textarea></p>
    
    <input type="submit" name="button" id="but" value="Отправить">
    </form>

<div id="results">вывод</div>

В целях отладки код обработчика приведите к виду:

<?php
print_r($_POST);
exit;

// дальше ваш код обработчика
?>

То есть в самый верх файла, сразу после тэга <?php добавьте эту конструкцию.

[Shuboanator]

@karabanov

<?php

print_r($_POST);
exit;

$result=mail("[e-mail]","Обратный звонок","Анкета с сайта: Имя: $_POST[name1]");
	

?>

Так что ли?

[Александр Карабанов]

Ога.

[Александр Карабанов]

Ну что? Выводится что-нибудь?

[Shuboanator]

@karabanov выводится, как и выводилось "Анкета с сайта: Имя:(вместо заполненого поля тут пусто)"

[Shuboanator]

@karabanov а exit точно надо оставлять? при нем вообще на почту ничего не приходит.

[Александр Карабанов]

Ты не понял ничего...
Ничего и не должно приходить! Тот код который я привел должен вывести содержимое формы на странице с формой в блоке с id="results". Таким образом ты убедишься, что AJAX работает. Если же такой простой код не работает, значит ты что-то делаешь не так.

[Shuboanator]

@karabanov так вроде понял. А если мне надо, что бы он отправлял данные формы мне на почту? то что в этом случае?

[Александр Карабанов]

Сейчас проверил и все работает. Такой простой код не может не работать:

[Александр Карабанов]

Вот теперь, когда на 100% ясно, AJAX работает можно заняться обработчиком.
Вот тебе мануал по функции mail()

Вытянуть из супер-глобального массива $_POST данные можно так: $_POST['name'], $_POST['email'] и т.д. То есть ключи массива это имена полей твоей формы.

Например можешь пока потренироваться и обработчик привести к виду:

<?php
echo 'В качестве имени вы введи'.$_POST['name'].'<br>';
echo 'В качестве e-mail вы введи'.$_POST['email'].'<br>';

// С остальными полями все точно также. 
?>

Потом разберись с функцией mail() и понавтыкай содержимое супер-глобального массива $_POST в качестве параметров этой функции.

[Александр Карабанов]

Ну как? Теперь выводится что-нибудь?

[Shuboanator]

@karabanov знаю, что достал, но при отправке формы у меня ошибка вылезает Ява скрипт (в браузере)

[Александр Карабанов]

Скопируй мой код прямо с этой страницы он рабочий. Ты делаешь иного мелких, глупых ошибок, так как не понимаешь как работает JS и, передаются данные между клиентом и сервером. Посмотри на скриншотах, как у меня сделано (скриншоты полноразмерные это их сайт отмасштабировал, открой их в соседней вкладке и посмотри как у меня написано)

[Shuboanator]

@karabanov

<title>Документ без названия</title>
<script type="text/javascript" src="http://yandex.st/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
    function call() {
      var msg   = $('#forms').serialize();
        $.ajax({
          type: 'POST',
          url: 'mail.php', // Если обработчик лежит не рядом с формой, то здесь следует указать полный путь до него. Например http://example.com/mail.php
          data: msg,
          success: function(data) {
            $('#results').html(data);
          },
          error:  function(xhr, str){
                alert('Возникла ошибка: ' + xhr.responseCode);
            }
        });
 
    }
</script>
</head>

<body>
<form method="POST" id="forms" action="javascript:void(null);" onsubmit="call()">
     <p>Ф.И.О:<font color="#ff5856">*</font><br>
    <input type="text" name="name" class="pole"></p>
    <p>E-mail:<font color="#ff5856">*</font><br>
    <input type="email" name="email" class="pole" ></p>
    <p>Телефон:<font color="#ff5856">*</font><br>
    <input type="tel" name="tel" class="pole" ></p> 
    <p>Коментарии:<br>
    <textarea class="pole1" name="koment"></textarea></p>
    
    <input type="submit" name="button" id="but" value="Отправить">
    </form>

<div id="results">вывод</div>

</body>

<?php

echo '<pre>';
print_r($_POST);
exit;

?>

В чем я опять ошибаюсь?(

[Александр Карабанов]

А пофиг на тебе готовый код:

Это обработчик mail.php:

<?php
echo 'В качестве имени вы введи'.$_POST['name'].'<br>';
echo 'В качестве e-mail вы введи'.$_POST['email'].'<br>';

// С остальными полями все точно также. 
?>

Это форма test.php:

<html>
<head>
<title>Форма</title>

<script type="text/javascript" src="http://yandex.st/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
    function call() {
      var msg   = $('#forms').serialize();
        $.ajax({
          type: 'POST',
          url: 'mail.php', // Если обработчик лежит не рядом с формой, то здесь следует указать полный путь до него. Например http://example.com
          data: msg,
          success: function(data) {
            $('#results').html(data);
          },
          error:  function(xhr, str){
                alert('Возникла ошибка: ' + xhr.responseCode);
            }
        });
    }
</script>

<form method="POST" id="forms" action="javascript:void(null);" onsubmit="call()">
     <p>Ф.И.О:<font color="#ff5856">*</font><br>
    <input type="text" name="name" class="pole"></p>
    <p>E-mail:<font color="#ff5856">*</font><br>
    <input type="email" name="email" class="pole" ></p>
    <p>Телефон:<font color="#ff5856">*</font><br>
    <input type="tel" name="tel" class="pole" ></p> 
    <p>Коментарии:<br>
    <textarea class="pole1" name="koment"></textarea></p>

    <input type="submit" name="button" id="but" value="Отправить">
    </form>

<div id="results">вывод</div>

</head>
<body>
</body>
</html>

[Александр Карабанов]

Потом просто подставь $_POST['здесь_имя_поля'] в соответсвующий параметр функции mail() и придёт тебе на почту все, что должно прийти.

[Александр Карабанов]

В чем я опять ошибаюсь?(

Здесь ни в чём. Это вполне рабочий код.

[Shuboanator]

@karabanov сейчас сделал тест PHP и он выдает ошибку скрипка, хотя скопировал прям из кода сверху

[Александр Карабанов]

Какую ошибку выдаёт?

[Shuboanator]

@karabanov ПОЛУЧИЛОСЬ :ВВВВВВВВВВВВВВ

[Shuboanator]

@karabanov СПАСИБО,ЧТО МУЧАЛСЯ ЦЕЛЫЙ ДЕНЬ И НАУЧИЛ. я так счастлив)

[Александр Карабанов]

:-)

[Александр Карабанов]

А в чём был косяк?

[Shuboanator]

@karabanov тупая невнимательность...... форма теперь приходит в идеальном виде)

Осталось разобраться, как сделать, что бы после отправки формы, введенные данные обнулялись(пытаюсь сделать див кнопку для ввода и резета одновременно))

Answer 2

[Rsa97]

ajax

Answer 3

[Александр Карабанов]

HTTP-заголовок Location решит вашу проблему.

Пример использования:

<?php
/* После обработки полученных данных
перенаправляем пользователя обратно на страницу с формой */
header('Location: http://www.example.com/form.php');
exit;
?>

Comments

[Shuboanator]

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

[Александр Карабанов]

Ну да.

Answer 4

[Юрий Лобанов]

Вы можете использовать в качестве обработчика саму страницу с формой. Но скорее всего Вы имеете в виду ajax