Cześć,
Tak wygląda mój html:
  1. <select id="productType" name="productType">
  2. <option value="" selected="selected"></option>
  3. <option value="Book">Book</option>
  4. <option value="DVD">DVD</option>
  5. <option value="Furniture">Furniture</option>
  6.  
  7. <div class="dynamicFields" id="Book">
  8. Weight (kg) <input type="text" name="weight" id="weight" />
  9. <div class="productDescription">Please provide the weight of book in kg.</div>
  10. </div>
  11.  
  12. <div class="dynamicFields" id="DVD">
  13. Size (MB) <input type="text" name="size" id="size" />
  14. <div class="productDescription">Please provide size of DVD in MB.</div>
  15. </div>
  16.  
  17. <div class="dynamicFields" id="Furniture">
  18. Width (cm) <input type="text" name="width" id="width" />
  19. Height (cm) <input type="text" name="height" id="height" />
  20. Length (cm) <input type="text" name="length" id="length" />
  21.  
  22. <div class="productDescription">Please provide dimentions in WxHxL format.</div>
  23. </div>

Chcę zmodyfikować poniższy skrypt aby reagował również na niewypełnienie pól z inputów, z DIVa o ID wybranym w SELECT. Dla przykładu - w SELECT mam wybraną opcję DVD, to skrypt ma reagować że input o id 'size' jest pusty. Jak wybiorę 'Furniture' w SELECT to ma wychwycić, że inputy o id 'width', 'length' oraz 'height' są puste.
Wymyśliłem, że muszę się dobrać do elementów wewnątrz DIVa o id wybranego w SELECT. Tak więc sprzawdzam w pętli czy childeren.value nie jest puste. Ale niestety coś nie działa zgodnie z załeżeniem, bo w ogóle nie dzieje się return false;

[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. let selector = document.getElementById('productType');
  9. let visibleDiv = document.getElementById(selector.value);
  10.  
  11. let i = 0;
  12. const inputs = visibleDiv.children;
  13. for (let j = 0; j < inputs.length; j++) {
  14. if (inputs[i].value == "") {
  15. i++;
  16. }
  17. }
  18.  
  19. if (sku == "" || name == "" || price == "" || productType == "" || i > 0) {
  20. let ele = document.getElementById('alertMessage');
  21. ele.innerHTML += 'Please, submit required data.';
  22. return false;
  23. }
  24.  
  25. document.getElementById("product_form").submit();
  26. }
[JAVASCRIPT] pobierz, plaintext
Kiedy pozbędę się lnijek 11-17 to skrypt działa, tzn oczywiście bez sprawdzania czy są wypełnione te pola wewnątrz DIVa o ID wybranym w SELECT. A przecież wewnątrz pętli zwiększam 'i' jeśli childeren input jest pusty a następnie sprawdzam czy to i>0. Tak więc dlaczego ma drugi warunek niby nie zadziałać?

EDIT: Terazm tak sobie myślę, że value z dzieci DIVa o ID wybranym w SELECT będzie puste przy ostatnim powtórzeniu pętli, bo jego dzieckiem jest też DIV class="productDescription" a on przecież wartości nie ma.... dobrze rozumuje? No ale to wtedy zmienna i będzie zawsze większa od 0, więc tym bardziej dolny warunek powinien się wypełnić.

EDIT2:
Problem rozwiązany. zostawiam dla potomnych...
[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. let j = 0;
  9. if (productType != "") {
  10. let selector = document.getElementById('productType');
  11. let visibleDiv = document.getElementById(selector.value);
  12.  
  13. let inputs = visibleDiv.querySelectorAll("input");
  14.  
  15. for (let i = 0; i < inputs.length; i++) {
  16. if (inputs[i].value == "") {
  17. console.log('coś tam ');
  18. j++;
  19. }
  20. }
  21. }
  22.  
  23. if (sku == "" || name == "" || price == "" || productType == "" || j > 0) {
  24. let ele = document.getElementById('alertMessage');
  25. ele.innerHTML += 'Please, submit required data.';
  26. return false;
  27. }
  28.  
  29. document.getElementById("product_form").submit();
  30. }
[JAVASCRIPT] pobierz, plaintext