При нажатии на 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.
Читайте здесь

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию 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 На первой гифке отладочные линии отключены, а на второй включены:. . .

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

	При нажатии на submit страница не обновлялась 28.08.2012, 18:54. Показов 43609. Ответов 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