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="JavaScript" type="text/javascript">
function checkfields(f1)
{
var inputs = f1.getElementsByTagName("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="JavaScript" type="text/javascript">
function checkfields(f1)
{
var inputs = f1.getElementsByTagName("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

[gits]

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

don't hesitate to post your question ... ;) i think you want to check form-entries as required and/or required with references to other entries? the following possibilities occur:

1. a field is simply required (you have to enter a value in field A)
2. a field is required dependent on the input within an other field (entry in field A requires entry in field B)
3. a field is required but not any longer required dependent on an entry within an other field (you have to enter a value in field B but not when A is filled already)

... did i forget something?

kind regards ...

[ankitmathur]

Hi Gits,

First of all apologies for writing that the code provided by Neela won't work if the form values are not together.

The code ofcourse won't work as it is. We would just be required to change 'i+__' value to the field we are interested with in IF Condition.

As for the conditions you wrote about.
Your first condition "a field is required" ... this can be done easily with the code I have posted above already.

However, the second condition is what needs to be looked upon.

I tried out a few things on the basis of our existing JS function but nothing worked out.

But I believe we should be creating a new thread for this new scenario as this would get more inputs from fellow members plus would help others searching for this solution in future.

What do you think ?

Ankit Mathur

don't hesitate to post your question ... ;) i think you want to check form-entries as required and/or required with references to other entries? the following possibilities occur:

1. a field is simply required (you have to enter a value in field A)
2. a field is required dependent on the input within an other field (entry in field A requires entry in field B)
3. a field is required but not any longer required dependent on an entry within an other field (you have to enter a value in field B but not when A is filled already)

... did i forget something?

kind regards ...

[gits]

Hi Gits,

First of all apologies for writing that the code provided by Neela won't work if the form values are not together.

The code ofcourse won't work as it is. We would just be required to change 'i+__' value to the field we are interested with in IF Condition.

As for the conditions you wrote about.
Your first condition "a field is required" ... this can be done easily with the code I have posted above already.

However, the second condition is what needs to be looked upon.

I tried out a few things on the basis of our existing JS function but nothing worked out.

But I believe we should be creating a new thread for this new scenario as this would get more inputs from fellow members plus would help others searching for this solution in future.

What do you think ?

Ankit Mathur

hi ... of course ... you may always adapt the condition to make it work ... that is the simple solution, but it is not the best because you have to do that every time you change your form-layout, and what to do in case of having more blocks where the layout differs? you may pass a variable to the check-function where this var is used to adapt the condition dynamically ... or we find a solution that works generally ... i've got one nearly ready in mind ... and i'm able to post it this evening (i'm at the office right now ;) ) ...

[gits]

have a look at the following example ... may be that meets all of your requirements:

<html>
    <head>
        <title>How to check Inputfields generally</title>
        <script type="text/javascript" src="check_form.js"></script>
    </head>
    <body>
        <form action="" id="form_to_check">
            <input type="text" id="in1" name="in1" class="in2_in3:exclude"/>
            <span>in1 - in2_in3:exclude</span>
            </br>
            <input type="text" id="in11" name="in11"/>
            <span>in11</span>
            </br>
            <input type="text" id="in2" name="in2" class="in1_in3:exclude"/>
            <span>in2 - in1_in3:exclude</span>
            </br>
            <input type="text" id="in3" name="in3" class="in1_in2:exclude"/>
            <span>in3 - in1_in2:exclude</span>
            </br>
            <input type="text" id="in4" name="in3" class="in6:complements"/>
            <span>in4 - in6:complements</span>
            </br>
            <input type="text" id="in41" name="in41"/>
            <span>in41</span>
            </br>
            <input type="text" id="in5" name="in5" class="required"/>
            <span>in5 - required</span>
            </br>
            <input type="text" id="in6" name="in6"/>
            <span>in6</span>
            </br>
            <input type="button" value="click" onclick="
                var check = new CHECK_FORM(document);
                check.validate();
            "/>
        </form>
        <div id="output">
        </div>
    </body>
</html>
 

and the corresponding js-file:

function CHECK_FORM(docroot) {
    this.fields = {};
    this.check  = {};
 
    this.get_form_content(docroot);
}
 
CHECK_FORM.prototype.get_form_content = function(docroot) {
    var form   = docroot.getElementById('form_to_check');
    var fields = form.getElementsByTagName('input');
 
    for (var i in fields) {
        var field = fields[i];
        var class = field.className;
        var val   = /:/.test(class);
 
        var re_coids = /^(.+):/;
        var re_split = /([A-Z, a-z, 0-9]+)/g;
        var re_rule  = /:(.+)/;
 
        if (field.type == 'text') {
            this.fields[field.id] = {
                id   : field.id,
                value: field.value,
                class: class,
                coid : val ? class.match(re_coids)[1].match(re_split) : [],
                rule : val ? field.className.match(re_rule)[1] : class
            };        
        }
    }
}
 
CHECK_FORM.prototype.validate = function() {
    for (var i in this.fields) {
        var field = this.fields[i];
 
        switch (field.rule) {
        case 'exclude':
            this._handle_excludes(field);
            break;
        case 'complements':
            this._handle_complements(field);
            break;
        case 'required':
            this._handle_requireds(field);
            break;
        }
    }
 
    var val = true;
 
    for (i in this.check) {
        if (this.check[i] == '') {
            val = false;
            break;
        }
    }   
 
    // for demo-purposes we call a output-function
    this._display_check(val);
 
    return val;
}
 
CHECK_FORM.prototype._display_check = function(val) {
    var output = document.getElementById('output');
    output.innerHTML = '';
 
    for (i in this.check) {
        output.innerHTML += i + ' = ' + this.check[i] + '</br>';
    }
 
    output.innerHTML += '</br>' + 'check is ' + val;
}
 
CHECK_FORM.prototype._handle_excludes = function(field) {
    for (var i in field.coid) {
        if (field.coid[i] in this.check && field.value != '') {
            delete this.check[field.coid[i]];
 
            this.fields[field.coid[i]].rule = '';
        }
    }
 
    this.check[field.id] = field.value;
 
    for (i in field.coid) {
        if (field.coid[i] in this.check && 
                this.check[field.coid[i]].value != '') {
            delete this.check[field.id];
        }
    }
}
 
CHECK_FORM.prototype._handle_requireds = function(field) {
    this.check[field.id] = field.value;
}
 
CHECK_FORM.prototype._handle_complements = function(field) {
    if (field.value != '') {
        this.check[field.id] = field.value;
    }
 
    for (var i in field.coid) {
        if (field.value != '') {
            this.check[field.coid[i]] = this.fields[field.coid[i]].value;
        }
    }
}
 

kind regards ...

[gits]

... hey ;) was late last evening ... please correct all <br/> - tags in the above code ... copy&paste is evil!!!

kind regards ...