Отправка одного поля без перезагрузки

@Batyabest · Регистрация: 08.12.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Как сделать форму с 1 полем (номер телефона) и отправлять ее без перезагрузки страницы?

@Razip · 27.12.2013, 21:13

HTML5
1
2
3
<form id="first_form">
<input type="text" name="telephone" onsubmit="sendForm();">
</form>

JavaScript
1
2
3
function sendForm() {
$.post('обработчик.php', $('#first_form').serialize());
}

Добавлено через 26 секунд
В обработчике уже ловите POST-переменную.

@Batyabest · 27.12.2013, 21:27 **[ТС]**

Сообщение от Razip

HTML5
1
2
3
<form id="first_form">
<input type="text" name="telephone" onsubmit="sendForm();">
</form>

JavaScript
1
2
3
function sendForm() {
$.post('обработчик.php', $('#first_form').serialize());
}

Добавлено через 26 секунд
В обработчике уже ловите POST-переменную.

то есть в обработчике нужно прописать отправку на почту?
как "поймать" в нем POST-переменную?

@Razip · 27.12.2013, 21:32

Batyabest, да все что хотите. Поймать можно так:

PHP
1
2
//Выводит телефон
echo $_POST['telephone'];

@Batyabest · 27.12.2013, 21:34 **[ТС]**

Сообщение от Razip

Batyabest, да все что хотите. Поймать можно так:

PHP
1
2
//Выводит телефон
echo $_POST['telephone'];

то есть отпрвка будет происходить незаметно для пользователя? Без перехода на другую страницу?

@Razip · 27.12.2013, 21:36

Batyabest, да. Скрипт отправлять запрос серверу. А сервер отправляет или делает что-то другое. Можно даже сделать вывод уведомления об отправке.

@Batyabest · 27.12.2013, 21:37 **[ТС]**

Сообщение от Razip

Можно даже сделать вывод уведомления об отправке.

Как это сделать?

И еще - отправка будет как происходить? Я имею ввиде что в коде кнопки отправить нет. Ее нужно дописать?

@Razip · 27.12.2013, 21:41

Batyabest, есть событие — отправка формы. Оно происходит когда пользователь может нажать Enter в поле, когда набирает текст. Либо есть специальный input — submit.

HTML5
1
<input type="submit" value="Отправить форму">

Он отправляет форму также. Отправка будет происходить так: скрипт посылает данные серверу —> сервер посылает письмо —> возвращает результат в скрипт. Можно работать с результатом посредством jQuery callback и аргумента data (пример вывода):

JavaScript
1
2
3
4
$.post('action.php', {data: some_data}, function(data) {
//Выведет результат скрипта (весь текст выведенный на страницу)
alert(data);
});

@Batyabest · 27.12.2013, 21:51 **[ТС]**

PHP
1
2
3
4
5
6
7
8
9
10
11
12
if($_POST['submit']) { 
 
        $phone = substr(htmlspecialchars(trim($_POST['telephone'])); 
 
        // $to - кому отправляем 
        $to = 'test1@test.ru'; 
        // $from - от кого 
        $from='test2@test.ru'; 
        // функция, которая отправляет наше письмо. 
        mail($to, $phone, 'From:'.$from); 
        echo 'Спасибо! Ваше письмо отправлено.'; 
}

Почему-то ничего не приходит

@Razip · 27.12.2013, 21:55

Batyabest, нет, $_POST['telephone']. Name атрибут в форме — POST-переменная в PHP (точнее элемент массива).

Добавлено через 1 минуту

Сообщение от Batyabest

if($_POST['submit']) {

У Вас есть в форме input с name «submit»?

@Batyabest · 27.12.2013, 21:59 **[ТС]**

Сообщение от Razip

Batyabest, нет, $_POST['telephone']. Name атрибут в форме — POST-переменная в PHP (точнее элемент массива).

Добавлено через 1 минуту

У Вас есть в форме input с name «submit»?

Простите, совсем запутался. Не могли бы вы написать код, который должет быть в обработчике?

@Razip · 27.12.2013, 22:04

Batyabest,

PHP
1
2
3
4
5
6
7
8
9
10
11
12
if($_POST['здесь содержимое атрибута name у input с телефоном']) { 
 
        $phone = substr(htmlspecialchars(trim($_POST['telephone'])); 
 
        // $to - кому отправляем 
        $to = 'test1@test.ru'; 
        // $from - от кого 
        $from='test2@test.ru'; 
        // функция, которая отправляет наше письмо. 
        mail($to, $phone, 'From:'.$from); 
        echo 'Спасибо! Ваше письмо отправлено.'; 
}

В моем примере, значение name было — telephone.

Добавлено через 1 минуту
То есть, так как данных с текстового поля «submit» не было — условие не срабатывает, и сообщение не идет.

@Batyabest · 27.12.2013, 22:08 **[ТС]**

у меня после нажатия на отправить страница моргает (значит, какое-то действие происходит)
в строке браузера появляются данные http://site.ru?telephone=1313&... вить+форму
А на почту ничего не приходит.

@Razip · 27.12.2013, 22:14

HTML5
1
2
3
<form id="first_form" onsubmit="sendForm(); return false;">
<input type="text" name="telephone">
</form>

А вот так? Если хотите, можете добавить кнопку.

@Batyabest · 27.12.2013, 22:20 **[ТС]**

Тоже тишина

HTML5
1
2
3
4
<form id="first_form" onsubmit="sendForm(); return false;">
<input type="text" name="telephone">
<input type="submit" name="submit" value="Отправить форму">
</form>

JavaScript
1
2
3
function sendForm() {
$.post('send.php', $('#first_form').serialize());
}

Код файла send.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
if($_POST['telephone']) { 
 
        $phone = substr(htmlspecialchars(trim($_POST['telephone'])), 0, 20); 
 
        // $to - кому отправляем 
        $to = 'info@test.ru'; 
        // $from - от кого 
        $from='test2@test.ru'; 
        // функция, которая отправляет наше письмо. 
        mail($to, $phone, 'From:'.$from); 
        echo 'Спасибо! Ваше письмо отправлено.'; 
}

@Razip · 27.12.2013, 22:32

Batyabest, можете скинуть страницу с JS-скриптом полностью?

@Batyabest · 27.12.2013, 22:35 **[ТС]**

Ок. Форма в самом низу. Скрипт тоже.

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<?php
// get template configuration
include($this['path']->path('layouts:template.config.php'));
 
?>
 
<!DOCTYPE HTML>
<html lang="<?php echo $this['config']->get('language'); ?>" dir="<?php echo $this['config']->get('direction'); ?>">
 
<head>
<?php echo $this['template']->render('head'); ?>
<script src="/templates/okna_na_veka/js/mootools-core.js" type="text/javascript"></script>
    <script src="/templates/okna_na_veka/js/core.js" type="text/javascript"></script>
    <script src="/templates/okna_na_veka/js/caption.js" type="text/javascript"></script>
    <script src="/templates/okna_na_veka/js/mootools-more.js" type="text/javascript"></script>
    <script src="ajax.js" type="text/javascript"></script>
    <script type="text/javascript">
window.addEvent('load', function() {
                new JCaption('img.caption');
            });
  </script>
<meta name='yandex-verification' content='515874672e200497' />
<meta name="google-site-verification" content="viI651i5XSkgADe8lYzGZ9CAx-MXKQbwJjcG44i45uY" />
 
<script type="text/javascript" src="/callme/js/callme.js"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
 <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
        <script type="text/javascript" src="form/jquery.form.validation.js"></script>
        <script type="text/javascript" src="form/site.js"></script>
</head>
 
<body id="page" class="page <?php echo $this['config']->get('body_classes'); ?>" data-config='<?php echo $this['config']->get('body_config','{}'); ?>'>
    <?php if ($this['modules']->count('absolute')) : ?>
    <div id="absolute">
        <?php echo $this['modules']->render('absolute'); ?>
    </div>
    <?php endif; ?>
    
    <div class="wrapper clearfix">
 
        <header id="header">
 
            <?php if ($this['modules']->count('toolbar-l + toolbar-r') || $this['config']->get('date')) : ?>
            <div id="toolbar" class="clearfix">
 
                <?php if ($this['modules']->count('toolbar-l') || $this['config']->get('date')) : ?>
                <div class="float-left">
                
                    <?php if ($this['config']->get('date')) : ?>
                    
                    <?php endif; ?>
                
                    <?php echo $this['modules']->render('toolbar-l'); ?>
                    
                </div>
                <?php endif; ?>
                    
                <?php if ($this['modules']->count('toolbar-r')) : ?>
                <div class="float-right"><?php echo $this['modules']->render('toolbar-r'); ?></div>
                <?php endif; ?>
                
            </div>
            <?php endif; ?>
 
            <?php if ($this['modules']->count('logo + headerbar')) : ?> 
            <div id="headerbar" class="clearfix">
                <?php if ($this['modules']->count('logo')) : ?> 
                <a id="logo" href="<?php echo $this['config']->get('site_url'); ?>"><?php echo $this['modules']->render('logo'); ?></a>
                <?php endif; ?>
                
                <?php echo $this['modules']->render('headerbar'); ?>
            </div>
            <?php endif; ?>
 
            <?php if ($this['modules']->count('menu + search')) : ?>
            
            <?php endif; ?>
        
            <?php if ($this['modules']->count('banner')) : ?>
            <div id="banner"><?php echo $this['modules']->render('banner'); ?></div>
            <?php endif; ?>
        
        </header>
        <div id="mainwrap">
<div id="menubar" class="clearfix">
                
                <?php if ($this['modules']->count('menu')) : ?>
                <nav id="menu"><?php echo $this['modules']->render('menu'); ?></nav>
                <?php endif; ?>
 
                <?php if ($this['modules']->count('search')) : ?>
                <div id="search"><?php echo $this['modules']->render('search'); ?></div>
                <?php endif; ?>
                
            </div>
        <?php if ($this['modules']->count('top-a')) : ?>
        <section id="top-a" class="grid-block"><?php echo $this['modules']->render('top-a', array('layout'=>$this['config']->get('top-a'))); ?></section>
        <?php endif; ?>
        
        <?php if ($this['modules']->count('top-b')) : ?>
        <section id="top-b" class="grid-block"><?php echo $this['modules']->render('top-b', array('layout'=>$this['config']->get('top-b'))); ?></section>
        <?php endif; ?>
        
        <?php if ($this['modules']->count('innertop + innerbottom + sidebar-a + sidebar-b') || $this['config']->get('system_output')) : ?>
 
        <div id="main" class="grid-block">
 
            <div id="maininner" class="grid-box">
 
                <?php if ($this['modules']->count('innertop')) : ?>
                <section id="innertop" class="grid-block"><?php echo $this['modules']->render('innertop', array('layout'=>$this['config']->get('innertop'))); ?></section>
                <?php endif; ?>
 
                <?php if ($this['modules']->count('breadcrumbs')) : ?>
                <section id="breadcrumbs"><?php echo $this['modules']->render('breadcrumbs'); ?></section>
                <?php endif; ?>
 
                <?php if ($this['config']->get('system_output')) : ?>
                <section id="content" class="grid-block"><?php echo $this['template']->render('content'); ?></section>
                <?php endif; ?>
 
                <?php if ($this['modules']->count('innerbottom')) : ?>
                <section id="innerbottom" class="grid-block"><?php echo $this['modules']->render('innerbottom', array('layout'=>$this['config']->get('innerbottom'))); ?></section>
                <?php endif; ?>
 
            </div>
            <!-- maininner end -->
            
            <?php if ($this['modules']->count('sidebar-a')) : ?>
            <aside id="sidebar-a" class="grid-box"><?php echo $this['modules']->render('sidebar-a', array('layout'=>'stack')); ?></aside>
            <?php endif; ?>
            
            <?php if ($this['modules']->count('sidebar-b')) : ?>
            <aside id="sidebar-b" class="grid-box"><?php echo $this['modules']->render('sidebar-b', array('layout'=>'stack')); ?></aside>
            <?php endif; ?>
 
        </div>
        <?php endif; ?>
        <!-- main end -->
 
        <?php if ($this['modules']->count('bottom-a')) : ?>
        <section id="bottom-a" class="grid-block"><?php echo $this['modules']->render('bottom-a', array('layout'=>$this['config']->get('bottom-a'))); ?></section>
        <?php endif; ?>
        
        <?php if ($this['modules']->count('bottom-b')) : ?>
        <section id="bottom-b" class="grid-block"><?php echo $this['modules']->render('bottom-b', array('layout'=>$this['config']->get('bottom-b'))); ?></section>
        <?php endif; ?>
        
        <?php if ($this['modules']->count('footer + debug') || $this['config']->get('warp_branding') || $this['config']->get('totop_scroller')) : ?>
        <footer id="footer">
 
            <?php if ($this['config']->get('totop_scroller')) : ?>
            <a id="totop-scroller" href="#page"></a>
            <?php endif; ?>
 
            <?php
                echo $this['modules']->render('footer');
                $this->output('warp_branding');
                echo $this['modules']->render('debug');
            ?>
 
        </footer>
</div>
 
        <?php endif; ?>
 
    </div>
    
    <?php echo $this->render('footer'); ?>
<!-- Yandex.Metrika informer -->
<a href="http://metrika.yandex.ru/stat/?id=23206063&amp;from=informer"
target="_blank" rel="nofollow"><img src="//bs.yandex.ru/informer/23206063/3_1_FFFFFFFF_EFEFEFFF_0_pageviews"
style="width:88px; height:31px; border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)" onclick="try{Ya.Metrika.informer({i:this,id:23206063,lang:'ru'});return false}catch(e){}"/></a>
<!-- /Yandex.Metrika informer -->
 
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (d, w, c) {
    (w[c] = w[c] || []).push(function() {
        try {
            w.yaCounter23206063 = new Ya.Metrika({id:23206063,
                    webvisor:true,
                    clickmap:true,
                    trackLinks:true,
                    accurateTrackBounce:true});
        } catch(e) { }
    });
 
    var n = d.getElementsByTagName("script")[0],
        s = d.createElement("script"),
        f = function () { n.parentNode.insertBefore(s, n); };
    s.type = "text/javascript";
    s.async = true;
    s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";
 
    if (w.opera == "[object Opera]") {
        d.addEventListener("DOMContentLoaded", f, false);
    } else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="//mc.yandex.ru/watch/23206063" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
<script>
function sendForm() {
$.post('send.php', $('#first_form').serialize());
}
</script>   
<form id="first_form">
<input type="text" name="telephone" onsubmit="sendForm();">
<input type="submit" name="submit" value="Отправить форму">
</form>
 
</body>
</html>

@Razip · 27.12.2013, 22:47

Batyabest, у Вас на странице подключен jQuery? И еще, посмотрите в консоли разработчика ошибки.

Добавлено через 8 минут
Просто дело в том, что я сделал пример с данным кодом (https://www.cyberforum.ru/post5569452.html) и все у меня работало. У Вас не нашел подключения jQuery. Если в консоли разработчика будет что-то типа $ is not found — у Вас не подключена jQuery.

@Batyabest · 27.12.2013, 22:49 **[ТС]**

да подключен. В консоли ошибок нет.

@Razip · 27.12.2013, 22:51

Batyabest, на какой строчке? Я спать. Завтра посмотрю, если еще ответить не успеет никто.

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .

@Batyabest 0 / 0 / 0 Регистрация: 08.12.2013 Сообщений: 30

	Отправка одного поля без перезагрузки 27.12.2013, 20:40. Показов 2526. Ответов 24 Метки нет (Все метки) Здравствуйте. Как сделать форму с 1 полем (номер телефона) и отправлять ее без перезагрузки страницы? 0

@Razip 268 / 268 / 109 Регистрация: 22.08.2013 Сообщений: 907
	27.12.2013, 21:36
	Batyabest, да. Скрипт отправлять запрос серверу. А сервер отправляет или делает что-то другое. Можно даже сделать вывод уведомления об отправке. 0

@Batyabest 0 / 0 / 0 Регистрация: 08.12.2013 Сообщений: 30
	27.12.2013, 22:08 [ТС]
	у меня после нажатия на отправить страница моргает (значит, какое-то действие происходит) в строке браузера появляются данные http://site.ru?telephone=1313&... вить+форму А на почту ничего не приходит. 0

@Razip 268 / 268 / 109 Регистрация: 22.08.2013 Сообщений: 907
	27.12.2013, 22:32
	Batyabest, можете скинуть страницу с JS-скриптом полностью? 0

@Razip 268 / 268 / 109 Регистрация: 22.08.2013 Сообщений: 907
	27.12.2013, 22:47
	Batyabest, у Вас на странице подключен jQuery? И еще, посмотрите в консоли разработчика ошибки. Добавлено через 8 минут Просто дело в том, что я сделал пример с данным кодом (https://www.cyberforum.ru/post5569452.html) и все у меня работало. У Вас не нашел подключения jQuery. Если в консоли разработчика будет что-то типа $ is not found — у Вас не подключена jQuery. 0

@Batyabest 0 / 0 / 0 Регистрация: 08.12.2013 Сообщений: 30
	27.12.2013, 22:49 [ТС]
	да подключен. В консоли ошибок нет. 0

@Razip 268 / 268 / 109 Регистрация: 22.08.2013 Сообщений: 907
	27.12.2013, 22:51
	Batyabest, на какой строчке? Я спать. Завтра посмотрю, если еще ответить не успеет никто. 0