Script to check n number of values in n number of rows

[ankitmathur]

Hi,

I'm facing a pretty peculiar problem.

In one of my pages I print the number of rows depending upon the number of Qty I got filled in my previous page i.e. If Qty is filled in as 3 in previous page 3 rows would be printed on my current page or, if 5 being entered in the previous page 5 rows would get printed in my current page & so on.

Now the problem is, I want to check whether the required fields in each row has been filled or, not. If not ONSUBMIT the page should display an alert msg stating the specified field has to be filled.

 
function checkfields(f1) 
{ 
   i = 0 
   while (i <= <?php echo $Qty; ?>) 
   { 
        if(f1.inventory+i.value==0) 
        { 
                alert("Please enter the Inventory Item"); 
                f1.inventory+i.focus(); 
                return false; 
        } 
   } 
} 
</script>
 

This is the Javascript function I tried using but after certain time I get an alert stating The script is taking too long. Continuing this script may make the system unresponsive... ...The problem remains same both with IE7 & Firefox v2.0.0.3. I'm using this javascript function in a PHP page.

I guess this is because of this line "f1.inventory+i .value==0" i.e. its not filling in "inventory+ i" as inventory1, inventory2, inventory3 & so on.

Kindly help me with a function that could help me check my n number of rows for n number of fields.

[gits]

hi,

in javascript you cannot use the '.' reference that way - try to refer with:

f1['inventory' + i].value

instead. this should work for your purpose until i is the only variable that you want to add to your stringobject 'inventory'? otherwise we need more information about the 'datastructure' you want to check.

greetings ... hope this helps ;)

[gits]

and wait a moment ;)

the solution above is of course not very slick have a look at the following example:

var foo = {
    bar: 1,
    bar1: 5,
    bar2: 9
};
 
// running through the objects-properties
 
for (var i in foo) {
    alert(foo[i]);
}

that gives you the values of all of foos properties ... an is the easier (perhaps the common) way to refer to an objects properties. try to adopt that to your purpose ;)

grettings again

[ankitmathur]

Hi,

Thanks for your inputs.

Am so sorry I couldn't reply earlier to your post.

Well....to update you on the latest on this problem I was able to solve one issue of checking all blank textboxes on my page.

While working on the same module a new condition has arise which is again giving me some headache.

Of the whole form two of my fields are as such that my form may get submitted even if any one of them is empty. However, if both the fields are empty my function should return back an alert stating "Any one of the two fields have to be filled".

<script language="JavaScript" type="text/javascript">
function checkfields(f1)
{
  var inputs = f1.getElementsByTagName("input");
  for(var i=0; i < inputs.length; i++)
  {
      if(inputs[i].type == "text" && inputs[i].className == 'required')
      {
          if(inputs[i].value=='')
          {
                  alert("Please enter the Inventory Item");
                  inputs[i].focus();
                  return false;
          }
      }
  }
}
</script>
 

This particular function is working perfectly fine but it checks for all fields to be filled in. My new condition requires it to OK page if any of the two fields are filled.

My input tags look like this

<form name="f1" method="GET" action="invsql.php" onsubmit="return checkfields(this)">
 ....
    <td><input type="text" class="required" name="MAC<? echo $i; ?>" Id="MAC"  /></td>
    <td><input type="text" class="required" name="SerialNo<? echo $i; ?>" Id="SerialNo" /></td>
....
</form>
 

This is one of the things I tried

<script language="JavaScript" type="text/javascript">
function checkfields(f1)
{
  var inputs = f1.getElementsByTagName("input");
  for(var i=0; i < inputs.length; i++)
  {
      if(inputs[i].type == "text" && inputs[i].className == 'required')
      {
          if(document.getElementById('MAC').value=='' && document.getElementById('SerialNo').value=='')
          {
                  alert("Please enter the Inventory Item");
                  inputs[i].focus();
                  return false;
          }
      }
  }
}
</script>
 

However, contrary to my expectation that it'll check each row & hence would check MAC & SerialNo in each row by its Id it just checks for validation in first row & moves ahead even if rest all MAC & SerialNos remain empty.

As again .. I'm working on Php with Mysql & problem is valid for Both IE & FireFox.

I think the problem is I'm not able to somehow make it check each row at a time though being in a loop it should be doing that.

I would appreciate if anybody could help.

[leela mn]

chk the modified code...
let me know if it solves u r problem.......

<script language="JavaS cript" type="text/javascript">
function checkfields(f1)
{
var inputs = f1.getElementsB yTagName("input ");
for(var i=0; i < inputs.length; i= i+2)
{
if(inputs[i].type == "text" && inputs[i].className == 'required' && inputs[i+1].type == "text" && inputs[i+1].className == 'required')
{
if(inputs[i].value=='' && inputs[i+1] value == "")
{
alert("Please enter any one value");
inputs[i].focus();
return false;
}
}
}
}
</script>

[ankitmathur]

Hi Leela,

Thanks for contributing.
I just tried out your code and It worked like a charm.

Its working absolutely as I needed.

Thanks a lot.....

It's been a very long standing problem which got resolved just now.

All Thanks to you.

However, I need one more favour from you.

Can you guide me through your code. What exactly is happening at what line. This is just to gain some crucial information on where I was failing & what I could do in certain similar situations in future.

Thanks again for solving my problem....
Ankit Mathur

chk the modified code...
let me know if it solves u r problem.......

<script language="JavaS cript" type="text/javascript">
function checkfields(f1)
{
var inputs = f1.getElementsB yTagName("input ");
for(var i=0; i < inputs.length; i= i+2)
{
if(inputs[i].type == "text" && inputs[i].className == 'required' && inputs[i+1].type == "text" && inputs[i+1].className == 'required')
{
if(inputs[i].value=='' && inputs[i+1].value == "")
{
alert("Please enter any one value");
inputs[i].focus();
return false;
}
}
}
}
</script>

[leela mn]

hey thanks for u r appreciation :)
go through ths......

<script language="JavaScript" type="text/javascript">
function checkfields(f1)
{
//retrieves all the elemts whose tagname ia INPUT
var inputs = f1.getElementsByTagName("input");
//loop through the elements incrementing two at one timw
for(var i=0; i < inputs.length; i= i+2)
{
//compare the first element i.e., (i)th element with the (i+1)th element
if(inputs[i].type == "text" && inputs[i].className == 'required' && inputs[i+1].type == "text" && inputs[i+1].className == 'required')
{
//if both the values are null
if(inputs[i].value=='' && inputs[i+1] value == "")
{
//display the error msg
alert("Please enter any one value");
inputs[i].focus();
//stop the processing and return
return false;
}
}
}
}
 

[ankitmathur]

Hi Leela,

Thanks for explaning the function. However, I have one more doubt.

Why did u used i+2 in for loop?

Ankit

hey thanks for u r appreciation :)
go through ths......

<script language="JavaScript" type="text/javascript">
function checkfields(f1)
{
//retrieves all the elemts whose tagname ia INPUT
var inputs = f1.getElementsByTagName("input");
//loop through the elements incrementing two at one timw
for(var i=0; i < inputs.length; i= i+2)
{
//compare the first element i.e., (i)th element with the (i+1)th element
if(inputs[i].type == "text" && inputs[i].className == 'required' && inputs[i+1].type == "text" && inputs[i+1].className == 'required')
{
//if both the values are null
if(inputs[i].value=='' && inputs[i+1] value == "")
{
//display the error msg
alert("Please enter any one value");
inputs[i].focus();
//stop the processing and return
return false;
}
}
}
}
 

[gits]

hi ... cool ... you've got your problems solved with this ... your last question was about the i+2 incrementation ... and i think this is used due to the fact ... that within the loop always 2 input-elements will be compared ... and thats a drawback of this solution ... you MUST have 2 'required' textboxes right as neighbors (and you have to know implicitly, that they may be 'complementary' ) ... in the case of putting one 'unrequired' input-element between them the check will fail ... so you have to know your dom-structure and to use this check you have to have that in mind while constructing your forms ... with that it will do the job well :)

if you need a more generic check perhaps due to a more flexible form-design you have to adapt that code ... if you need that ... post a question here

[ankitmathur]

Hi Gits,

Thanks for explaining. Now I have understood the code well.

You're right, I tried inserting a new input that wasn't "class=required " in between my required input boxes & the check got into some sort of trouble.

Seems like we still have a problem to discuss further.

Ankit

hi ... cool ... you've got your problems solved with this ... your last question was about the i+2 incrementation ... and i think this is used due to the fact ... that within the loop always 2 input-elements will be compared ... and thats a drawback of this solution ... you MUST have 2 'required' textboxes right as neighbors (and you have to know implicitly, that they may be 'complementary' ) ... in the case of putting one 'unrequired' input-element between them the check will fail ... so you have to know your dom-structure and to use this check you have to have that in mind while constructing your forms ... with that it will do the job well :)

if you need a more generic check perhaps due to a more flexible form-design you have to adapt that code ... if you need that ... post a question here