Loop in javascript?

[galvin]

In the javascript code below, is there a way to do a loop so I don't have to repeat the IF statements?  I only included two IF statements, but my actual code would have A LOT more (i.e. pick1_1, pick1_2, pick 1_3, etc, etc).

 

 

<script type="text/javascript">
function validate_form()
{
valid=true;

if (document.bracket.pick1_1.value == "")
{
	alert("Please pick a winner for every game");
	valid=false;
}
if (document.bracket.pick1_2.value == "")
{
	alert("Please pick a winner for every game");
	valid=false;
}
return valid;
}
</script>

[xenophobia]

I'll assumed you are validating a form with textboxes and your form name is 'bracket'.

function validate_form() {
    var inputs = document.bracket.getElementsByTagName('input');
    for (var i=0, len=inputs.length; i < len; i++) {
        var input  = inputs[i];
        if (input.name.indexOf('pick') != -1) {
            // Check the value here.
            var value = input.value;
            if (value == "") {
                alert("Please pick a winner for every game");
                return false;
            }
        }
    }
    return true;
}

Try it out...

[galvin]

Very nice, it works great, however...

 

This is an NCAA bracket I have people filling in (your assumptions were correct by the way).  So there are 32 FIRST round picks, 16 SECOND round picks, 8 THIRD round pick, 4 FOURTH round picks, 2 FIFTH round picks and 1 SIXTH round pick...for a total of 63 picks.

 

Right now, using your code, I get the ALERT up until the FIRST round 32 picks are chosen.  After that, it will still submit the form even if the 2nd, 3rd, 4th, 5th and 6th round picks are NOT selected yet.

 

I obviously didn't give you enough info...

 

All the text inputs for the first round picks are named pick1_1, pick1_2, etc, up to pick 1_32.

All the text inputs for the second round picks are named pick2_1, pick2_2, etc, up to pick 2_16.

All the text inputs for the third round picks are named pick3_1, pick3_2, etc, up to pick 3_8.

All the text inputs for the fourth round picks are named pick4_1, pick4_2 etc, up to pick 4_4

The two text inputs for the fifth round picks are named pick5_1 and pick5_2

The text input for the sixth round pick is named pick6_1

 

With this new info, how would I adjust your code to give that alert until all 63 of those picks are filled in?

[Psycho]

function getFieldObj(round, bracket)
{
    if(document.forms['bracket'].elements['pick'+round+'_'+bracket])
    {
        return document.forms['bracket'].elements['pick'+round+'_'+bracket];
    }
    return false;
}

function validate_form()
{
    var round = 1;
    var bracket = 1;

    while (fieldObj = getFieldObj(round, bracket))
    {
        if (fieldObj.value=='')
        {
            alert("Please pick a winner for every game");
            return false;
        }

        bracket++;
        if(!getFieldObj(round, bracket))
        {
            round++;
            bracket = 1;
        }
    }
    return true;
}

[galvin]

Thanks for the reply MJDAMATO, I tried it and it seems to be doing the same thing as xenophobia's code did, i.e. gives the Alert until all the 1st round picks are entered, but once they are, it submits the form even if none of the higher rounds picks (2nd, 3rd, 4th, 5th and 6th) have been picked yet.

 

Can't figure out why.  Strange.

[Psycho]

Well, I tested it out and it worked fine for me. The logic starts with round = 1 and bracket = 1. It then checks the field for that round and bracket. if that passes it increments bracket by 1. If that field exists it checks it. If not it increments round by 1 and sets bracket to 1. If at any time it finds a field with no value it will return false. If it continues through all available rounds and brackets (all having values) it will return true.

[xenophobia]

Try modify my code:

var inputs = document.bracket.getElementsByTagName('input');

to

var inputs = document.getElementsByTagName('input');

[galvin]

That modification made no difference, xenophobia, but thanks for trying!

 

Both code you guys gave me does the same thing (i.e. it works, but only until the 32 first round picks are filled in.  After that, the form submits whether the later round picks are filled in or not).

 

I gotta be missing something obvious.  I'll keep digging. If anyone else has any suggestions, let me know!

 

Thanks!

[Psycho]

have you checked that you are not missing any fields and/or that they are named correctly? If you are missing one of the fields, that would explain why my code would not work. I did test the code and it worked for multiple brackets in multiple rounds.

 

Here is a test page that utilizes the script I provided with fields for four rounds (8 teams to start) and the fields named according to your parameters above. It all works fine for me. If I leave any field empty the vaidation fails.

 

<html>
<head>
<script type="text/javascript">

function getFieldObj(round, bracket)
{
    if(document.forms['bracket'].elements['pick'+round+'_'+bracket])
    {
        return document.forms['bracket'].elements['pick'+round+'_'+bracket];
    }
    return false;
}

function validate_form()
{
    var round = 1;
    var bracket = 1;

    while (fieldObj = getFieldObj(round, bracket))
    {
        if (fieldObj.value=='')
        {
            alert("Please pick a winner for every game");
            return false;
        }

        bracket++;
        if(!getFieldObj(round, bracket))
        {
            round++;
            bracket = 1;
        }
    }
    return true;
}

</script>
</head>
<body>
<form name="bracket">

<h1>Round 1</h1>
Pick 1: <input type="text" name="pick1_1" /><br />
Pick 2: <input type="text" name="pick1_2" /><br />
Pick 3: <input type="text" name="pick1_3" /><br />
Pick 4: <input type="text" name="pick1_4" /><br />
Pick 5: <input type="text" name="pick1_5" /><br />
Pick 6: <input type="text" name="pick1_6" /><br />
Pick 7: <input type="text" name="pick1_7" /><br />
Pick 8: <input type="text" name="pick1_8" /><br />

<h1>Round 2</h1>
Pick 1: <input type="text" name="pick2_1" /><br />
Pick 2: <input type="text" name="pick2_2" /><br />
Pick 3: <input type="text" name="pick2_3" /><br />
Pick 4: <input type="text" name="pick2_4" /><br />

<h1>Round 3</h1>
Pick 1: <input type="text" name="pick3_1" /><br />
Pick 2: <input type="text" name="pick3_2" /><br />

<h1>Round 4</h1>
Pick 1: <input type="text" name="pick4_1" /><br />

<br />
<button onclick="validate_form()">Submit</button>

</form>
</body>
</html>

[galvin]

Hey mjdamato,

My inputs are not in order, maybe that is the problem?  I have the inputs laid out in a table so that when displayed, it looks like the NCAA field of 64 bracket.  The pick1_32 input (i.e. the last pick of the 1st round) is the LAST input in the ALL of the code (i.e. the last input tag before the SUBMIT button).

 

That seems too cnincidental so it must be the problem.  In other words, when I pick the last pick of the 1st round, it puts a value in that LAST input field right before the SUBMIT button (called pick1_32).  The form then submits, so my guess is the javascript assumes it's work is done and doesn't go back through the code above it.

 

If that is the issue, is there some way to tell your javascript to search ALL the inputs again, regardless of ordering?

 

If it helps, here is the top quarter of my bracket ...

 

<table border=0 cellpadding=0 cellspacing=0>

<tr>
    <td class="seed">1</td><td class="startteams"><img class="logo" src="images/teams/team01.gif" /><input type="text" readonly  class="team" name="pick0_1" onclick="win(this)" value="<?php echo $team1;?>"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td><td></td>
    <td></td>
    <td></td>
    <td></td>
     <td></td>
    <td></td>
   <td class="startteams"><input type="text" readonly  class="team" name="pick0_33" onclick="win(this)" value="<?php echo $team33;?>"><img class="logoright" src="images/teams/team01.gif" /></td><td class="seed">1</td>
</tr>

<tr>
<td></td>
    <td class="borderright"> </td>
    <td><input type="text" readonly  class="team1" name="pick1_1" onclick="win(this)" value=""></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td><td></td>
    <td></td>
    <td></td>
    <td></td>
    <td><input type="text" readonly  class="team1" name="pick1_17" onclick="win(this)" value=""></td>  <td class="borderleft"> </td>
</tr>
<tr>
    <td class="seed">16</td><td class="borderright startteams"><img class="logo" src="images/teams/team02.gif" /><input type="text" readonly   class="team" name="pick0_2" onclick="win(this)" value="<?php echo $team2;?>"></td><td class="borderright"> </td>
     <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td><td></td>
    <td></td>
    <td></td>
    <td></td>  <td class="borderleft"> </td>
   <td class="borderleft startteams"><input type="text" readonly  class="team" name="pick0_34" onclick="win(this)" value="<?php echo $team34;?>"><img class="logoright" src="images/teams/team01.gif" /></td><td class="seed">16</td>
</tr>
<tr>
<td></td>
    <td> </td>
    <td class="borderright"> </td>
    <td><input type="text" readonly  class="team2" name="pick2_1" onclick="win(this)" value=""></td>
    <td></td>
    <td></td>
    <td></td><td></td>
    <td></td>
    <td></td>
    <td></td>
    <td><input type="text" readonly  class="team2" name="pick2_9" onclick="win(this)" value=""></td>  <td class="borderleft"> </td>
    <td></td>
    
</tr>
<tr><td class="seed">8</td>
    <td class="startteams"><img class="logo" src="images/teams/team01.gif" /><input type="text" readonly  class="team" name="pick0_3" onclick="win(this)" value="<?php echo $team3;?>"></td>
    <td class="borderright"> </td>
    <td class="borderright"> </td>
    <td></td>
    <td></td>
    <td></td><td></td>
    <td></td>
    <td></td>
    <td></td>  <td class="borderleft"> </td>  <td class="borderleft"> </td>
   <td class="startteams"><input type="text" readonly  class="team" name="pick0_35" onclick="win(this)" value="<?php echo $team35;?>"><img class="logoright" src="images/teams/team01.gif" /></td><td class="seed">8</td>
</tr>
<tr>
   	 <td></td>
     <td class="borderright"> </td>
    <td class="borderright"><input type="text" readonly  class="team1" name="pick1_2" onclick="win(this)" value=""></td>
    <td class="borderright"> </td>
    <td></td>
    <td></td>
    <td></td><td></td>
    <td></td>
    <td></td>
    <td></td>  <td class="borderleft"> </td>
    <td class="borderleft"><input type="text" readonly  class="team2" name="pick1_18" onclick="win(this)" value=""></td>  <td class="borderleft"> </td>
</tr>
<tr>
    <td class="seed">9</td><td class="borderright startteams"><img class="logo" src="images/teams/team02.gif" /><input type="text" readonly  class="team" name="pick0_4" onclick="win(this)" value="<?php echo $team4;?>"></td>
     <td></td>
    <td class="borderright"> </td>
    <td></td>
    <td></td>
    <td></td><td></td>
    <td></td>
    <td></td>
    <td></td>  <td class="borderleft"> </td>
    <td></td>
   <td class="borderleft startteams"><input type="text" readonly  class="team" name="pick0_36" onclick="win(this)" value="<?php echo $team36;?>"><img class="logoright" src="images/teams/team01.gif" /></td><td class="seed">9</td>
</tr>
<tr>
    <td></td>
    <td> </td>
    <td> </td>
    <td class="borderright"> </td>
    <td><input type="text" readonly  class="team2" name="pick3_1" onclick="win(this)" value=""></td>
    <td></td>
    <td></td><td></td>
    <td></td>
      <td></td>
     <td><input type="text" readonly  class="team2" name="pick3_5" onclick="win(this)" value=""></td>  <td class="borderleft"> </td>
      <td></td>
        <td></td>
</tr>

<tr><td class="seed">5</td>
    <td class="startteams"><img class="logo" src="images/teams/team01.gif" /><input type="text" readonly  class="team" name="pick0_5" onclick="win(this)" value="<?php echo $team5;?>"></td>
     <td></td>
     <td class="borderright"> </td>
     <td class="borderright"> </td>
      <td></td>
      <td></td><td></td>
       <td></td>
        <td></td>  <td class="borderleft"> </td>  <td class="borderleft"> </td>
          <td></td>
          <td class="startteams"><img class="logoright" src="images/teams/team01.gif" /><input type="text" readonly  class="team" name="pick0_37" onclick="win(this)" value="<?php echo $team37;?>"></td>
<td class="seed">5</td>
</tr>
<tr>
    <td></td>
    <td class="borderright"> </td>
    <td><input type="text" readonly  class="team1" name="pick1_3" onclick="win(this)" value=""></td>
    <td class="borderright"> </td>
    <td class="borderright"> </td>
    <td></td>
    <td></td><td></td>
    <td></td>
    <td></td>  <td class="borderleft"> </td>  <td class="borderleft"> </td>
    <td><input type="text" readonly  class="team1" name="pick1_19" onclick="win(this)" value=""></td>  <td class="borderleft"> </td>
</tr>
<tr>
    <td class="seed">12</td><td class="borderright startteams"><img class="logo" src="images/teams/team02.gif" /><input type="text" readonly  class="team" name="pick0_6" onclick="win(this)" value="<?php echo $team6;?>"></td>
    <td class="borderright"> </td>
    <td class="borderright"> </td>
    <td class="borderright"> </td>
    <td></td>
    <td></td><td></td>
    <td></td>
    <td></td>  <td class="borderleft"> </td>  <td class="borderleft"> </td>  <td class="borderleft"> </td>
    <td  class="borderleft startteams"><img class="logoright" src="images/teams/team02.gif" /><input type="text" readonly  class="team" name="pick0_38" onclick="win(this)" value="<?php echo $team38;?>"></td><td class="seed">12</td>
    
</tr>
<tr>
    <td></td>
    <td> </td>
    <td class="borderright"> </td>
    <td class="borderright"><input type="text" readonly  class="team2" name="pick2_2" onclick="win(this)" value=""></td>
    <td class="borderright"> </td>
    <td></td>
    <td></td>
    <td></td><td></td>
    <td></td>  <td class="borderleft"> </td>
    <td class="borderleft"><input type="text" readonly  class="team2" name="pick2_10" onclick="win(this)" value=""></td>  <td class="borderleft"> </td>
    <td></td>
    
</tr>
<tr><td class="seed">4</td>
    <td class="startteams"><img class="logo" src="images/teams/team01.gif" /><input type="text" readonly  class="team" name="pick0_7" onclick="win(this)" value="<?php echo $team7;?>"></td>
    <td class="borderright"> </td>
    <td></td>
    <td class="borderright"> </td>
    <td></td>
    <td></td>
    <td></td><td></td>
    <td></td>  <td class="borderleft"> </td>
    <td></td>  <td class="borderleft"> </td>    
    <td class="startteams"><img class="logoright" src="images/teams/team01.gif" /><input type="text" readonly  class="team" name="pick0_39" onclick="win(this)" value="<?php echo $team39;?>"></td>
    <td class="seed">4</td>
    
</tr>
<tr>
   <td></td>
    <td class="borderright"> </td>
    <td class="borderright"><input type="text" readonly  class="team1" name="pick1_4" onclick="win(this)" value=""></td>
    <td></td> 
    <td class="borderright"> </td> 
    <td></td> 
    <td></td> <td></td>
    <td></td> 
    <td></td>  <td class="borderleft"> </td> 
    <td></td> 
    <td class="borderleft"><input type="text" readonly  class="team1" name="pick1_20" onclick="win(this)" value=""></td>  <td class="borderleft"> </td> 
</tr>
<tr>
    <td class="seed">13</td><td class="borderright startteams"><img class="logo" src="images/teams/team02.gif" /><input type="text" readonly  class="team" name="pick0_8" onclick="win(this)" value="<?php echo $team8;?>"></td>
    <td></td> 
    <td></td> 
    <td class="borderright"> </td> 
    <td></td> 
    <td></td> <td></td>
    <td></td> 
    <td></td>  <td class="borderleft"> </td> 
    <td></td> 
    <td></td> 
    <td class="borderleft startteams"><img class="logoright" src="images/teams/team02.gif" /><input type="text" readonly  class="team" name="pick0_40" onclick="win(this)" value="<?php echo $team40;?>"></td><td class="seed">13</td>
</tr>

 

[xenophobia]

May I know how you call up your "validate_form" function to validate your form?

[galvin]

This is the form tag which has the call to the validate_form function...

 

<form id="bracket" name="bracket" action="http://localhost/bracket/submitpicks.php"  method="post" onsubmit="return validate_form();"  >

 

 

This is the submit button at the bottom of the huge form (which has 63 total input (text) fields)...

 

<input type="submit" class="submitpicksbutton" name="submit"  value="Submit My Bracket!" />

 

 

The first snippet of javascript is mjdamatos and the second bit of code is yours.  I flipped between both and they both do the same thing (i.e. they give the alert until the first round picks are all entered, but then they let the form be submitted regardless of whether the later round picks are selected).

 

If you have any other suggestions, let me know. I'm sure I'm doing something stupid ....

 

 

 

<script type="text/javascript">
function getFieldObj(round, bracket)
{
    if(document.forms['bracket'].elements['pick'+round+'_'+bracket])
    {
        return document.forms['bracket'].elements['pick'+round+'_'+bracket];
    }
    return false;
}

function validate_form()
{
    var round = 1;
    var bracket = 1;

    while (fieldObj = getFieldObj(round, bracket))
    {
        if (fieldObj.value=='')
        {
            alert("Please pick a winner for every game");
            return false;
        }

        bracket++;
        if(!getFieldObj(round, bracket))
        {
            round++;
            bracket = 1;
        }
    }
    return true;
}
</script>

 

<script type="text/javascript">
function validate_form() {    
var inputs = document.bracket.getElementsByTagName('input');  
for (var i=0, len=inputs.length; i < len; i++) {        
var input  = inputs[i];        
if (input.name.indexOf('pick') != -1) {            // Check the value here.           
var value = input.value;           
if (value == "") {                
alert("Please pick a winner for every game");                
return false;            
}        
}    
}    
return true;}
</script>

 

[Psycho]

Did you look at the last code I posted? Do the field names match the format and sequence of field names that you are using? That code works. Like I said, if you have an error in one of your field names the script would exit prematurely. I think you need to attach your complete page.

[galvin]

I agree, mjdamato. I tried to post the whole page of code but it said it exceeded the amount of lines allowed  :-\

Maybe I could post it in separate parts?  I'll see what I can do...

[Psycho]

The pick1_32 input (i.e. the last pick of the 1st round) is the LAST input in the ALL of the code (i.e. the last input tag before the SUBMIT button).

 

That seems too cnincidental so it must be the problem.

No, that would not be the problem. Neither of the solutions provided above check the fields in the physical order displayed.

 

I agree, mjdamato. I tried to post the whole page of code but it said it exceeded the amount of lines allowed  :-\

Maybe I could post it in separate parts?  I'll see what I can do...

 

Just "attach" the file. Click the "Preview" button below to get the expanded form to post a message and you will have the option to attach a file.

[Psycho]

The problem is in the field names as I expected. After reviewing the table in some of the code above you have fields 1_1, 1_2, 1_3, 1_4 then it jumps to 1_17, 1_18, 1_19 & 1_20. That is not the format you stated previously. Where are fields 1_5 to 1_16?

[galvin]

Ok, the file is attached.  Hope it helps ...

 

[attachment deleted by admin]

[galvin]

mjdamato, pick1_5 thru pick1_16 are in there, I just didn't give you the full code the first time.  I just attached the full code, so you should see ALL inputs  now.  Again, they are not in physical order because of the need to have it in a bracket style layout.

[Psycho]

I took your code and only used the form. I also removed the "readonly" attribute for the fields. The script worked fine. I entered data into all the fields and validation passed. I then selectively removed values from individual fields and found that validation failed no matter what field was empty regardless of round or bracket.

[galvin]

So then it must be that "readonly" is causing a problem.  I need them to be readonly, so that's quite a wrench in my plans   I'll try to figure something out.  Thanks for all the feedback

[Psycho]

No, I don't think the readonly is a problem. But, I couldn't enter text into those fields otherwise. I was just letting you know what I modified when I tested.