Динамически скрывать форму при отправке? - PullRequest
Новая
       9

Динамически скрывать форму при отправке?

1 голос
/ 18 марта 2009

Я не большой веб-программист, и у меня есть друг, который хочет, чтобы я чем-то ему помог.

Он хочет иметь возможность иметь форму, которая после того, как она будет отправлена, изменится на что-то вроде "Спасибо за отправку", и информация формы исчезнет. Он хочет, чтобы им было легко пользоваться, поэтому он может передать его различным людям на своих сайтах.

Я думал, что смогу использовать javascript, но не уверен на 100%. Я хочу как можно больше избегать всего, что не является HTML, чтобы его могли использовать как можно больше людей.

Спасибо.

Ответы [ 5 ]

4 голосов
/ 18 марта 2009

Что должно происходить с информацией в форме? Не имеет значения?

Если вы хотите, чтобы он был pure HTML, есть только одно хорошее решение: написать одну HTML-страницу с формой, а другую - почти идентичную, с сообщением об успешном выполнении и скрытыми данными формы. Простой.

На стороне подачи: 

<h1>Email Subscription:</h1>
<form action="successForm.html">
<input type="text" name="emailAddress" />
<button type="submit">Send Info</button>
</form>

На принимающей стороне (successForm.html) 

<h1>Email Subscription:</h1>
<p>Great job, you submitted!</p>

Однако, если вам нужно что-то изменить на той же странице, вам придется использовать что-то не-HTML. HTML просто не будет принимать решения о том, что отображать. Он тупой ... он просто показывает.

С помощью JavaScript очень просто определить, когда была отправлена ​​форма, а затем скрыть элементы, которые необходимо скрыть и показать сообщение об успехе : 

<!-- Goes in the <head> or in a seperate script -->
<script type="text/javascript">
    var theSubmitButton = document.getElementById('formSubmit');

    theSubmitButton.onclick = function() {
        var theFormItself = 
            document.getElementById('theForm');
        theFormItself.style.display = 'none';
        var theSuccessMessage = 
            document.getElementById('successMessage');  
        theSuccessMessage.style.display = 'block';          
    }
</script>

<!-- Goes in the body -->
<h1>Email Subscription:</h1>
<p id="successMessage">You submitted the form, good job!</p>
<form id="theForm" action="successForm.html">
    <input type="text" name="emailAddress" />
    <button id="formSubmit" type="submit">Send Info</button>
</form>

Конечно, этот пример упрощен. Он ничего не делает с данными, не следует передовым методам и не проверяет достоверность данных. Я просто пытаюсь дать общее представление о том, как использовать JavaScript для этой цели. Если вы не программист, тогда разработка небольшого распространяемого программного обеспечения может быть хорошей работой для кого-то другого.

Однако вам все еще нужен какой-то механизм для хранения, отправки по электронной почте или каким-либо другим способом ДЕЛАЙТЕ что-нибудь с помощью формы. Добавьте изменения в свой вопрос, и я буду рад уточнить мой ответ на конкретном примере.

(Еще одно замечание, я не пытался запустить этот Javascript, поэтому, если вы видите ошибку, просто запишите, и я исправлю ее)

1 голос
/ 18 марта 2009

Попробуйте плагин jquery form . Это позволит добиться того, что вам нужно, элегантным способом с минимальным кодированием. В дополнение к этому вам нужно скачать jquery.

Это решение javascript, однако можно предположить, что все используют браузер с поддержкой javascript.

0 голосов
/ 09 апреля 2017

Я знаю, что вы хотите избежать всего, кроме html, но этот простой код php может помочь. Вы можете использовать php на странице

  • заполните форму и нажмите отправить, чтобы отправить данные обработчику формы
  • В обработчике формы обработайте данные и затем перенаправьте обратно на страницу формы с помощью header('Location: yourwebaddresshere?form=submited');

Затем на исходной странице формы добавьте оператор php IF над кодом формы: 

$url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; 

if(strpos($url, 'form=submited')) {
echo 'Your thank you message here';
exit(); // Use this to stop code after this statement from loading
}
0 голосов
/ 18 марта 2009

Есть 2 варианта:

  1. Старые школьные формы: Человек нажимает кнопку «Отправить», и данные формы отправляются на сервер через GET или POST, страница снова загружается и отображает «Спасибо за отправку»

  2. Новый школьный JavaScript AJAX Человек нажимает кнопку «Отправить», а Javascript отправляет данные формы на серверную сторону через AJAX и удаляет элементы формы, а затем добавляет «Спасибо за отправку»

Все остальное является гибридом обеих этих техник.

0 голосов
/ 18 марта 2009

Стандартный способ сделать это - отправить форму на другую страницу (например, submit.php), которая предоставляет новую страницу с сообщением спасибо. Нет JavaScript, нет DHTML.

Вы можете использовать javascript, чтобы заменить innerHTML огромного div, содержащего все, или удалить все элементы, но я бы посоветовал против этого.

...