Форум

helgajijka · #1 (**permalink**) 28.08.2015, 16:20

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

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

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

рони · #2 (**permalink**) 28.08.2015, 16:30

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

туда заносятся

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

helgajijka · #3 (**permalink**) 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 · #4 (**permalink**) 28.08.2015, 17:45

helgajijka,
input

рони · #5 (**permalink**) 28.08.2015, 17:55

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

рони · #6 (**permalink**) 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 · #7 (**permalink**) 29.08.2015, 10:42

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

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

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

Только не понял что делают эти две строки кода?

"inputHidden" == a.id && c !== b

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

рони · #8 (**permalink**) 29.08.2015, 10:56

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

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

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

join · #9 (**permalink**) 29.08.2015, 11:01

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

helgajijka · #10 (**permalink**) 29.08.2015, 23:59

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

рони,
Отдельное спасибо за решение, действительно это в моем случае работает, хотя лично я не все понимаю в этом коде)) особенно вот эта строка мне совсем не понятна -

"inputHidden" == a.id && c !== b && $(a).trigger("change")

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

Форум

Справочник

Discord чат

Курсы javascript