Jump to content

Loop in javascript?


galvin

Recommended Posts

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>

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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! :)

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.