Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript]Dwa skrypty, jeden !czasem! nie działa.
sadistic_son
post
Post #1





Grupa: Zarejestrowani
Postów: 1 495
Pomógł: 245
Dołączył: 1.07.2009
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

Cześć.
Mam na stronie dwa skrypty. Jeden wyświetla DIVy z zawartością, w zależności od wyboru w SELECT. Tego ładuję w <head>:
[JAVASCRIPT] pobierz, plaintext 
  1. let selector = document.getElementById('productType');
  2. const dynamicFields = document.getElementsByClassName('dynamicFields');
  3.  
  4. selector.addEventListener("change", () => {
  5.     let visible = document.getElementById(selector.value);
  6.     for (var i = 0; i < dynamicFields.length; i++) {
  7.         let c = dynamicFields[i];
  8.         c.style.display = 'none';
  9.     }
  10.  
  11.  
  12.     visible.style.display = 'block';
  13. })
[JAVASCRIPT] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <head>
  2.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  3.     <title>
  4.         <?= $title; ?>
  5.     </title>
  6.     <style type="text/css">
  7.         @import url('pagefiles/styles/main.css');
  8.     </style>
  9.     <script src="pagefiles/js/displayPropertyFields.js" defer async></script>
[HTML] pobierz, plaintext



Drugi natomiast sprawdza, czy wypełniono wszystkie wymagane pola input i jeśli któreś jest puste to wrzuca w DIV wiadomość:
[JAVASCRIPT] pobierz, plaintext 
  1. function validateForm() {
  2.     document.getElementById("alertMessage").innerHTML = "";
  3.     var sku = document.forms["product_form"]["sku"].value;
  4.     var name = document.forms["product_form"]["name"].value;
  5.     var price = document.forms["product_form"]["price"].value;
  6.     var productType = document.forms["product_form"]["productType"].value;
  7.  
  8.     if (sku == "" || name == "" || price == "" || productType == "") {
  9.         let ele = document.getElementById('alertMessage');
  10.         ele.innerHTML += 'Please, submit required data.';
  11.         return false;
  12.     }
  13.     document.getElementById("product_form").submit();
  14. }
[JAVASCRIPT] pobierz, plaintext


Teraz kawałek htmla (zbędne elementy usunąłem):
[HTML] pobierz, plaintext 
  1. <form method="POST" id="product_form" name="product_form" onsubmit="return validateForm()" action="http://xxx.pl/add-product">
  2.             <button type="submit" name="save">Save</button>
  3.         <script src="pagefiles/js/displayErrorMessage.js"></script>
  4.         <div id="alertMessage"></div>
  5. <input type="text" id="sku" name="sku" />
  6. <input type="text" id="name" name="name" />
  7. <input type="text" id="price" name="price" />
  8. <select id="productType" name="productType">
  9.        <option value="" selected="selected"></option>
  10.        <option value="DVD">DVD</option>
  11.        <option value="book">book</option>
  12. </select>
  13.  
  14. Dalej są DIVy które mają się pokazywać jak wybiorę ich ID w SELECT:
  15. <div class="dynamicFields" id="DVD">
  16. <div class="dynamicFields" id="book">
[HTML] pobierz, plaintext
Ten drugi skrypt, jak widać wrzucam bezpośrednio do formularza. Czemu? Sam nie wiem, tak było w przykładzie z netu który przerobiłem pod własną potrzebę.

Ale do rzeczy. Pierwotnie był tylko pierwszy skrypt (wyświetlający DIVy w zależności co było wybrane w SELECT. I wszystko działało bez zarzutu.
Po dodaniu drugiego skryptu (sprawdzenie czy wpisano wartości do pół) pierwszy skrypt CZASAMI nie działa. Nie udało mi się stwierdzić jasno w jakiej sytuacji nie działa. Chyba najczęściej kiedy kliknę pole input text i nic w nie nie wpiszę i wtedy staram się wybrać select (żeby pokazać ukryty DIV).
Czy te skrypty mogą się jakoś między sobą gryźć?

Ten post edytował sadistic_son 10.01.2023, 18:12:42


--------------------
Uśpieni przez system, wychowani przez media,
Karmieni zmysłami, próżnymi żądzami...
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Jesteś zbyt leniwy, żeby się zarejestrować? Ja jestem zbyt leniwy aby Ci pomóc!
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Go to the top of the page
+Quote Post
nospor
post
Post #2





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
A patrzyles czy konsola przegladarki pokazuje jakis blad w sytuacji gdy nie dziala?


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer
Go to the top of the page
+Quote Post
viking
post
Post #3





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----

Z kodu wynika że w ogóle nie przyjmujesz się faktem czy dom został załadowany.


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
sadistic_son
post
Post #4





Grupa: Zarejestrowani
Postów: 1 495
Pomógł: 245
Dołączył: 1.07.2009
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

Cytat(nospor @ 10.01.2023, 21:18:17 ) *
A patrzyles czy konsola przegladarki pokazuje jakis blad w sytuacji gdy nie dziala?

Nie rozumiem tego - dobre 5 minut klikałem dziś w każdej możliwej kombinacji i ani razu się nie wysypało. A nic od wczoraj nie zmieniałem, jeszcze edytora nawet nie włączyłem. No nic, będę monitorować konsolę.


Cytat(viking @ 11.01.2023, 07:17:05 ) *
Z kodu wynika że w ogóle nie przyjmujesz się faktem czy dom został załadowany.

Racja. Ale czy to ma tak na serio jakieś znaczenie tutaj? Na stronie gdzie tych elementów nie ma to w ogóle tych skryptów nie załączam. Ale ok, mogę to zmienić tak:
[JAVASCRIPT] pobierz, plaintext 
  1. let selector = document.getElementById('productType');
  2. const dynamicFields = document.getElementsByClassName('dynamicFields');
  3.  
  4. if (selector && dynamicFields) {
  5.     selector.addEventListener("change", () => {
  6.         let visible = document.getElementById(selector.value);
  7.         for (var i = 0; i < dynamicFields.length; i++) {
  8.             let c = dynamicFields[i];
  9.             c.style.display = 'none';
  10.         }
  11.         visible.style.display = 'block';
  12.     })
  13. }
[JAVASCRIPT] pobierz, plaintext




EDIT: Przed chwilą skrypt wyświetlający DIV na bazie opcji z SELECT trzy razy z rzędu mi w ogóle nie zadziałał, a w konsoli czyściutko sad.gif Nie wiem, może to jakiś błąd przeglądarki. Używam Chrome 108.0.5359.125.
Właśnie zaktualizowałem do 109.0.5414.75 .

Ten post edytował sadistic_son 11.01.2023, 10:08:09


--------------------
Uśpieni przez system, wychowani przez media,
Karmieni zmysłami, próżnymi żądzami...
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Jesteś zbyt leniwy, żeby się zarejestrować? Ja jestem zbyt leniwy aby Ci pomóc!
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Go to the top of the page
+Quote Post
nospor
post
Post #5





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004
Chodzilo o to, ze pobierasz pola, ktore moga jeszczxe nie istniec. Wiec masz swoje skrypty zaczac dopiero gdy DOM sie zaladuje.
By wiedziec czy DOM sie zaladowal sluzy window.load
https://developer.mozilla.org/en-US/docs/We...ndow/load_event


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer
Go to the top of the page
+Quote Post
trueblue
post
Post #6





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Cytat(nospor @ 11.01.2023, 10:26:27 ) *
By wiedziec czy DOM sie zaladowal sluzy window.load

Raczej DOMContentLoaded. Load mówi o załadowaniu DOM + wszelkich zasobów.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
sadistic_son
post
Post #7





Grupa: Zarejestrowani
Postów: 1 495
Pomógł: 245
Dołączył: 1.07.2009
Skąd: Bydgoszcz

Ostrzeżenie: (0%)
-----

Ok, zmodyfikowałem to tak i na razie po kilkunastu próbach nie wywalilo:
[JAVASCRIPT] pobierz, plaintext 
  1. function showDynamicFields() {
  2.     let selector = document.getElementById('productType');
  3.     const dynamicFields = document.getElementsByClassName('dynamicFields');
  4.  
  5.     if (selector && dynamicFields) {
  6.         selector.addEventListener("change", () => {
  7.             let visible = document.getElementById(selector.value);
  8.             for (var i = 0; i < dynamicFields.length; i++) {
  9.                 let c = dynamicFields[i];
  10.                 c.style.display = 'none';
  11.             }
  12.             visible.style.display = 'block';
  13.         })
  14.     }
  15. }
  16.  
  17. if (document.readyState === 'loading') {
  18.     document.addEventListener('DOMContentLoaded', showDynamicFields);
  19. } else {
  20.     showDynamicFields();
  21. }
[JAVASCRIPT] pobierz, plaintext


--------------------
Uśpieni przez system, wychowani przez media,
Karmieni zmysłami, próżnymi żądzami...
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Jesteś zbyt leniwy, żeby się zarejestrować? Ja jestem zbyt leniwy aby Ci pomóc!
-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 16:02
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn