Вернуть предыдущее значение элемента

@Marinka92 · Регистрация: 19.04.2014

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

Есть поле ввода с подсказкой к нему:

HTML5
1
2
3
4
<div class="form-group">
    <input id="name" name="name" class="form-control" type="text" />
    <span class="help-block">укажите ваши имя и отчество</span>
</div>

проверку делаю с помощью jquery.validate и когда поле правильно заполнено, то вот этим кодом ниже заменяю текст подсказки на "ок":

JavaScript
1
2
3
unhighlight: function (element, errorClass, validClass) {
    $(element).closest('.form-group').find('.help-block').html('ок');
}

а как мне после отправки формы обратно вернуть предыдущее значение текста посказки?

@kalabuni · 18.06.2014, 17:01

в теге <FORM> указано значение для атрибута TARGET ?

если значение не указано, то страница с формой после её сабмита будет заменена на ту, которая указана в атрибуте ACTION тега <FORM> - а это уже совсем другой документ, к которому javascript-код страницы с формой никакого отношения не имеет

@Marinka92 · 18.06.2014, 17:06 **[ТС]**

TARGET нет, есть action="email.php"
... форма отправляется без перезагрузки страницы

@kalabuni · 18.06.2014, 17:52

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

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

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

без перезагрузки могут отправляться данные полей формы с использованием скриптового объекта XMLHttpRequest (асинхронное использование которого называется AJAX), но не сама форма
будьте тщательнее в использовании терминологии

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

@Marinka92 · 18.06.2014, 18:13 **[ТС]**

kalabuni, да, эти самые поля формы и этот AJAX... но как сделать не знаю. вот.

@kalabuni · 18.06.2014, 19:18

~~собачьего~~ языка JQuery я не знаю (и знать не хочу)... поэтому приблизительно:

после строки, где вы отправляете данные полей -- что-то вроде ajaxSend () -- пропишите:

$(element).closest('.form-group').find('.help-block').html('то что вам надо');

@Marinka92 · 18.06.2014, 19:59 **[ТС]**

я сделала вот так:

JavaScript
1
$('#form-contact').parent().find('.help-block').html('отправлено');

но мне нужно чтобы там вместо "отправлено" было изначальное значение, а именно то что было до начала работы скрипта, тоесть:

HTML5
1
<span class="help-block">укажите ваши имя и отчество</span>

!!!нужно не задавать новое значение, а вернуть то что было...

Добавлено через 19 минут
просто я заменяла текст подсказки к полю на текст ошибки (если она есть), а потом когда поле заполнено правильно, текст ошибки остаётся, а нужно его заменить на текст который был изначально.

JavaScript
1
2
3
errorPlacement: function (error, element) {
    element.closest('.form-group').find('.help-block').html(error.text());
}

@kalabuni · 18.06.2014, 20:32

сохраните в переменной изначальное значение innerHTML спана, а после отправки запроса присвойте свойству innerHTML спана значение этой переменной

я не в курсе, как эта элементарная операция пишется на ~~собачьем~~ языке JQuery

@Marinka92 · 18.06.2014, 20:40 **[ТС]**

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

mihalken · 19.06.2014, 10:57

Marinka92, выложите код отправки (AJAX часть).

@Marinka92 · 19.06.2014, 11:50 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="form-group">
            <label for="name">Имя:</label>
            <input id="name" name="name" class="form-control" type="text" />
            <span class="help-block">ваши имя и отчество</span>
          </div>
          <div class="form-group">
            <label for="phone">Телефон:</label>
            <input id="phone" name="phone" class="form-control" type="text" />
            <span class="help-block">ваш контактный телефон</span>
          </div>
          <div class="form-group">
            <label for="email">E-mail:</label>
            <input id="email" name="email" class="form-control" type="email" />
            <span class="help-block">адрес вашей электронной почты</span>
          </div>
          <div class="form-group">
            <label for="message">Сообщение:</label>
            <textarea id="message" name="message" class="form-control" rows="5" maxlength="999" style="resize:none"></textarea>
            <span class="help-block">текст вашего сообщения</span>
          </div>
          <div id="response"></div>

JavaScript
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
$(document).ready(function(){
$.validator.setDefaults({
  submitHandler: function (form) {
    $.ajax({
        type: $(form).attr('method'),
        url: $(form).attr('action'),
        data: $(form).serialize(),
        success: function(response) {
            // Response message
            $('#response').html('<b class="btn">'+response+'</b>');
        },
    });
return false;
}
});
$("#form-contact").validate({
rules: {
name: { required:true},
phone: { required:true},
email: { required:true, email:true},
message: { required:true}
},
 
messages: {
    "name" : {
      required: "укажите ваши имя и отчество"
   },
    "phone" : {
      required: "укажите ваш контактный телефон"
   },
    "email" : {
      required: "укажите адрес вашей электронной почты",
      email: "неверно указан адрес электронной почты"
   },
    "message" : {
      required: "напишите тект вашего сообщения"
   }
},
 
errorElement: "span",
errorClass: "help-block",
highlight: function (element, errorClass, validClass) {
    $(element).closest('.form-group').removeClass('has-success').addClass('has-warning');
},
unhighlight: function (element, errorClass, validClass) {
    $(element).closest('.form-group').removeClass('has-warning').addClass('has-success');
    $(element).closest('.form-group').find('.help-block').html('ок'); // здесь заменяется текст ошибки на ок
},
errorPlacement: function (error, element) {
    element.closest('.form-group').find('.help-block').html(error.text()); // здесь заменяется текст подсказки на текст ошибки
}
 
});
 
});

Добавлено через 39 минут
вообще простым решением было бы не выводить текст ошибки в .help-block, а сделать для него .error-block и потом играть в сторону show() - hide() между .help-block и .error-block для разных состояний... я бы так и сделала, но это слишком просто, а я хочу не просто решить задачу но и научится чему-то новому. вот.

@kalabuni · 19.06.2014, 13:19

Не по теме:

имхо, вам бы лучше научитЬся пользоватЬся сервисом "Проверки правописания" программы Word

учитЬ правила правописания не рекомендую, ибо это бесполезно

грамотно пишут не те, кто правила назубок знает, а те, кто много читает
при чтении человеческий мозг автоматически запоминает "внешний вид" многократно прочитанных слов и затем противится при неправильном их написании

@Marinka92 · 19.06.2014, 13:27 **[ТС]**

КалабунечЬка, что же ты злой такой? Добрее нужно быть и не придераться к очепяткам...

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	18.06.2014, 17:01
	в теге <FORM> указано значение для атрибута TARGET ? если значение не указано, то страница с формой после её сабмита будет заменена на ту, которая указана в атрибуте ACTION тега <FORM> - а это уже совсем другой документ, к которому javascript-код страницы с формой никакого отношения не имеет 0

@Marinka92 11 / 11 / 3 Регистрация: 19.04.2014 Сообщений: 139
	18.06.2014, 17:06 [ТС]
	TARGET нет, есть action="email.php" ... форма отправляется без перезагрузки страницы 0

@Marinka92 11 / 11 / 3 Регистрация: 19.04.2014 Сообщений: 139
	18.06.2014, 18:13 [ТС]
	kalabuni, да, эти самые поля формы и этот AJAX... но как сделать не знаю. вот. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	18.06.2014, 19:18
	~~собачьего~~ языка JQuery я не знаю (и знать не хочу)... поэтому приблизительно: после строки, где вы отправляете данные полей -- что-то вроде ajaxSend () -- пропишите: $(element).closest('.form-group').find('.help-block').html('то что вам надо'); 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	18.06.2014, 20:32
	сохраните в переменной изначальное значение innerHTML спана, а после отправки запроса присвойте свойству innerHTML спана значение этой переменной я не в курсе, как эта элементарная операция пишется на ~~собачьем~~ языке JQuery 0

@Marinka92 11 / 11 / 3 Регистрация: 19.04.2014 Сообщений: 139
	18.06.2014, 20:40 [ТС]
	но там ведь несколько таких полей... я так понимаю что нужно сохранить все текстовые подсказки к полям в виде массива, а потом после отправки данных формы снова их восстановить... а как это сделать не понимаю 0

mihalken 97 / 97 / 74 Регистрация: 15.05.2014 Сообщений: 269 Записей в блоге: 2
	19.06.2014, 10:57
	Marinka92, выложите код отправки (AJAX часть). 0

@kalabuni
	19.06.2014, 13:19
	Не по теме: имхо, вам бы лучше научитЬся пользоватЬся сервисом "Проверки правописания" программы Word учитЬ правила правописания не рекомендую, ибо это бесполезно грамотно пишут не те, кто правила назубок знает, а те, кто много читает при чтении человеческий мозг автоматически запоминает "внешний вид" многократно прочитанных слов и затем противится при неправильном их написании 0

@Marinka92 11 / 11 / 3 Регистрация: 19.04.2014 Сообщений: 139
	19.06.2014, 13:27 [ТС]
	КалабунечЬка, что же ты злой такой? Добрее нужно быть и не придераться к очепяткам... 0