Почему скрипт не работает

@Steisi1982 · Регистрация: 16.05.2018

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

Не работает этот скрипт. При нажатии на кнопку форма уходит, а стили не применяются. Почему-то там стоит user agent stylesheet display:block. И это не меняется.

JavaScript
1
2
3
4
5
6
7
8
9
$("#formBtn").click(function() {
        if (mailValid() && inpTextValid() && inpAgeValid() && inpTelValid()) {
            $("#applicationForm").css("display", "none;");
            $("#loadingShow").css("display", "block");
            $("").submit(function(){
                return true; 
            });
        }
    });

Пробовала скрывать и отображать эти блоки через addClas, remove, результат тот же. Где-то я туплю что ли. Помогите

@ft4l · 01.02.2020, 05:11

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

return true;

Не очень понятно... т.е. непонятно при клике страница перезагружается ?
или выполняется ajax запрос , посылается что-то типа $("#applicationForm").serialize()
и куда-то выводится полученный ответ ?

@Steisi1982 · 01.02.2020, 05:15 **[ТС]**

при клике страница не перезагружается, все данные отправляются в файл php, а оттуда на mail.

HTML5
1
<form enctype="multipart/form-data" id="applicationForm" action="./send.php" method="post" target="hiddenframe">

@ft4l · 01.02.2020, 06:56

ну так все такие изменения стилей действуют только для текущей страницы ... до перезагрузки
наверное нужно посылать ajax-ом post-запрос с этим $("").serialize()
не знаю как правильно c jquery )) типа .send .post или как то так.
И подозреваю что форма отправляет файл

Интересно что выведет alert($("").serialize()); ))

Добавлено через 2 минуты
или записывать что-то в куки, и при загрузке страницы устанавливать стили исходя из этих значений

Добавлено через 7 минут
нашёл ))

Code
1
2
3
4
5
6
7
8
9
Example: Save some data to the server and notify the user once it's complete. 
$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 });

Добавлено через 1 час 14 минут
попробовал с плагином http://jquery.malsup.com/form/#tab2

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.....
<script src="./jquery.js"></script>
    <script src="./jquery.form.min.js"></script>
....
 
<script>
    $('#applicationForm').submit(function() {
        $(this).ajaxForm();
        alert($(this).formSerialize());
        $(this).ajaxSubmit(); 
        // return false to prevent normal browser submit and page navigation 
        return false;
    });
</script>

файл получил... Но не получал никакого сообщения что форма успешно отправлялась и что что-то отвечал отправляющий скрипт, а отвечал он целой страницей

Кто-то знает как получить ответ?

@Steisi1982 · 01.02.2020, 08:03 **[ТС]**

Так я страницу и не перезагружаю

@ft4l · 01.02.2020, 09:13

Если честно , я не знаю

как так получается
обычно return true; по onsubmit позволяет совершить браузеру переход на другую страницу или на ту-же.
например вот php файл с этим плагином )) jquery.form

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
<?php
    header('Content-type: text/html; charset=utf-8');
 
if ($_SERVER['REQUEST_METHOD']=='POST'){
    echo '<xmp>'.var_export($_POST)."</xmp>\n";
    echo '<xmp>'.var_export($_FILES)."</xmp>\n";
    exit;
}
?>
<!DOCTYPE html>
<html><head>
    <title>xxx</title>
    <style>
    html    {padding:0; margin:0; width:100%;
background:url(data:image/gif;base64,R0lGODdhAQAGALEAAABtAP//AG0AAAAAACwAAAAAAQAGAAACBAQSIgUAOw==) 0/contain repeat-x;}
    body    {width:88%; margin:1ex auto; padding:1ex 1em; background:#EEE; border-radius: 1em;}
    .frm    {width:70%; margin:1em auto; border:solid 2pt #074;}
    .frm *  {font:600 102% serif; padding:3pt;}
    .frm i  {color:#008; font:500 100% obligue, sans;}
    .frm input  {float:right; clear:right; width:40%; margin:2pt;}
    .frm span   {float:right; margin:0 1em;}
    </style>
    <script src="./jquery.js"></script>
    <script src="./jquery.form.min.js"></script>
</head>
<body>
<header></header>
<nav></nav>
 
<form action="?" method="post" id="applicationForm" enctype="multipart/form-data">
<fieldset class="frm"><legend>test</legend>
<input type="text" name="xxx" value="xxx" /><span>xxx</span>
<input type="text" name="yyy" value="yyy" /><span>yyy</span>
<!-- input type="hidden" name="MAX_FILE_SIZE" value="2048000"/ -->
<input type="file" name="file" required /><span class="required">Файл</span>
<!-- accept=".jpg, .jpeg, .gif, .png, .svg" думаю не стоит картинок может не найтись )) -->
<input type="submit" value="OK"/>
 
<i> Убедитесь что размер загружаемого файла не превышает <?=ini_get('upload_max_filesize')?></i>
</fieldset>
</form>
<div id="results"></div>
<script>
    $('#applicationForm').ajaxForm(
        {
            beforeSubmit: function() {
            $('#results').html('Submitting...');
            $('#results').css('background','#970');
            alert($('#applicationForm').serialize());
            alert($('#applicationForm').formSerialize());
        },
        success: function(data) {
             var $out = $('#results');
             $out.css('background','#9E0');
             $out.html('Your results:');
             $out.append('<div><pre>'+ data +'</pre></div>');
             
        }
    });
</script>
<footer></footer>
</body>
</html>

но я с js вообще стараюсь не связываться ) слишком много надо браузеров чтобы тестить ))

Добавлено через 3 минуты
там как-будто это return false; вшито в плагин jquery.form вместе с submit

Добавлено через 7 минут

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

var_export($_POST)

должно быть var_export($_POST, 1) в обоих случаях

@ft4l · 01.02.2020, 15:19

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

$("#applicationForm").css("display", "none;");

Понял почему не работало

из-за точки с запятой где "none;"

Ошибка при парсинге значения «display». Потерянное объявление.

А так да target="hiddenframe" )) оказалось работает как надо

@Steisi1982 · 02.02.2020, 02:21 **[ТС]**

глаз уже замылился. не вижу. спасибо огромное

Новые блоги и статьи Все статьи Все блоги /
Философия технологии 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(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@Steisi1982 1 / 0 / 0 Регистрация: 16.05.2018 Сообщений: 62
	01.02.2020, 08:03 [ТС]
	Так я страницу и не перезагружаю 0

@Steisi1982 1 / 0 / 0 Регистрация: 16.05.2018 Сообщений: 62
	02.02.2020, 02:21 [ТС]
	глаз уже замылился. не вижу. спасибо огромное 0

Почему скрипт не работает

Решение