При нажатии на submit страница не обновлялась

@Bolula · Регистрация: 19.04.2012

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

Можно ли сделать так, чтобы при нажатии на submit страница не обновлялась?

Объяснили что можно сделать через ajax, а как я так и не поняла( Подскажите, пожалуйста)

@kalabuni · 28.08.2012, 19:14

Начнём с того, что кнопка <input type="submit"> - она придумана не для того, чтобы страница обновлялась.
Её предназначение - отправка данных из тега <FORM> на сервер.
И при этом страница не "обновляется", а заменяется другой страницей - той, адрес которой указан в атрибуте ACTION тега <FORM>.

Вопрос первый - вам надо чего-нить на сервер отправлять?

@Soldado · 28.08.2012, 19:59

Событие браузера submit - стандартное событие, которое можно отменить с помощью event.preventDefault();
Для JS почитайте здесь
Для jQuery - здесь
Можно в форме вообще не указывать submit, вместо него использовать type="button". Затем вешайте на кнопку событие click по которому
из полей формы в переменные заносите данные, а затем их отправляете обработчику с помощью ajax. Вот пример смотри $.get - это для jQuery есть подобное и для JS (точно) - это уже сами ищите.

@Bolula · 28.08.2012, 22:07 **[ТС]**

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

Начнём с того, что кнопка <input type="submit"> - она придумана не для того, чтобы страница обновлялась.
Её предназначение - отправка данных из тега <FORM> на сервер.
И при этом страница не "обновляется", а заменяется другой страницей - той, адрес которой указан в атрибуте ACTION тега <FORM>.

Вопрос первый - вам надо чего-нить на сервер отправлять?

Да надо отправлять)

action отсутствует, при нажатии выполняется sql запрос и данные добавляются в БД =)

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

Событие браузера submit - стандартное событие, которое можно отменить с помощью event.preventDefault();
Для JS почитайте здесь
Для jQuery - здесь
Можно в форме вообще не указывать submit, вместо него использовать type="button". Затем вешайте на кнопку событие click по которому
из полей формы в переменные заносите данные, а затем их отправляете обработчику с помощью ajax. Вот пример смотри $.get - это для jQuery есть подобное и для JS (точно) - это уже сами ищите.

Не очень понимаю как делать О__о
если указать type="button", тогда данные не будут отправляться на сервер О__о

Добавлено через 13 минут
У меня вот проблема то какая:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
    <script type="text/javascript" src="js/node.js"></script>
</head>
 
<body>
    <?php
        include('mysql.php');
    ?>
    <form name="f_qq" method="POST">
        <input type="button" value="Выбрать" onclick="show('ff'); return true;">
        <div id="ff" style="display:none;">
            Текст
        </div>
        <br/>
        <input type="text" name="pole" style="width:35px;">
        <input type="submit" name="btt_zapro" value="Сохранить" onclick="qq(); return true;">
    </form>
 
    <script type="text/javascript">
    function qq()
    {
    <?php
        $pol = $_POST['pole'];
        $query = "UPDATE `temp` SET `bl` = '{$pol}' WHERE `login` = 'Nik'";
        $sql = mysql_query($query) or die(mysql_error());
    ?>
    }
    </script>
</body>
 
</html>

При нажатии кнопки "Сохранить" контейнер с div id="ff" опять скрывается, а надо сделать чтобы не скрывался)

Как я поняла для этого надо в onclick прописать метод event.preventDefault()?

@kalabuni · 28.08.2012, 22:14

Bolula, чтобы страница не заменялась на другую, есть два варианта:

1. либо прописать <form target="myIFR">
и иметь на странице невидимый ифрейм
<iframe name="myIFR" style="display: none"></iframe>
Тогда сабмит произойдёт незаметно для пользователя.

2. либо использовать технологию AJAX. А она немного различается для методов GET и POST.

Отсюда, если нужен именно AJAX, то вопрос второй - среди отправляемых на сервер данных есть файл?
То есть, имеется ли среди элементов формы <input type="file"> (один или несколько)?
Потому что отправлять файл можно только методом POST.

@Bolula · 28.08.2012, 22:18 **[ТС]**

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

1. либо прописать <form target="myIFR">
и иметь на странице невидимый ифрейм
<iframe name="myIFR" style="display: none"></iframe>
Тогда сабмит произойдёт незаметно для пользователя.

kalabuni, спасибо тебе большое:**** То что надо было)*

@Soldado · 28.08.2012, 22:27

если указать type="button", тогда данные не будут отправляться на сервер О__о

А если отменить стандартное событие submit, то данные будут отправляться на сервер?
Недостаточно прописать .preventDefault() - этим мы отменим стандартную отправку, нужно её чем то заменить, а заменит её ajax.
Читайте здесь

Новые блоги и статьи Все статьи Все блоги /
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. 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-динозавры, а новое поколение лёгких потоков. Откат?. . .

@Bolula 1 / 1 / 0 Регистрация: 19.04.2012 Сообщений: 27

	При нажатии на submit страница не обновлялась 28.08.2012, 18:54. Показов 43534. Ответов 6 Метки нет (Все метки) Можно ли сделать так, чтобы при нажатии на submit страница не обновлялась? Объяснили что можно сделать через ajax, а как я так и не поняла( Подскажите, пожалуйста) 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	28.08.2012, 19:14
	Начнём с того, что кнопка <input type="submit"> - она придумана не для того, чтобы страница обновлялась. Её предназначение - отправка данных из тега <FORM> на сервер. И при этом страница не "обновляется", а заменяется другой страницей - той, адрес которой указан в атрибуте ACTION тега <FORM>. Вопрос первый - вам надо чего-нить на сервер отправлять? 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	28.08.2012, 19:59
	Событие браузера submit - стандартное событие, которое можно отменить с помощью event.preventDefault(); Для JS почитайте здесь Для jQuery - здесь Можно в форме вообще не указывать submit, вместо него использовать type="button". Затем вешайте на кнопку событие click по которому из полей формы в переменные заносите данные, а затем их отправляете обработчику с помощью ajax. Вот пример смотри $.get - это для jQuery есть подобное и для JS (точно) - это уже сами ищите. 1

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	28.08.2012, 22:14
	Bolula, чтобы страница не заменялась на другую, есть два варианта: 1. либо прописать <form target="myIFR"> и иметь на странице невидимый ифрейм <iframe name="myIFR" style="display: none"></iframe> Тогда сабмит произойдёт незаметно для пользователя. 2. либо использовать технологию AJAX. А она немного различается для методов GET и POST. Отсюда, если нужен именно AJAX, то вопрос второй - среди отправляемых на сервер данных есть файл? То есть, имеется ли среди элементов формы <input type="file"> (один или несколько)? Потому что отправлять файл можно только методом POST. 1