Tak wygląda mój html:
<select id="productType" name="productType"> </select> <div class="dynamicFields" id="Book"> Weight (kg) <input type="text" name="weight" id="weight" /> </div> <div class="dynamicFields" id="DVD"> Size (MB) <input type="text" name="size" id="size" /> </div> <div class="dynamicFields" id="Furniture"> Width (cm) <input type="text" name="width" id="width" /> Height (cm) <input type="text" name="height" id="height" /> Length (cm) <input type="text" name="length" id="length" /> </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;
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ć?
function validateForm() { document.getElementById("alertMessage").innerHTML = ""; var sku = document.forms["product_form"]["sku"].value; var name = document.forms["product_form"]["name"].value; var price = document.forms["product_form"]["price"].value; var productType = document.forms["product_form"]["productType"].value; let selector = document.getElementById('productType'); let visibleDiv = document.getElementById(selector.value); let i = 0; const inputs = visibleDiv.children; for (let j = 0; j < inputs.length; j++) { if (inputs[i].value == "") { i++; } } if (sku == "" || name == "" || price == "" || productType == "" || i > 0) { let ele = document.getElementById('alertMessage'); ele.innerHTML += 'Please, submit required data.'; return false; } document.getElementById("product_form").submit(); }
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...
function validateForm() { document.getElementById("alertMessage").innerHTML = ""; var sku = document.forms["product_form"]["sku"].value; var name = document.forms["product_form"]["name"].value; var price = document.forms["product_form"]["price"].value; var productType = document.forms["product_form"]["productType"].value; let j = 0; if (productType != "") { let selector = document.getElementById('productType'); let visibleDiv = document.getElementById(selector.value); let inputs = visibleDiv.querySelectorAll("input"); for (let i = 0; i < inputs.length; i++) { if (inputs[i].value == "") { console.log('coś tam '); j++; } } } if (sku == "" || name == "" || price == "" || productType == "" || j > 0) { let ele = document.getElementById('alertMessage'); ele.innerHTML += 'Please, submit required data.'; return false; } document.getElementById("product_form").submit(); }