Отправить данные формы без перезагрузки страницы

@elochka · Регистрация: 20.10.2016

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

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

@Balanaar · 05.12.2016, 09:37

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

Подскажите, как быть?

Использовать ajax

@Уф · 05.12.2016, 10:47

В функции пишешь

JavaScript
1
$.post("action.php", {"name": "Vasya", "tel": "123"}, function(data){ alert('Otvet\n'+data); });

@elochka · 05.12.2016, 14:49 **[ТС]**

А Вы могли бы объяснить это? Или подробнее? Я просто не разбираюсь в этом(

@splik · 07.12.2016, 23:22

У меня получился такой код на jquery. отправка происходит при нажатии ctrl+enter, если хочешь чтобы только enter, тогда убери из if "e.ctrlKey &&" и всё.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('textarea').keydown(function (e) {
  if (e.ctrlKey && e.keyCode == 13) {
      
    var textareaT=$('textarea').val();
   
      
      $.post(
  "/my1.php",  //файл который сохраняет в бд текст из textarea
  {
    param1: textareaT
  },
  onAjaxSuccess
);
 
      function onAjaxSuccess(data)
        {
        // Здесь мы получаем данные, отправленные сервером и выводим их на экран.
        alert(data);
        }  
    
  }
    });

@Уф · 08.12.2016, 19:23

данные формы отправляешь куда? обработчику, эта строчка равносильна если бы ты в такой форме заполнил поля и нажал отправку

HTML5
1
2
3
4
5
<form method="POST" action="action.php">
<input name="name">
<input name="tel">
<input type="submit" value="Отправить">
</form>

@elochka · 08.12.2016, 20:31 **[ТС]**

а как это написать, чтобы без перезагрузки и моментально все происходило?
допустим, что форма почти такая как у вас. тогда потом прописывать

JavaScript
1
<script> $.post("action.php", {"name": "Vasya", "tel": "123"}, function(data){ alert('Otvet\n'+data); }); </script>

???

PHP/HTML
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
<textarea method="post" class="first_textarea" placeholder="..."></textarea>
                    <p><input type= "submit" value="Отправить"></p>
<script type="text/javascript">
$('.first_textarea').keydown(function (e) {
      if (e.keyCode == 13) {
          
        var textareaT=$('.first_textarea').val();
        var rofl = "<? echo $rofl ?>";
          
          $.post(
      "/send.php?rofl=" + rofl,  //файл который сохраняет в бд текст из textarea
      {
        param1: textareaT
      },
      onAjaxSuccess
    );
     
          function onAjaxSuccess(data)
            {
            // Здесь мы получаем данные, отправленные сервером и выводим их на экран.
            alert(data);
            }  
        
      }
        });
</script>

Вот так? Почему-то не работает, поправьте, если что не так

@splik · 08.12.2016, 21:14

Зачем вы создаёте переменную rofl? она не нужна. Текст хранится в textareaT
И в файле send.php можно получить текст из textara так: $_POST["textareaT"]

PHP/HTML
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
<textarea method="post" class="first_textarea" placeholder="..."></textarea>
                    <p><input type= "submit" value="Отправить"></p>
<script type="text/javascript">
$('.first_textarea').keydown(function (e) {
      if (e.keyCode == 13) {
          
        var textareaT=$('.first_textarea').val();
        
          
          $.post(
      "/send.php,  //файл который сохраняет в бд текст из textarea
      {
        param1: textareaT
      },
      onAjaxSuccess
    );
     
          function onAjaxSuccess(data)
            {
            // Здесь мы получаем данные, отправленные сервером и выводим их на экран.
            alert(data);
            }  
        
      }
        });
</script>

@Sluchayno · 08.12.2016, 22:00

HTML5
1
2
3
4
5
6
<form method="post" action="./" class="login">
          <h3>Авторизация</h3>
           <input type="text" name="login" id="login" placeholder="Логин" />
           <input type="password" name="Pass" id="Pass" placeholder="Пароль" />
           <input type="button" name="submit" id="auth" value="Авторизоваться" />
          </form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('#auth').click(function(){
{
     $.ajax({
        url        : 'auth.php', 
        type        : 'POST', 
        data        : {Login : $('#login').val(), 
                      Password : $('#Pass').val()}, 
        success     : function(data){
               if(data == 'error'){ 
                alert('Авторизовались')
               }
               else
               {
                   alert("Что то не так!");
               }
        }   
    });
});

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
<?
if(isset($_POST['Login']) && isset($_POST['Password']))
    {
       if($_POST['Login'] == 'user' && $_POST['Password'] == 'user')
       {
          echo 'ok';
       }
      else
      {
        echo 'error';
      }
    }
?>

Таким образом вы условно авторизовали пользователя без перезагрузки страницы.

@Kerry_Jr · 08.12.2016, 22:01

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

И в файле send.php можно получить текст из textara так: $_POST["textareaT"]

Не $_POST['textareaT'], а $_POST['param1'].

@splik · 09.12.2016, 07:27

А библиотеки jquery подключены?
И весь код, который я скинул нужно заключить в

PHP/HTML
1
2
3
$(document).ready(function(){
//здесь код
});

И если и дальше не пойдёт, тогда выложи файл send.php

@elochka · 11.12.2016, 23:49 **[ТС]**

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

@Уф · 12.12.2016, 10:24

даже уже и не знаю как тебе тогда объяснить, вот простенький наглядный пример. внимательно смотри как какие переменные называются и что куда выводится, сопоставишь - поймешь суть.
https://jsfiddle.net/ah53ahkf/

Добавлено через 30 секунд

HTML5
1
2
3
4
5
6
7
<form method="POST">
pole1 <input name="pole1" class="pole"><br>
pole2 <input name="pole2" class="pole"><br>
<input type="submit"> 
</form>
Otvet
<span id="otvet"></span>

JavaScript
1
2
3
4
5
6
7
8
9
10
    $('input.pole').keyup(function(){
    $.post('https://httpbin.org/post',
        {
      lal1: $('input[name=pole1]').val(),
      lal2: $('input[name=pole2]').val()
      }, function(data){
        $('#otvet').html(JSON.stringify(data).replace(/}/g,'}<br>'));
        console.log(data);
      });
  });

@elochka · 14.12.2016, 06:12 **[ТС]**

как я понял, моя задача сводится к одному вопросу. как вставить данные в бд mysql без перезагрузки страницы и повторной отправки формы

@Уф · 14.12.2016, 23:00

т.е. все советы что мы тебе дали не внесли ясности в твой вопрос?
если уж совсем хочешь все разжеванное, хотя куда уж понятнее. пиши по пунктам.
1. код хтмл формы
2. по какому событию в форме нужно отправлять данные
3. куда отображать результат и надо ли это делать вообще
4. база mysql или postgre?
5. Каким запросом какие поля формы куда вставлять

@elochka · 15.12.2016, 06:05 **[ТС]**

я хотел бы и понять. то, что написали вы, мне объясняет некоторые вещи, но как сделать то , что надо мне, я не знаю

HTML5
1
<div id="show"></div>

html форма

PHP/HTML
1
2
3
4
<form id="sending_form" method="post">  
<textarea id="message" name="text_mess"></textarea>
<p><input id="submitter" name="submitter" type= "submit" value="Отправить"></p></form>
<?php $id = $_GET[id];?>

обработка - send.php?id=$id:

PHP
1
2
3
4
5
6
7
8
<?php 
$id_user = $_SESSION[loggedIn];
mysql_connect("localhost", "root");
if(!empty($_POST['text_mess'])){
$id = $_GET[id];
    $message_text = $_POST[text_mess];
    mysql_query("INSERT INTO table (time, date, text, id_send, id_rec) VALUES (current_time, current_date, '$message_text', '$id_user', '$id')");
    }?>

ход событий. надо, чтобы
1)когда пользователь начинал печатать, без нажатия на textarea писалось в ней. то есть сразу с клавиатуры печаталось в textarea. ввод текста не должен подлагивать из-за функции, которую напишу ниже.
2) после того как пользователь напечатал, он может нажать на Enter или на кнопку "отправить", сообщение мгновенно отправлялось бы без выплывающих окон подтверждения и прочего.
3) на отправке сообщения: не должна повторяться отправка данных формы, не должна перезагружаться страница, переходы не должны попадать в историю браузера(их вообще, как и сам send.php хотелось бы убрать, а код вставить под форму), не должно быть такого, что после каждой отправленной формы можно было нажать ← и вот вы уже на предыдущей странице, а именно - тут же, так как все что было сделано, - отправилась форма.
4) при каждом изменении таблицы в бд в <div id="show"></div> должны отображаться изменения. есть такая функция

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function show()
    {var id = "<? echo $id ?>";
    $.ajax({
        url: "mess_load.php?id=" + id,
        cache: false,
        success: function(html){
            $("#show").html(html);
        }
    });
    }
    $(document).ready(function(){
        show();
        setInterval('show()',15);
    });

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

Комментарий модератора

Код оформляем с помощью, соответствующих тегов в редакторе!

Новые блоги и статьи Все статьи Все блоги /
Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .

@elochka 2 / 2 / 2 Регистрация: 20.10.2016 Сообщений: 92

	Отправить данные формы без перезагрузки страницы 04.12.2016, 19:57. Показов 3680. Ответов 15 Метки нет (Все метки) Здравствуйте! На странице есть форма. Никак не получается отправить данные этой формы без перезагрузки страниц. Подскажите, как быть? А можно ли как-нибудь с самой функции отправить данные? Заранее спасибо 0

@elochka 2 / 2 / 2 Регистрация: 20.10.2016 Сообщений: 92
	05.12.2016, 14:49 [ТС]
	А Вы могли бы объяснить это? Или подробнее? Я просто не разбираюсь в этом( 0

@elochka 2 / 2 / 2 Регистрация: 20.10.2016 Сообщений: 92
	11.12.2016, 23:49 [ТС]
	Не получается. Данные отправляются, но страница все равно перезагружается. Да и требуется постоянно подтверждение на отправку формы. Возможно, я непонятен. Мне нужно, чтобы моментально все происходило. Примером может являться какой-нибудь чат, где сообщения моментально отправляются. Например, диалоги фейсбука или вконтакте. 0

@elochka 2 / 2 / 2 Регистрация: 20.10.2016 Сообщений: 92
	14.12.2016, 06:12 [ТС]
	как я понял, моя задача сводится к одному вопросу. как вставить данные в бд mysql без перезагрузки страницы и повторной отправки формы 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	14.12.2016, 23:00
	т.е. все советы что мы тебе дали не внесли ясности в твой вопрос? если уж совсем хочешь все разжеванное, хотя куда уж понятнее. пиши по пунктам. 1. код хтмл формы 2. по какому событию в форме нужно отправлять данные 3. куда отображать результат и надо ли это делать вообще 4. база mysql или postgre? 5. Каким запросом какие поля формы куда вставлять 0