469,315 Members | 1,571 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,315 developers. It's quick & easy.

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

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.

Expand|Select|Wrap|Line Numbers
  1.  
  2. function checkfields(f1) 
  3.    i = 0 
  4.    while (i <= <?php echo $Qty; ?>) 
  5.    { 
  6.         if(f1.inventory+i.value==0) 
  7.         { 
  8.                 alert("Please enter the Inventory Item"); 
  9.                 f1.inventory+i.focus(); 
  10.                 return false; 
  11.         } 
  12.    } 
  13. </script>
  14.  
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.
May 10 '07 #1
14 1702
gits
5,390 Expert Mod 4TB
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 ;)
May 10 '07 #2
gits
5,390 Expert Mod 4TB
and wait a moment ;)

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

Expand|Select|Wrap|Line Numbers
  1. var foo = {
  2.     bar: 1,
  3.     bar1: 5,
  4.     bar2: 9
  5. };
  6.  
  7. // running through the objects-properties
  8.  
  9. for (var i in foo) {
  10.     alert(foo[i]);
  11. }
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
May 10 '07 #3
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".

Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript" type="text/javascript">
  2. function checkfields(f1)
  3. {
  4.   var inputs = f1.getElementsByTagName("input");
  5.   for(var i=0; i < inputs.length; i++)
  6.   {
  7.       if(inputs[i].type == "text" && inputs[i].className == 'required')
  8.       {
  9.           if(inputs[i].value=='')
  10.           {
  11.                   alert("Please enter the Inventory Item");
  12.                   inputs[i].focus();
  13.                   return false;
  14.           }
  15.       }
  16.   }
  17. }
  18. </script>
  19.  
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

Expand|Select|Wrap|Line Numbers
  1. <form name="f1" method="GET" action="invsql.php" onsubmit="return checkfields(this)">
  2.  ....
  3.     <td><input type="text" class="required" name="MAC<? echo $i; ?>" Id="MAC"  /></td>
  4.     <td><input type="text" class="required" name="SerialNo<? echo $i; ?>" Id="SerialNo" /></td>
  5. ....
  6. </form>
  7.  
This is one of the things I tried

Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript" type="text/javascript">
  2. function checkfields(f1)
  3. {
  4.   var inputs = f1.getElementsByTagName("input");
  5.   for(var i=0; i < inputs.length; i++)
  6.   {
  7.       if(inputs[i].type == "text" && inputs[i].className == 'required')
  8.       {
  9.           if(document.getElementById('MAC').value=='' && document.getElementById('SerialNo').value=='')
  10.           {
  11.                   alert("Please enter the Inventory Item");
  12.                   inputs[i].focus();
  13.                   return false;
  14.           }
  15.       }
  16.   }
  17. }
  18. </script>
  19.  
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.
May 17 '07 #4
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>
May 17 '07 #5
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>
May 18 '07 #6
hey thanks for u r appreciation :)
go through ths......
Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript" type="text/javascript">
  2. function checkfields(f1)
  3. {
  4. //retrieves all the elemts whose tagname ia INPUT
  5. var inputs = f1.getElementsByTagName("input");
  6. //loop through the elements incrementing two at one timw
  7. for(var i=0; i < inputs.length; i= i+2)
  8. {
  9. //compare the first element i.e., (i)th element with the (i+1)th element
  10. if(inputs[i].type == "text" && inputs[i].className == 'required' && inputs[i+1].type == "text" && inputs[i+1].className == 'required')
  11. {
  12. //if both the values are null
  13. if(inputs[i].value=='' && inputs[i+1] value == "")
  14. {
  15. //display the error msg
  16. alert("Please enter any one value");
  17. inputs[i].focus();
  18. //stop the processing and return
  19. return false;
  20. }
  21. }
  22. }
  23. }
  24.  
May 18 '07 #7
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......
Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript" type="text/javascript">
  2. function checkfields(f1)
  3. {
  4. //retrieves all the elemts whose tagname ia INPUT
  5. var inputs = f1.getElementsByTagName("input");
  6. //loop through the elements incrementing two at one timw
  7. for(var i=0; i < inputs.length; i= i+2)
  8. {
  9. //compare the first element i.e., (i)th element with the (i+1)th element
  10. if(inputs[i].type == "text" && inputs[i].className == 'required' && inputs[i+1].type == "text" && inputs[i+1].className == 'required')
  11. {
  12. //if both the values are null
  13. if(inputs[i].value=='' && inputs[i+1] value == "")
  14. {
  15. //display the error msg
  16. alert("Please enter any one value");
  17. inputs[i].focus();
  18. //stop the processing and return
  19. return false;
  20. }
  21. }
  22. }
  23. }
  24.  
May 19 '07 #8
gits
5,390 Expert Mod 4TB
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
May 20 '07 #9
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
May 22 '07 #10
gits
5,390 Expert Mod 4TB
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 ...
May 23 '07 #11
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 ...
May 24 '07 #12
gits
5,390 Expert Mod 4TB
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 ;) ) ...
May 24 '07 #13
gits
5,390 Expert Mod 4TB
have a look at the following example ... may be that meets all of your requirements:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <title>How to check Inputfields generally</title>
  4.         <script type="text/javascript" src="check_form.js"></script>
  5.     </head>
  6.     <body>
  7.         <form action="" id="form_to_check">
  8.             <input type="text" id="in1" name="in1" class="in2_in3:exclude"/>
  9.             <span>in1 - in2_in3:exclude</span>
  10.             </br>
  11.             <input type="text" id="in11" name="in11"/>
  12.             <span>in11</span>
  13.             </br>
  14.             <input type="text" id="in2" name="in2" class="in1_in3:exclude"/>
  15.             <span>in2 - in1_in3:exclude</span>
  16.             </br>
  17.             <input type="text" id="in3" name="in3" class="in1_in2:exclude"/>
  18.             <span>in3 - in1_in2:exclude</span>
  19.             </br>
  20.             <input type="text" id="in4" name="in3" class="in6:complements"/>
  21.             <span>in4 - in6:complements</span>
  22.             </br>
  23.             <input type="text" id="in41" name="in41"/>
  24.             <span>in41</span>
  25.             </br>
  26.             <input type="text" id="in5" name="in5" class="required"/>
  27.             <span>in5 - required</span>
  28.             </br>
  29.             <input type="text" id="in6" name="in6"/>
  30.             <span>in6</span>
  31.             </br>
  32.             <input type="button" value="click" onclick="
  33.                 var check = new CHECK_FORM(document);
  34.                 check.validate();
  35.             "/>
  36.         </form>
  37.         <div id="output">
  38.         </div>
  39.     </body>
  40. </html>
  41.  
and the corresponding js-file:

Expand|Select|Wrap|Line Numbers
  1. function CHECK_FORM(docroot) {
  2.     this.fields = {};
  3.     this.check  = {};
  4.  
  5.     this.get_form_content(docroot);
  6. }
  7.  
  8. CHECK_FORM.prototype.get_form_content = function(docroot) {
  9.     var form   = docroot.getElementById('form_to_check');
  10.     var fields = form.getElementsByTagName('input');
  11.  
  12.     for (var i in fields) {
  13.         var field = fields[i];
  14.         var class = field.className;
  15.         var val   = /:/.test(class);
  16.  
  17.         var re_coids = /^(.+):/;
  18.         var re_split = /([A-Z, a-z, 0-9]+)/g;
  19.         var re_rule  = /:(.+)/;
  20.  
  21.         if (field.type == 'text') {
  22.             this.fields[field.id] = {
  23.                 id   : field.id,
  24.                 value: field.value,
  25.                 class: class,
  26.                 coid : val ? class.match(re_coids)[1].match(re_split) : [],
  27.                 rule : val ? field.className.match(re_rule)[1] : class
  28.             };        
  29.         }
  30.     }
  31. }
  32.  
  33. CHECK_FORM.prototype.validate = function() {
  34.     for (var i in this.fields) {
  35.         var field = this.fields[i];
  36.  
  37.         switch (field.rule) {
  38.         case 'exclude':
  39.             this._handle_excludes(field);
  40.             break;
  41.         case 'complements':
  42.             this._handle_complements(field);
  43.             break;
  44.         case 'required':
  45.             this._handle_requireds(field);
  46.             break;
  47.         }
  48.     }
  49.  
  50.     var val = true;
  51.  
  52.     for (i in this.check) {
  53.         if (this.check[i] == '') {
  54.             val = false;
  55.             break;
  56.         }
  57.     }   
  58.  
  59.     // for demo-purposes we call a output-function
  60.     this._display_check(val);
  61.  
  62.     return val;
  63. }
  64.  
  65. CHECK_FORM.prototype._display_check = function(val) {
  66.     var output = document.getElementById('output');
  67.     output.innerHTML = '';
  68.  
  69.     for (i in this.check) {
  70.         output.innerHTML += i + ' = ' + this.check[i] + '</br>';
  71.     }
  72.  
  73.     output.innerHTML += '</br>' + 'check is ' + val;
  74. }
  75.  
  76. CHECK_FORM.prototype._handle_excludes = function(field) {
  77.     for (var i in field.coid) {
  78.         if (field.coid[i] in this.check && field.value != '') {
  79.             delete this.check[field.coid[i]];
  80.  
  81.             this.fields[field.coid[i]].rule = '';
  82.         }
  83.     }
  84.  
  85.     this.check[field.id] = field.value;
  86.  
  87.     for (i in field.coid) {
  88.         if (field.coid[i] in this.check && 
  89.                 this.check[field.coid[i]].value != '') {
  90.             delete this.check[field.id];
  91.         }
  92.     }
  93. }
  94.  
  95. CHECK_FORM.prototype._handle_requireds = function(field) {
  96.     this.check[field.id] = field.value;
  97. }
  98.  
  99. CHECK_FORM.prototype._handle_complements = function(field) {
  100.     if (field.value != '') {
  101.         this.check[field.id] = field.value;
  102.     }
  103.  
  104.     for (var i in field.coid) {
  105.         if (field.value != '') {
  106.             this.check[field.coid[i]] = this.fields[field.coid[i]].value;
  107.         }
  108.     }
  109. }
  110.  
kind regards ...
May 24 '07 #14
gits
5,390 Expert Mod 4TB
... hey ;) was late last evening ... please correct all <br/> - tags in the above code ... copy&paste is evil!!!

kind regards ...
May 25 '07 #15

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by Yellowbird | last post: by
1 post views Thread by huyuhui | last post: by
9 posts views Thread by Jerim79 | last post: by
3 posts views Thread by Jerim79 | last post: by
15 posts views Thread by Lawrence Krubner | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.