CSS скрытая форма DIV Отправить - PullRequest
Новая
       9

CSS скрытая форма DIV Отправить

1 голос
/ 13 марта 2010

Используя CSS, при нажатии на ссылку появляется скрытый DIV, содержащий форму. Затем пользователь вводит информацию и затем отправляет форму. Мне бы хотелось, чтобы скрытый DIV оставался видимым, а после отправки отображалось «сообщение об успехе». Тогда у пользователя будет возможность закрыть DIV. Я не могу заставить его работать без перезагрузки страницы, из-за чего DIV снова становится скрытым. Есть идеи? 

<body>
       <a href="javascript:showDiv()" style="color: #fff;">Click Me</a>

        <!--POPUP-->

        <div id="hideshow" style="visibility:hidden;">
            <div id="fade"></div>
            <div class="popup_block">
                <div class="popup">
            <a href="javascript:hideDiv()">
              <img src="images/icon_close.png" class="cntrl" title="Close" />
              </a>
                    <h3>Remove Camper</h3>
                    <form method="post" onsubmit="email.php">
                    <p><input name="Name" type="text" /></p>
                    <p><input name="Submit" type="submit" value="submit" /></p>
                </form>
                <div id="status" style="display:none;">success</div>
              </div>
          </div>
        </div>

        <!--END POPUP-->

        <script language=javascript type='text/javascript'> 
        function hideDiv() { 
        if (document.getElementById) { // DOM3 = IE5, NS6 
        document.getElementById('hideshow').style.visibility = 'hidden'; 
        } 
        else { 
        if (document.layers) { // Netscape 4 
        document.hideshow.visibility = 'hidden'; 
        } 
        else { // IE 4 
        document.all.hideshow.style.visibility = 'hidden'; 
        } 
        } 
        }

        function showDiv() { 
        if (document.getElementById) { // DOM3 = IE5, NS6 
        document.getElementById('hideshow').style.visibility = 'visible'; 
        } 
        else { 
        if (document.layers) { // Netscape 4 
        document.hideshow.visibility = 'visible'; 
        } 
        else { // IE 4 
        document.all.hideshow.style.visibility = 'visible'; 
        } 
        } 
        } 
        </script>

</body>

Ответы [ 3 ]

1 голос
/ 13 марта 2010

Формы по умолчанию отправляют содержимое, переходя на указанную страницу в атрибуте 'action'. Вам нужно будет создать дополнительные сценарии, чтобы предотвратить это, и отправить данные с использованием AJAX или jQuery, а затем обработать результат.

Или вы можете просто использовать любой язык, на котором вы программируете, чтобы установить видимость по умолчанию для подразделения. Если данные формы существуют, отобразите их по умолчанию, в противном случае скрыте их по умолчанию.

0 голосов
/ 13 марта 2010

Вместо того, чтобы использовать тип «submit» для вашей кнопки, вы можете использовать тип «button» и использовать скрипт, вызываемый onclick, который будет использовать ajax для отправки формы и выполнения всего, что необходимо.

Это немного опровергает значение формы, но работает хорошо. Вы также можете подумать об использовании библиотеки javascript, такой как prototype или аналогичной (jquery и т. Д.), Которая дает вам функциональность для создания массива get или post вашей формы, чтобы сделать его проще.

0 голосов
/ 13 марта 2010

Как насчет использования вызова AJAX для публикации формы вместо отправки всей страницы назад?

...