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

@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 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

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

	Отправка одного поля без перезагрузки 27.12.2013, 20:40. Показов 2566. Ответов 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