Forum PHP.pl

Cześć,
Tak wygląda mój html:

[HTML] pobierz, plaintext 
<select id="productType" name="productType">
    <option value="" selected="selected"></option>
    <option value="Book">Book</option>
    <option value="DVD">DVD</option>
    <option value="Furniture">Furniture</option>
</select>
 
<div class="dynamicFields" id="Book">
    Weight (kg) <input type="text" name="weight" id="weight" />
    <div class="productDescription">Please provide the weight of book in kg.</div>
</div>
 
<div class="dynamicFields" id="DVD">
    Size (MB) <input type="text" name="size" id="size" />
    <div class="productDescription">Please provide size of DVD in MB.</div>
</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 class="productDescription">Please provide dimentions in WxHxL format.</div>
</div>
[HTML] pobierz, plaintext 

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 
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();
}
[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 
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();
}
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował sadistic_son 11.01.2023, 11:36:46