1 / 1 / 1
Регистрация: 20.04.2015
Сообщений: 17
1

Закрытие формы после нажатия

06.04.2016, 00:59. Показов 3742. Ответов 4
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Всем доброго времени суток! У меня есть форма обратной связи которая находится во всплывающем окне , после того как я заполняю форму и отправляю, окно не закрывается.



HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<div class="bg_flyform raschet" >
    <div class="flyform">
        <div class="in"> 
            <div class="close">x</div>
            <div class="form">
                <style>
                    #feedback-form { /* вся форма */
                      max-width: 550px;
                      padding: 2%;
                      border-radius: 3px;
                      background: #ffcb00;;
                    }
                    #feedback-form label { /* наименование полей */
                      float: left;
                      display: block;
                      clear: right;
                      color: #000
                    }
                    #feedback-form .w100 { /* поля */
                      float: right;
                      max-width: 400px;
                      width: 94%;
                      margin-bottom: 1em;
                      padding: 1.5%;
                      
                    }
                    #feedback-form .border { /* граница полей */
                      border-radius: 1px;
                      border-width: 1px;
                      border-style: solid;
                      border-color: #C0C0C0 #D9D9D9 #D9D9D9;
                      box-shadow: 0 1px 1px rgba(255,255,255,.5), 0 1px 1px rgba(0,0,0,.1) inset;
                    }
                    #feedback-form .border:focus {
                      outline: none;
                      border-color: #abd9f1 #bfe3f7 #bfe3f7;
                    }
                    #feedback-form .border:hover {
                      border-color: #7eb4ea #97cdea #97cdea;
                    }
                    #feedback-form .border:focus::-moz-placeholder { /* убрать при фокусе первоначальный текст поля */
                      color: transparent;
                    }
                    #feedback-form .border:focus::-webkit-input-placeholder {
                      color: transparent;
                    }
                    #feedback-form .border:not(:focus):not(:hover):valid { /* правильно заполненные поля */
                      opacity: .8;
                    }
                    #submitFF { /* кнопка "Отправить" */
                      padding: 1%;
                      border: none;
                      border-radius: 3px;
                      box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
                      background: #669acc;
                      color: #fff;
                    }
                    .form1 {
                        margin: 15px 0px;
                    }
                    #feedback-form br {
                      height: 0;
                      clear: both;
                    }
                    #submitFF:hover {
                      background: #5c90c2;
                    }
                    #submitFF:focus {
                      box-shadow: 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05);
                    }
                    </style>
                    <form enctype="multipart/form-data" method="post" id="feedback-form">
                    <label for="nameFF">Имя:</label>
                    <input type="text" name="nameFF" id="nameFF" required placeholder="Имя" x-autocompletetype="name" class="w100 border">
                    <label for="contactFF">Email:</label>
                    <input type="email" name="contactFF" id="contactFF" required placeholder="Email" x-autocompletetype="email" class="w100 border">
                    <label for="fileFF">Прикрепить фото:</label>
                    <input type="file" name="fileFF[]" multiple id="fileFF" class="w100">
                    <label for="messageFF">Сообщение:</label>
                    <textarea name="messageFF" id="messageFF" required rows="5" placeholder="Детали заявки…" class="w100 border"></textarea>
                    <br>
                    <input value="Отправить" type="submit" id="submitFF">
                    </form>
                    <script>
                    document.getElementById('feedback-form').addEventListener('submit', function(evt){
                      var http = new XMLHttpRequest(), f = this;
                      evt.preventDefault();
                      http.open("POST", "js/contacts.php", true);
                      http.onreadystatechange = function() {
                        if (http.readyState == 4 && http.status == 200) {
                          alert(http.responseText);
                          if (http.responseText.indexOf(f.nameFF.value) == 0) { // очистить поле сообщения, если в ответе первым словом будет имя отправителя
                            f.messageFF.removeAttribute('value');
                            f.messageFF.value='';
                          }
                        }
                      }
                      http.onerror = function() {
                        alert('Извините, данные не были переданы');
                      }
                      http.send(new FormData(f));
                    }, false);
            </script>
 
                    
                    </div>                  
                    
                </form>
            </div>  
        </div>  
    </div>
</div>
сделал вот так
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function () {
    
$('#submitFF').bind('click', function() {
    
        
 
    $('.bg_flyform').hide();
    $(".bg_flyform.blago").animate({ opacity: 'show' }, "fast");    
    $('input[name="name"]').val('');
    $('input[name="phone"]').val('');
    $('input[type="file"]').val('');
    $('textarea').val('');
    $('.bg_flyform .form .blocks div').attr('class','');
 
      });
});
получается при клики на кнопку отправить форма закрывается, но дело в том что слишком быстро и не успевает отправить заявку на почту


Я вот думаю . если после нажатия
Javascript
1
$('#submitFF').bind('click', function() {

подождать хотя бы 1000мс и уже потом выполнять
Javascript
1
2
3
4
5
6
7
$('.bg_flyform').hide();
    $(".bg_flyform.blago").animate({ opacity: 'show' }, "fast");    
    $('input[name="name"]').val('');
    $('input[name="phone"]').val('');
    $('input[type="file"]').val('');
    $('textarea').val('');
    $('.bg_flyform .form .blocks div').attr('class','');
Вот только не могу понять как это сделать?
Дело в том что я чайник в js.
Помогите пожалуйста
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.04.2016, 00:59
Ответы с готовыми решениями:

Вывод формы после нажатия radio
Добрый день. Делаю корзину в самописном интернет-магазине. Есть способы доставки (инпутом radio). ...

Отображение формы после нажатия на кнопку Ответить
Задача такова: имеется страница с вопросом, для того чтобы ответить необходимо нажать на кнопку...

Закрытие формы после отправки письма
Добрый день! Помогите разобраться. Есть 2 формы. 1) форма заказа. &lt;div id=&quot;wrapper&quot;&gt; &lt;div...

Закрытие формы после события? где ошибка ?
Уважаемые форумчане, не кидайтесь сразу грязными носками. Я только начал учить java script и на...

4
90 / 89 / 23
Регистрация: 08.07.2014
Сообщений: 548
06.04.2016, 07:24 2
Цитата Сообщение от xxoctt Посмотреть сообщение
Дело в том что я чайник в js.
А в раздел Java тогда для чего пришли ?

Добавлено через 1 минуту
Цитата Сообщение от xxoctt Посмотреть сообщение
Я вот думаю . если после нажатия $('#submitFF').bind('click', function() { подождать хотя бы 1000мс и уже потом выполнять
Код последовательно выполняется. Хоть 100500 мс ждите.
0
1 / 1 / 1
Регистрация: 20.04.2015
Сообщений: 17
06.04.2016, 12:48  [ТС] 3
korshun84, Тогда не понимаю.. почему с кодом закрытия не отправляет уведомления на почту.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function () {
    
$('#submitFF').bind('click', function() {
    
        
 
    $('.bg_flyform').hide();
    $(".bg_flyform.blago").animate({ opacity: 'show' }, "fast");    
    $('input[name="name"]').val('');
    $('input[name="phone"]').val('');
    $('input[type="file"]').val('');
    $('textarea').val('');
    $('.bg_flyform .form .blocks div').attr('class','');
 
      });
});
Без него всё отправляет но не закрывается.
0
4 / 4 / 2
Регистрация: 10.04.2013
Сообщений: 101
08.04.2016, 18:19 4
Javascript
1
$('.bg_flyform').delay(1000).animate({opacity:0},30); /*Закрытие после 1000мс
скорее исчезновение формы
0
Lazy_Den
08.04.2016, 18:50     Закрытие формы после нажатия
  #5

Не по теме:

Цитата Сообщение от korshun84 Посмотреть сообщение
А в раздел Java тогда для чего пришли ?
Не угадали. Человек пришел в раздел JavaScript ;D

0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
08.04.2016, 18:50

Всплывающее окно после нажатия на кнопки формы
Добрый день, имеется следующая проблема - на странице форма регистрации, необходимо после...

Чтобы кнопка двигалась вверх после одного нажатия и вниз после второго
Тогда у меня другой вопрос, вот код, при нажатии на кнопку run, она двигается вниз, что нужно...

Потеря текста после нажатия на кнопку и закрытие формы
Здравствуйте! Имеется дочерняя форма, открытая с помощью window.open. Мне нужно после нажатия на...

Закрытие окна после нажатия любой клавиши.
Всем привет. #include &lt;iostream.h&gt; using namespace std; int main() { int var1; int var2;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru