Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как отследить событие изменения скрытого input? (https://javascript.ru/forum/jquery/57973-kak-otsledit-sobytie-izmeneniya-skrytogo-input.html)

helgajijka 28.08.2015 16:20

Как отследить событие изменения скрытого input?
 
Помогите пожалуйста разобраться с таким вопросом:
Есть скрытое поле input, туда заносятся значения по действию пользователя (в данном случаю пользователь выбирает дату на фильтре).

Как можно отследить каждое изменение значения поля input?

Спасибо за ответы

рони 28.08.2015 16:30

Цитата:

Сообщение от helgajijka
туда заносятся

это наверно шаман заносит? может шаману бубен дать пусть стучит в бубен когда меняет данные.
хочется самому стучать ищите MutationObserver

helgajijka 28.08.2015 16:39

))
Дело в том что там есть уже скрипт, который, добавляет в этот input значение из разных элементов, в частности из select. Вот фрагмент кода:
$('.select-date').change(function () {		
		var val = $(this).val();
		$('#inputHidden').val(val);	 
	});

И теперь в отдельном скрипте нужно отследить изменение значения этого input.
Ну как то так))
Я попробовала вот это решение
var inp = $('#inputHidden'),
    inputValue= inp.val(),
    timer = setInterval(function(){
        if(inp.val() !== inputValue) {
            clearInterval(timer);
            inp.trigger('change');
        }
    }, 100);
 
$('#inputHidden').on('change', function(){
    console.log("changed");
 });


Но это не дает нужного результата, я так понимаю здесь change не подходит.
Может посоветуете какое событие у input нужно использовать?

join 28.08.2015 17:45

helgajijka,
input

рони 28.08.2015 17:55

join,
требуется отследить $.val а не событие

рони 28.08.2015 18:17

helgajijka,
вот такие танцы с бубнами можно попробовать :)
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function() {
     $(".select-date").change(function() {
         var a = $(this).val();
         $("#inputHidden").val(a)
     });
     $.valHooks.input = {
         get: function(a) {
             return a.value
         },
         set: function(a, b) {
             var c = a.value;
             a.value = b;
             "inputHidden" == a.id && c !== b && $(a).trigger("change")
         }
     };
     $("#inputHidden").on("change", function() {
         alert(this.value)
     })
 });


  </script>
</head>

<body>
   <form action="http://">
  <input id="inputHidden" name="" type="hidden">
  <select class="select-date" name="" size="1">
  <option value="1">1</option>
  <option value="2">2</option>
  </select>
  </form>

</body>

</html>

join 29.08.2015 10:42

Цитата:

Сообщение от рони
требуется отследить $.val а не событие

Верно. Моя невнимательность.

Только не понял что делают эти две строки кода?
"inputHidden" == a.id && c !== b


Вроде никак не влияют на конечный результат.

рони 29.08.2015 10:56

Цитата:

Сообщение от join
Только не понял что делают эти две строки кода?
"inputHidden" == a.id && c !== b

запускать тригер только для одного элемента и только в том случае если его значение поменялось на иное

join 29.08.2015 11:01

рони,
Ясно. Буду знать.

helgajijka 29.08.2015 23:59

Спасибо всем огромное за ответы!

рони,
Отдельное спасибо за решение, действительно это в моем случае работает, хотя лично я не все понимаю в этом коде)) особенно вот эта строка мне совсем не понятна -
"inputHidden" == a.id && c !== b && $(a).trigger("change")

Спасибо еще раз за помощь! Уже не раз Вы меня выручаете)
Благодарю за поддержку!


Часовой пояс GMT +3, время: 02:39.