Добрый день! Стоит задача: иметь на странице форму отправки информации на сервер. При этом после отправки форма не должная закрываться, чтобы с нее можно было сделать отправление несколько раз. В качестве прототипа я нашел в сети вот такую простую конструкцию. Код (Text): <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <form id="feedback-form" action=""> <input type="text" name="name" required placeholder="Ваше имя"> <input type="tel" name="phone" required placeholder="Ваш телефон"> <textarea name="text" placeholder="Ваш текст"></textarea> <input type="submit" name="submit" value="Отправить"> </form> <script> $(document).ready(function () { $("form").submit(function () { // Получение ID формы var formID = $(this).attr('id'); // Добавление решётки к имени ID var formNm = $('#' + formID); $.ajax({ type: "POST", url: '/send.php', data: formNm.serialize(), beforeSend: function () { // Вывод текста в процессе отправки $(formNm).html('<p style="text-align:center">Отправка...</p>'); }, success: function (data) { // Вывод текста результата отправки $(formNm).html('<p style="text-align:center">'+data+'</p>'); }, error: function (jqXHR, text, error) { // Вывод текста ошибки отправки $(formNm).html(error); } }); return false; }); }); </script> В качестве обработчика используется файл send.php PHP: $message = 'Имя: ' . $_POST['name'] . ' '; $message .= 'Телефон: ' . $_POST['phone'] . ' '; $message .= 'Текст: ' . $_POST['text'] . ' '; file_put_contents('1-newText.txt', $message); echo "Сообщение отправлено!"; Форма работает, но после передачи она исчезает. Не знаю, как оставить ее на экране для повторного использования. При этом чтобы набранные символы оставались в окнах.
не выводить сообщение ВМЕСТО формы отправки.... или вообще не выводить.... или выводить но в определенный блок формы - который не влияет на саму форму... например под ней, над ней, в всплывающем окне
Всё правильно выше написали, добавлю оффтопик: раз форма останется, добавь дизейбл на кнопку отправки, чтобы случайно не отправить повторно пока обрабатывается предыдущий запрос. Юзеры любят дабл-клик ))) А когда вернется ответ - убирай дизейбл кнопки.
Вообще не выводить сообщение - это не так просто. Если я из обработчика убираю PHP: echo "Сообщение отправлено!"; то форма все равно исчезает, просто вместо нее пустая страница.
HTML: <form id="feedback-form" action="/send.php" method="post"> <input type="text" name="name" required placeholder="Ваше имя"> <input type="tel" name="phone" required placeholder="Ваш телефон"> <textarea name="text" placeholder="Ваш текст"></textarea> <input type="submit" name="submit" value="Отправить"> </form> PHP: $( document ).ready( function () { 'use strict'; function send( url, method, formData = {} ) { return $.ajax( { url: url, type: method, contentType: false, processData: false, data: formData, dataType: 'JSON' } ); } $( document ).on( 'submit', '#feedback-form', function ( event ) { e.preventDefault(); var obj = new FormData( event.get(0) ); send( event.attr( 'action' ), event.attr( 'method' ), obj ) .done( function ( response ) { alert( "success" ); } ) .fail( function () { alert( "error" ); } ); } ) } ); --- Добавлено --- https://api.jquery.com/jquery.ajax/ --- Добавлено --- в ответ ожидает json строку КАК ПОДАБАЕТСЯ ВЕЗДЕ
Mля, тебе кто-то писал что-то убирать из обработчика? Нужно клиентский обработчик ответа править. И см., там форма затирается еще и «Отправкой...» --- Добавлено --- Хотя такой «обработчик» надо нафиг снести. Типичный г/код Это заглушка. «Попрошайки» с форумов часто принимают такой код за чистую монету и втыкают его в прод.
@Vladd55 будь внимательней! тебе указывают конкретно в чем проблема - ты выводишь ответ вместо формы. А мог бы как-то отдельно, в нужном div-е. Если тебе этот момент непонятен, переспроси. Проблема не в обработчике на стороне сервера. ))) Как мимнимум, чтобы понять что происходит, замени Код (Text): $(formNm).html(пох что) на Код (Text): alert(пох что) Попробуй, пойми как это просто и прослезись. Подумай. Ещё раз подумай. А потом попробуй: Код (Text): $(другое место на странице).html(пох что)
Идея ясна, идея хорошая, так даже интересно, спасибо! HTML: <div id="svn"></div> Код (Javascript): // Вывод текста в процессе отправки $("#svn").html('<p style="text-align:center">Отправка...</p>'); }, success: function (data) { // Вывод текста результата отправки $("#svn").html('<p style="text-align:center">'+data+'</p>'); }, error: function (jqXHR, text, error) { // Вывод текста ошибки отправки $("#svn").html(error); } Теперь буду думать, как поступить, если форм будет две или больше, и чтобы сообщение выводилось возле каждой из них.
Для нескольких форм идея такая. Формы имеют разные ID, а DIVы для вывода сообщений имеют впереди названия букву s HTML: <form id="feed" action=""> <input type="text" name="name" required placeholder="Ваше имя"> <input type="tel" name="phone" required placeholder="Ваш телефон"> <input type="hidden" name="id-form" value="first"> <textarea name="text" placeholder="Ваш текст"></textarea> <input type="submit" name="submit" value="Отправить"> </form> <div id="sfeed"></div> <form id="leed" action=""> <input type="text" name="name" required placeholder="Ваше имя"> <input type="tel" name="phone" required placeholder="Ваш телефон"> <input type="hidden" name="id-form" value="dva"> <textarea name="text" placeholder="Ваш текст"></textarea> <input type="submit" name="submit" value="Отправить"> </form> <div id="sleed"></div> Соответственно, в скрипте добавляем эту букву s: Код (Javascript): var formNm = $('#s' + formID); "Сообщение отправлено!" выводится каждое в свой ДИВ. Но данные в $_POST не передаются. Что, в общем-то, и понятно - я вывожу данные из несуществующих форм. Но решение где-то рядом...
Кстати, "о птичках": https://ru.bem.info/methodology/quick-start/ https://habr.com/ru/companies/ruvds/articles/347194/
Спасибо, постараюсь учесть и постепенно освоить эти правила. Хотя еще недавно принцип был совершенно иной: имена как можно короче и CSS без комментариев. Типа as1, as2 и т.п. Сегодня, иной раз, обозначения весят слишком много. HTML: <input type="checkbox" class="form-check-input-zero form-validate-actualite-simbol-state" name="rules-en-disk-zero" value="1" id="form_register_rules_simbol_region">