Hey Everyone, I'm hoping you all can help me with this. I have created a html ncaa tournament bracket for my website in which I hold annual competitions. Recently, my competition has grown and I need a better way for users to submit their brackets.
What Im looking for is a way to allow the person filling out the bracket to click on their predicted winner for each game, which will then fill out the bracket as they move through the bracket until the have predicted a national champion.
Sounds to me like you need a server side solution with a database backing.
That way you can automate the whole thing, including figuring out who the winners (your players, not the teams) are.
mknott has probably the right idea of the way to present the <FORM>, but it needs to be smarter than just simple drop downs. If you make them fill in the brackets from 64 to 2, then at each game there will only be two choices for the winner. If you allow "free form" fill in, then at the final game you'd have to have 32 teams in each of the dropdowns. Ugly. I think I'd avoid dropdown and just allow them to click on the winner from the pair of winners of the prior game.
I am thinking what can be done is display all of the first rounds and have a button call a function roundOne() This will grab the submitted values and read them and the round two buttons will will read those values and write them into the form for roundTwo() and progress all the way until you get to a final. Is the final result going to be printed out and handed to you, or emailed or submitted in some other way?
You could also do this in excel if really wanted to do it in an easy way, then you can save that as an interactive excel file. This is the javascript forum and that is the fun in the challenge.
If I get a little more free time I will try to get some sample code for you, though the idea may get you going in the right direction.
Only 4 teams instead of 64, but it shows the concept.
It's not terribly sophisticated. If you choose "Amherst" and "Connecticut" as winners, they show up in the round of 32. Then you click on Connecticut there and it shows up in sweet 16. But if you go back to first round and click on Duke, it changes round of 32 fine but leaves Connecticut in sweet 16. But all that, too, could be fixed with a tad bit of JS coding.
Not to ask a dumbass question, but...HOW will the results get EMailed to you????
If you have (example) Connecticut picked to go all the way and then change your mind and think they will lose to Duke, then Duke gets propagated all the way up.
This only shows 8 teams at first level, but obviously easy to extend to 64.
Note the numbering scheme for the "WINx_y" button names: x is the level. 0 for entry, 1 for 1 win, 2 for 2 wins, etc. y is just the game number *IN THAT ROUND*. So "WIN6_1" will show the user's choice for champion. (Of course won't be any "WIN6_2".)
Essentially, what I show here is the teams that would pick one winner for the Elite Eight.
NOTE: I do *NOT* handle the "play-in" game. Too much trouble. Just code it by itself.
Silvermoss: Yeah, right idea. But why bother with a different function for each round???
See my code: I just a "naming convention" so that I can always figure out which "slot" the clicked on winner goes into. And then I even use recursion if I need to replace the next level up, too. Ad nauseum.
But I'm still not sure what format the email can/will be in. Hmmm....
Thanks for all the help Old Pedant. However, I have hit another issue that i cant seem to figure out, although maybe im just looking at it too hard and not stepping back to take a look at it. Ive been working day and night on this website to try and get it ready and i only have a couple of weeks left.
I have taken your code that you started with and expanded it to a 16 team bracket. However, for some reason, i cant seem to figure out how to add a 3rd and a 4th round to the bracket. Ive been racking my brain on this and other things and im basically exhausted.
So far I have attempted to add the third round to the bracket, but it doesnt seem to want to show the results of third round game. what am i doing wrong?
Here's a 16-team region in its entirety plus the "final four" spots and final game matchup just for clarity.
All you'd have to do would be to "clone" the one region--be sure to renumber the field names in the other regions according to my pattern--and you'd be good to go.
It makes a really long HTML page. You probably could make it half as long by putting regions on both left and right side, by tightening up the spacing, but I dunno that it's worth it.
First of all I want to thank Old Pedant for this code as this gave me a great start after spending many hours searching the web and trying others examples and code.
I was messing around with the code and made a couple of changes with regards to the propogation of picks. When you make your first pick it really shouldn't propogate through all rounds, only the next round. I made the change and then realized that there are cases when you have made all your picks already and then change your mind and the team you are removing stays in future rounds, so I made a some more changes to check for the presence of the "old" team in future rounds and remove it. I tested and didn't see any bugs, but if I forgot something let me know.
function win(winner)
{
var team = winner.value;
var levels = winner.name.substring(3).split("_");
var curlevel = parseInt(levels[0]);
var curgame = parseInt(levels[1]);
var nextlevel = curlevel + 1;
var nextgame = Math.floor( (curgame+1) / 2 );
var curteam = winner.form.elements["WIN"+nextlevel+"_"+nextgame].value;
var winnerButton = winner.form.elements["WIN"+nextlevel+"_"+nextgame];
if ( winnerButton == null ) return;
Before you post, read our: 
