Change() event nie działa na input=text wypełniony cyframi przez val()

0

Kłaniam się forumowiczom,

jestem bardzo początkującym, można by rzec hobbystycznym "twórcą"* javascript i okazjonalnie potrzebuję stworzyć coś prostego na własne potrzeby w oparciu o javascript.

Mam problem tak jak w tytule - mianowicie piszę prosty kod, który wypełnia mi formularz na stronie określonymi danymi, po czym klika w button. Początkowo wspomniany button jest nieaktywny. Każde pole formularza, aby zostało zweryfikowane poprawnie i w efekcie uaktywniło wspomniany button, musi zostać "od kliknięte" (stracić focus) po wypełnieniu, inaczej skrypt tak jakby nie widzi tego, że pola zostały wypełnione. Tak więc pola w formularzu wypełniam metodą val(), wszystkie te pola są rodzaju: input=text. Po wypełnieniu wywołuję metodę change() by formularz "zobaczył" zmianę wartości pola.

Problem: kiedy wypełniam pole samym tekstem change() działa i wszystko jest ok, natomiast kiedy wypełniam pole cyframi, adresem email, datą itp. change() nie załącza się i formularz nie widzi zmiany.

Czy i jak można sobie z tym poradzić? Pracuję nad tym od prawie 3-ech tygodni, przejrzałem chyba cały stackoverflow i jemu podobne, ale za nic nie mogę dojść do tego, jak rozwiązać ten problem.

Poniżej metoda jaką stosuję wypełniając i aktywując pola:

var wartosc = "wartoscpola";
$("#pole1").val(wartosc);
var selections = document.querySelector('#pole1');
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", true, true);
selections.dispatchEvent(evt);

Serdecznie proszę o pomoc. Za wskazówkę stawiam piwo po podaniu namiarów na PayPal :)

  • oczywiście nie "twórcą" a raczej "programistą" jak zdążył zauważyć Patryk27, bo samego języka rzeczywiście nie stworzyłem ani nie tworzę ;)
0

Zwykłe $('#pole1').val(wartosc).change() nie wystarczy?
Ew. jeszcze masz $(...).trigger().

0

No niestety, ani jedno ani drugie. Już tyle sposobów próbowałem, że zacząłem się łapać na tym, że niektóre po kilka razy już, o czym orientowałem się dopiero jak kolejny już raz dopisałem jedną i tą samą formułę. Dlatego też zdecydowałem się poradzić kogoś, może ktoś na coś wpadnie, ale też myślałem, że możliwe że to prosta sprawa tylko moje umiejętności nie są wystarczające.

Myślałem, że znalazłem złoty środek, mianowicie po wypełnieniu pola stosując .focus() na tym właśnie polu aktywowałem go i tak po kolei każde pole, jednak ta metoda działa tylko kiedy strona z formularzem, który wypełniam jest aktywna/widoczna na ekranie, natomiast kiedy np. zminimalizuję przeglądarkę na czas wypełniania formularza, to wszystkie pola się wypełniają ładnie, jednak focus() ustawia się tylko na ostatnim polu formularza i tylko to jedno pole jest aktywowane mimo, że w kodzie ustawiłem focus() na każde pole po kolei. Myślałem, że powodem może być to, że chrome po zminimalizowaniu przechodzi w stan obniżonej wydajności, ale wyłączyłem tą opcję w :config'u przeglądarki i nic. Zresztą, pola wypełnia normalnie i inne interakcje z obiektami na stronie również działają bez zarzutu nawet kiedy zminimalizuję przeglądarkę, tylko ten focus() nie chce działać w żaden sposób.

Gdzieś na stackoverflow znalazłem podobny temat i tam ktoś stwierdził, że na pole input="text" wypełnione cyframi change() nie zadziała, ale innej metody niestety też nikt nie zaproponował.

2

Po pierwsze to wydaje mi się, że mieszasz jQuery z natywnymi metodami JavaScriptu a to raczej nie jest dobry pomysł.
Nie dałeś też całego kodu więc nie wiem jak ustawiasz eventy itd. Natomiast takie coś działa:

<body>
  <form>
    <input id="input" type="text" />
    <button type="button" id="submit-button" disabled>RUN</button>
  </form>

  <button type="button" id="text">TEXT</button>
  <button type="button" id="number">NUMBER</button>

  <script>
    (function(){
      $('#input').on('change paste input', e => {
        $('#submit-button').attr('disabled', false);
      })

      $('#text').on('click', e => {
        $('#input').val('123TEST');
        $('#input').trigger('change');
      })

      $('#number').on('click', e => {
        $('#input').val(123);
        $('#input').trigger('change');
      })
    })();
  </script>
</body>
0
OverMorda napisał(a):

Po pierwsze to wydaje mi się, że mieszasz jQuery z natywnymi metodami JavaScriptu a to raczej nie jest dobry pomysł.
Nie dałeś też całego kodu więc nie wiem jak ustawiasz eventy itd. Natomiast takie coś działa:

<body>
  <form>
    <input id="input" type="text" />
    <button type="button" id="submit-button" disabled>RUN</button>
  </form>

  <button type="button" id="text">TEXT</button>
  <button type="button" id="number">NUMBER</button>

  <script>
    (function(){
      $('#input').on('change paste input', e => {
        $('#submit-button').attr('disabled', false);
      })

      $('#text').on('click', e => {
        $('#input').val('123TEST');
        $('#input').trigger('change');
      })

      $('#number').on('click', e => {
        $('#input').val(123);
        $('#input').trigger('change');
      })
    })();
  </script>
</body>

Dziękuję za wskazówkę - jutro przetestuję bo dziś już mam dość... Postaram się też więcej kodu wrzucić w razie czego, jeśliby to miało pomóc

0

Witam ponownie, po długiej przerwie, ale niestety praca pracą i tak odciąga mnie od tematu.

Powyższa metoda niestety nie przyniosła efektów. O ile button się uaktywnia ponieważ traci atrybut "disabled" to nijak nie wpływa to na skuteczne wywołanie eventu change() na konkretnych, wspomnianych wcześniej, uzupełnionych polach.

Niestety jak chodzi o wklejenie kodu strony z formularzem nie otrzymałem zgody na to z racji tego iż jest to aplikacja firmowa/branżowa i nie mogę udostępnić jej kodu źródłowego.

Wracając do metody powyższej - button się uaktywnił, ale change() nie został wywołany na określonych polach. Po kliknięciu w button wartości w ww polach po prostu zniknęły/wyczyściły się. Czyli tak jakby button zatrybił ale wartości w polach jak nie widział tak nie widzi.

Może podam konretny przykład pola o które mi chodzi. Przykładowo pole PESEL w formularzu, jest to pole z maską i walidacją wprowadzonych danych - kod tego pola wygląda tak:

<input type="text" class="input invalid" data-bind="validateExtenders: 'false', mask: '?99999999999', visible: !$data.Contractor().IsForeigner(), masked: $data.Contractor().PersonalCode, css: $data.Contractor().PersonalCode.isValid() ? '' : 'invalid', enable: $data.CalculationMode() != 1">

Lub też pole DATA (datepicker):

<input id="inputCustomerDataStartDate" type="text" class="w-70 picker__input" data-bind="mask: '9999-99-99', masked: vm().Contract.PeriodData().StartDate, enable: vm().Contract.CalculationMode() == 0, css: vm().Contract.PeriodData().StartDate.isValid() ? '' : 'invalid'" aria-haspopup="true" aria-expanded="false" aria-readonly="false" aria-owns="inputCustomerDataStartDate_root inputCustomerDataStartDate_hidden">

W polach nie ma atrybutu "value" i nie wiem czy ma to jakieś znaczenie.

Szukam dalej rozwiązania ale marnie to widzę. Tym bardziej bez wglądu w kod kogoś znającego się na rzeczy, toteż rozumiem, że pomoc w tym przypadku jest raczej trudna.

1 użytkowników online, w tym zalogowanych: 0, gości: 1