Javascript function in loop not working properly?

Question

i have some html code

<table class="layout" border="0" width="90%" align="center">

<form name="addcust" action="insrtCustomer.php" method="post" onsubmit="return validateall(this);">

    <td colspan="2">

    <table border="0" width="70%" align="center">

<tr>
    <td align="center" colspan="2">

    <div class="heading2">Infy Bank</div>

    </td>
</tr>

<tr>
    <td align="center" colspan="2"><p class="heading3">Add New Customer</p></td>

</tr>
<tr>
</tr>
<tr>
</tr>

<!--comments: To display customer name field-->

<tr>
    <td>Customer Name<span class="mandatory">*</span></td><td><input type="text" name="name" maxlength="25" onKeyUp="validatecustomername();" onBlur="validatecustomername();"><label id="message"></label></td>

</tr>

<!--comments: To display customer gender field-->

<tr>
    <td>Gender<span class="mandatory">*</span></td><td>
    <input type ="radio" name ="rad1" value="1" checked>male
    <input type ="radio" name ="rad1" value="1">female
    </td>
</tr>

<!--comments: To display customer date of birth field-->

<tr>
        <td>Date of Birth <span class="mandatory">*</span></td>
        <td> <select name ="day">
        <option value ="1">1</option>
        <option value ="2">2</option>
        <option value ="3">3</option>
        <option value ="4">4</option>
        <option value ="5">5</option>
        <option value ="6">6</option>
        <option value ="7">7</option>
        <option value ="8">8</option>
        <option value ="9">9</option>
        <option value ="10">10</option>
        <option value ="11">11</option>
        <option value ="12">12</option>
        <option value ="13">13</option>
        <option value ="14">14</option>
        <option value ="15">15</option>
        <option value ="16">16</option>
        <option value ="17">17</option>
        <option value ="18">18</option>
        <option value ="19">19</option>
        <option value ="20">20</option>
        <option value ="21">21</option>
        <option value ="22">22</option>
        <option value ="23">23</option>
        <option value ="24">24</option>
        <option value ="25">25</option>
        <option value ="26">26</option>
        <option value ="27">27</option>
        <option value ="28">28</option>
        <option value ="29">29</option>
        <option value ="30">30</option>
        <option value ="31">31</option>
        </select>
        <select name ="month">
        <option value ="1">JAN</option>
        <option value ="2">FEB</option>
        <option value ="3">MAR</option>
        <option value ="4">APR</option>
        <option value ="5">MAY</option>
        <option value ="6">JUN</option>
        <option value ="7">JUL</option>
        <option value ="8">AUG</option>
        <option value ="9">SEP</option>
        <option value ="10">OCT</option>
        <option value ="11">NOV</option>
        <option value ="12">DEC</option>
        </select>
        <select name ="year">
        <option value ="1950">1950</option>
                <option value ="1951">1951</option>
                <option value ="1952">1952</option>
                <option value ="1953">1953</option>
                <option value ="1954">1954</option>
                <option value ="1955">1955</option>
                <option value ="1956">1956</option>
                <option value ="1957">1957</option>
                <option value ="1958">1958</option>
                <option value ="1959">1959</option>
                <option value ="1960">1960</option>
                <option value ="1961">1961</option>
                <option value ="1962">1962</option>
                <option value ="1963">1963</option>
                <option value ="1964">1964</option>
                <option value ="1965">1965</option>
                <option value ="1966">1966</option>
                <option value ="1967">1967</option>
                <option value ="1968">1968</option>
                <option value ="1969">1969</option>
                <option value ="1970">1970</option>
                <option value ="1971">1971</option>
                <option value ="1972">1972</option>
                <option value ="1973">1973</option>
                <option value ="1974">1974</option>
                <option value ="1975">1975</option>
                <option value ="1976">1976</option>
                <option value ="1977">1977</option>
                <option value ="1978">1978</option>
        <option value ="1979">1979</option>
        <option value ="1980">1980</option>
        <option value ="1981">1981</option>
        <option value ="1982">1982</option>
        <option value ="1983">1983</option>
        <option value ="1984">1984</option>
        <option value ="1985">1985</option>
        <option value ="1986">1986</option>
        <option value ="1987">1987</option>
        <option value ="1988">1988</option>
        <option value ="1989">1989</option>
        <option value ="1990">1990</option>
        </select>
        </td>
</tr>

<!--comments: To display customer address field-->

<tr>
    <td>Address<span class="mandatory">*</span></td>
    <td>
        <textarea rows="5" cols="20" name="addr" maxlength="50"></textarea>
    </td>
</tr>

<tr>
    <td>City<span class="mandatory">*</span></td><td><input type="text" name="city" maxlength="25" onKeyUp="validateCity();" onBlur="validateCity();"><label id="message4"></label></td>

</tr>

<tr>
    <td>State<span class="mandatory">*</span></td><td><input type="text" name="state" maxlength="25" onKeyUp="validateState();" onBlur="validateState();"><label id="message5"></label></td>

</tr>

<tr>
    <td>PIN<span class="mandatory">*</span></td><td><input type="text" name="pinno" maxlength="6" onKeyUp="validatePIN();" onBlur="validatePIN();"><label id="message6"></label></td>
</tr>

<!--comments: To display customer telephone number field-->

<tr>
    <td>Telephone Number<span></span></td><td><input type="text" name="telephoneno" maxlength="15" onKeyUp="validateTelephone();" onBlur="validateTelephone();"><label id="message7"></label></td>
</tr>

<!--comments: To display customer email id field-->

<tr>
    <td>E-mail<span class="mandatory">*</span></td><td><input type="text" name="emailid" maxlength="30" onKeyUp="validateEmail();" onBlur="validateEmail();"><label id="message9"></label></td>
</tr>

<tr>
    <td>User Id<span class="mandatory">*</span></td><td><input type="text" name="uid" maxlength="30" onKeyUp="validateuserid();" onBlur="validateuserid();"><label id="message23"></label></td>
</tr>

<!--comments: To display submit and reset buttons-->
<tr>
        <td><span class="mandatory">*<font size="3"><b> mandatory fields</b></font></span></td>
        <td><input type="submit" value="Submit" name="sub"/>
        <input type ="reset" value ="Reset" name ="res"></td>
</tr>

</form>

</table>

i have write a code in javascript function for all fields. If all fields are empty then i have do alert for that. but all time that alert is appear.

Here is the javascript code

function validateall(dis)
{
 var lbl=document.getElementsByTagName('label');
 var imax=7;
 for(var i=0;i<=imax;i++)
 {
  //var j=i-1;
  var v=lbl[i].getAttribute("id");
  var x=document.getElementById(v).style.visibility;
  if(x=="hidden" && i==lbl.length)
  {
   return true;
  }
  else{
   alert("please fill * fields");
   return false;
  }
 }
}

here please check my javacript code and giver me suggestions where i am wrong.

if all fields are empty then also alert is appear. please help.

what do you mean by this - but all time that alert is appear. — Voonic
– Voonic, Commented Oct 29, 2013 at 5:56
If the for loops ends you can say if i < imax then also loop continously displays the result. — Sanjay Rathod
– Sanjay Rathod, Commented Oct 29, 2013 at 5:58
Why do you need to get the ID attribute? You have the element in lbl[i], you don't need to look it up by ID. — Barmar
– Barmar, Commented Oct 29, 2013 at 6:01
Where in your Javascript do you check whether fields are empty? — Barmar
– Barmar, Commented Oct 29, 2013 at 6:02
you always return on the first run of the loop, so you never even check the other elements — Eevee
– Eevee, Commented Oct 29, 2013 at 6:28

me_digvijay · Accepted Answer · 2013-10-29 06:20:16Z

1

The problem is the

x=="hidden" condition.

The

var x = document.getElementById(v).style.visibility;

always returns x to "" because you have not set the visibility of labels to hidden.

So the if (x == "hidden" && i == lbl.length) condition fails and always goes to the else block.

edited Oct 29, 2013 at 6:20

answered Oct 29, 2013 at 6:15

me_digvijay

5,53210 gold badges51 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

me_digvijay Over a year ago

It would be nice if somebody can tell the reason of downvoting.

Sanjay Rathod Over a year ago

ya you r right that by default x=null.but we have set this to hidden you can check here all my code in jsfiddle - jsfiddle.net/VLkEv

Collectives™ on Stack Overflow

Javascript function in loop not working properly?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related