Вызов функции JavaScript после отправки <input type="submit">

@heroinka · Регистрация: 10.12.2009

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

Добрый день, подскажите пожалуйста, есть вот такой скриптик

JavaScript
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript"> 
 $(function() {
     $('#click-elem').click(function(){  
         $('#overlay').fadeIn('fast',function(){
             $('#nonebox').animate({'top':'30px'},400);
         });
     });
 
 });        
</script>

Вызывается оно через ссылку следующего вида: <a href="#" id="click-elem">Вызвать</a>

А у меня вот так:

HTML5
1
<input class="buttond" type="submit" name="submit" value="Отправить"/>

Мне нужно, чтобы после нажатия на кнопку отправлялась форма, а потом срабатывал id="click-elem".

Так не работает:

HTML5
1
2
3
<a href="#" id="click-elem">
<input class="buttond" type="submit" name="submit" value="Отправить"/>
</a>

@Pafos · 30.01.2013, 15:50

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

Мне нужно, чтобы после нажатия на кнопку отправлялась форма, а потом срабатывал id="click-elem".

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

Если на оборот, сначала работа скрипт, а потом отправка формы, то дайте вашей кнопке id="click-elem", тоесть, что-то типа:

HTML5
1
<input id="click-elem" class="buttond" type="submit" name="submit" value="Отправить"/>

@heroinka · 30.01.2013, 18:30 **[ТС]**

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

Если на оборот, сначала работа скрипт, а потом отправка формы, то дайте вашей кнопке id="click-elem", тоесть, что-то типа:

HTML5
1
<input id="click-elem" class="buttond" type="submit" name="submit" value="Отправить"/>

Так делала, форма отправляется, скрипт не запускается!

@Pafos · 30.01.2013, 18:39

jQuery подключён?

@heroinka · 30.01.2013, 18:40 **[ТС]**

Да подключен, если запускать так <a href="#" id="click-elem">Запуск</a> Скрипт запускается!

@Pafos · 30.01.2013, 18:40

JavaScript
1
2
3
4
5
    $('#click-elem').click(function(){ 
        $('#overlay').fadeIn('fast',function(){
            $('#nonebox').animate({'top':'30px'},400);
        });
    });

Это вы писали?
У вас эти блоки в верстке присутствуют, с ай-ди: overlay, nonebox ?

@heroinka · 30.01.2013, 18:48 **[ТС]**

Да присутствуют, вылазит поп андер в центр экрана...

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="overlay" id="overlay" style="display:none;"></div> 
        <div class="nonebox" id="nonebox">
<p>
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
ТЕКСТ
</p>
</div>

Все работает при клике на ссылку... Видно в коде ява скрипта прописано .click, а он запускается только при клике на <a href с нужным ID, а <input type="submit" name="submit" value="Отправить"/> не передает действия .click поэтому не срабатывает, это я так думаю...

@Mullih · 30.01.2013, 18:55

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
    $(function () {
        $('#click-elem').closest('form').submit(function (e) {
            e.preventDefault();
            var $form = $(this).closest('form');
            $form.unbind('submit');
 
            $('#overlay').fadeIn('fast', function () {
                $('#nonebox').animate({ 'top': '30px' }, 400, function () {
                    $form.submit();
                });
            });
        });
 
    });        
</script>

а если так?

и вообще можно обвертку вокруг кнопки убрать тогда так получиться

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
    $(function () {
        $('form').submit(function (e) {
            e.preventDefault();
            var $form = $(this);
            $form.unbind('submit');
 
            $('#overlay').fadeIn('fast', function () {
                $('#nonebox').animate({ 'top': '30px' }, 400, function () {
                    $form.submit();
                });
            });
        });
 
    });        
</script>

@heroinka · 30.01.2013, 19:03 **[ТС]**

Mullih, теперь при клике на кнопку вылазит сразу поп андер, но форма не отправляется!! а надо чтобы отправлялась

Добавлено через 1 минуту
Надо чтобы сначала форма отправилась, а потом поп андер вылазил

@Mullih · 30.01.2013, 19:19

отправка формы аяксом вас устроит?

@Soldado · 30.01.2013, 19:21

Чтобы форма отправлялась, а потом выполнялся скрипт (автоматический клик) нужно отправлять её с помощью ajax, иначе страница будет перезагружаться и всё вернётся в исходное состояние, а для автоматического клика по ссылке нужно записать

JavaScript
1
$('#click-elem').trigger ('click');

.trigger('событие', {данные}) - генерирует событие, т.е. если для какого-то элемента задано событие и его обработчик, то этот метод позволяет програмно запустить это событие (данные необязательны)

@heroinka · 30.01.2013, 22:25 **[ТС]**

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

@Soldado · 31.01.2013, 00:00

Рабочий пример отправки формы через ajax

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Pafos 97 / 97 / 17 Регистрация: 18.10.2009 Сообщений: 453
	30.01.2013, 18:39
	jQuery подключён? 0

@heroinka 0 / 0 / 0 Регистрация: 10.12.2009 Сообщений: 25
	30.01.2013, 18:40 [ТС]
	Да подключен, если запускать так <a href="#" id="click-elem">Запуск</a> Скрипт запускается! 0

@heroinka 0 / 0 / 0 Регистрация: 10.12.2009 Сообщений: 25
	30.01.2013, 19:03 [ТС]
	Mullih, теперь при клике на кнопку вылазит сразу поп андер, но форма не отправляется!! а надо чтобы отправлялась Добавлено через 1 минуту Надо чтобы сначала форма отправилась, а потом поп андер вылазил 0

@Mullih 92 / 71 / 8 Регистрация: 05.08.2012 Сообщений: 138
	30.01.2013, 19:19
	отправка формы аяксом вас устроит? 0

@heroinka 0 / 0 / 0 Регистрация: 10.12.2009 Сообщений: 25
	30.01.2013, 22:25 [ТС]
	а пример отправки формы через аякс можно? и код как туда прикрутить мой поп андер 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	31.01.2013, 00:00
	Рабочий пример отправки формы через ajax 0