How to show form drop down boxes, based on form selection further up the page

chrisidas · July 17, 2011

Hey,

I've been trying to learn JavaScrip over the last few days, specifically for this one function. Still not sure how to do it though.

I have a form on one of my pages to submit a result from a football match.

The options in the form are 'homegoals' and 'awaygoals'

I would like to use javascript so when the user clicks 'Add Goalscorers' it adds a drop down box for each goal, e.g. if 'homegoals' is 3 and 'awaygoals' is 2, it adds 3 select options for 'homegoalscorers' and 2 select options for 'awaygoalscorers'.

I would also like to use the same script for yellow cards and red cards, but im sure i'll be able to work that out myself once i have a general idea of what to do

Cheers

KevinM1 · July 17, 2011

Rather than dynamically creating these drop downs, you're better off creating as many that would be reasonable (say, 5-10 for each side), and then hiding them with CSS. You could then use JavaScript to unhide them when necessary, based on their value.

So, like I suggested before, do something like (pseudo code):

var homeScore = document.getElementById('homeScore');
var awayScore = document.getElementById('awayScore');

homeScore.onchange = function() {
   // get all of the existing child drop downs and HIDE them all

   // unhide the number of child drop downs equal to this.value
}

awayScore.onchange = function() {
   // do the same thing here
}

chrisidas · July 17, 2011

Awesome, thanks!

chrisidas · July 17, 2011

This is the code i have so far

<script type="text/javascript">
<!--
var homescore = document.getElementById('homescore');
var awayscore = document.getElementById('awayscore');

homescore.onchange = function() {
<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$hometeam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="homescorers" id="homescorers">
<option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
<? }?>

<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$hometeam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="homescorers" id="homescorers">
<option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
<? }?>

<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$hometeam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="homescorers" id="homescorers">
<option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
<? }?>

<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$hometeam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="homescorers" id="homescorers">
<option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
<? }?>

<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$hometeam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="homescorers" id="homescorers">
<option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
<? }?>

<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$hometeam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="homescorers" id="homescorers">
<option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
<? }?>

<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$hometeam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="homescorers" id="homescorers">
<option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
<? }?>

<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$hometeam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="homescorers" id="homescorers">
<option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
<? }?>

<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$hometeam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="homescorers" id="homescorers">
<option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
<? }?>

<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$hometeam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="homescorers" id="homescorers">
<option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
<? }?>

   // unhide the number of child drop downs equal to this.value
}

awayscore.onchange = function() {
   // do the same thing here
<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$awayteam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="awayscorers" id="awayscorers">
<option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
<? } ?>

<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$awayteam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>

<form method="post" action="result-script.php">
<select name="awayscorers" id="awayscorers">
<option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
<? } ?>
<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$awayteam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>

<form method="post" action="result-script.php">
<select name="awayscorers" id="awayscorers">
<option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
<? } ?>

<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$awayteam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="awayscorers" id="awayscorers">
<option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
<? } ?>

<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$awayteam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="awayscorers" id="awayscorers">
<option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
<? } ?>

<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$awayteam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="awayscorers" id="awayscorers">
<option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
<? } ?>

<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$awayteam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="awayscorers" id="awayscorers">
<option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
<? } ?>

<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$awayteam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="awayscorers" id="awayscorers">
<option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
<? } ?>

<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$awayteam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="awayscorers" id="awayscorers">
<option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
<? } ?>

<? $sql = mysql_query("SELECT * FROM players WHERE teamname='$awayteam'");
echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$homeplayername = $row['playername'];
?>
<form method="post" action="result-script.php">
<select name="awayscorers" id="awayscorers">
<option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
<? } ?>

}
//-->
</script>

Not sure if that's in anyway correct, but what would i have to add to it so that it shows the hidden options. Also, how would i call the code?

KevinM1 · July 18, 2011

You're making a lot of extra work for yourself. You really don't want to be mixing PHP with JavaScript like you are. Remember what I said before: keep your stuff separate.

Okay, that said, here's a rough sketch of how I'd do it (pseudo code):

<?php
   function makeSelects($dbResult)
   {
      while($row = mysql_fetch_assoc($dbResult)
      {
          // make select OPTIONS, not the select tag
      }
   }

   function homeScorers($dbResult)
   {
      echo '<select name="homeScorer[]" >';

      makeSelects($dbResult);
   }

   function awayScorers($dbResult)
   {
      echo '<select name="awayScorer[]" >';

      makeSelects($dbResult);
   }

   $homeQuery = "SELECT * FROM players WHERE teamname = '$hometeam'";
   $homeResult = mysql_query($homeQuery);

   $awayQuery = "SELECT * FROM players WHERE teamname = '$awayteam'";
   $awayResult = mysql_query($awayQuery);

   // When you want to make your drop downs, it's as simple as writing:

   homeScorers($homeResult);

   // or:

   awayScorers($awayResult);

   // Obviously, you'll want to invoke them in the right place in your template, so DON'T simply write them one after the other like I did above.

   // Okay, so now, at the BOTTOM of your HTML:
?>

<script>
   var homeScore = document.getElementById('homeScore');
   var awayScore = document.getElementById('awayScore');

   homeScore.onchange = function() {
      var homeScorers = document.forms["myForm"].elements["homeScorer[]"];
      var homeLength = homeScorers.length;

      for(var i = 0; i < homeLength; ++i) {
         homeScorers[i].display = "none";
      }

      var score = this.value;

      for(var j = 0; j < score; ++j) {
         homeScorers[j].display = "block";
      }
   }

   awayScore.onchange = function() {
      var awayScorers = document.forms["myForm"].elements["awayScorer[]"];
      var awayLength = awayScorers.length;

      for(var i = 0; i < awayLength; ++i) {
         awayScorers[i].display = "none";
      }

      var score = this.value;

      for(var j = 0; j < score; ++j) {
         awayScorers[j].display = "block";
      }
   }
</script>

Since this is pseudo code, I didn't put in any error checking (which you should do). It also may not (likely won't) work out of the box. The idea is to show how to approach the problem, not simply write the full script.

chrisidas · July 18, 2011

Thanks mate, will give this a go in a bit. Really appreciate the help

chrisidas · July 18, 2011

in function makeSelects($dbResult)

should it look like this?

        <?php
   function makeSelects($dbResult)
   {
      while($row = mysql_fetch_assoc($dbResult)
      {
          
	homeScorers($homeResult);

      }
   }

?>

and be placed where i want the drop down boxes to appear?

Or would it look like this

   function makeSelects($dbResult)
   {
      while($row = mysql_fetch_assoc($dbResult)
      {
	  ?>
	<option value="<?php echo $homeResult; ?>"><?php echo $homeResult; ?></option>
          <?php
      }
   }
?>

Or am I way off again?

Really am struggling to get my head around this lol

KevinM1 · July 18, 2011

You're way off. Don't try to rush into the code. Stop, and take the time to read it. You have three components all working with one another. Your PHP is writing both your HTML and your JavaScript.

homeScorers() and awayScorers() invoke makeSelects(). All you need to do is invoke one of those top level Scorers functions where ever you want a scorer drop down to appear:

<?php
   function makeSelects($dbResult)
   {
      while($row = mysql_fetch_assoc($dbResult)
      {
          // make select OPTIONS, not the select tag
      }
   }

   function homeScorers($dbResult)
   {
      echo '<select name="homeScorer[]" >';

      makeSelects($dbResult);
   }

   function awayScorers($dbResult)
   {
      echo '<select name="awayScorer[]" >';

      makeSelects($dbResult);
   }

   $homeQuery = "SELECT * FROM players WHERE teamname = '$hometeam'";
   $homeResult = mysql_query($homeQuery);

   $awayQuery = "SELECT * FROM players WHERE teamname = '$awayteam'";
   $awayResult = mysql_query($awayQuery);
?>

<!DOCTYPE html>
<html lang="en-us">
   <head>
      <title>Example</title>
   </head>

   <body>
      <!-- all of your HTML up until your form -->

      <?php echo homeScorers($homeResult); ?>
      <?php echo awayScorers($awayResult); ?>
   </body>

   <script>
      // the JavaScript
   </script>

</html>

This is how well-formed PHP apps should look, BTW. All PHP processing at the top, then the output last. Notice how, aside from a couple of function calls, there's no PHP mingling with HTML. Similarly, there's no inline JavaScript in the HTML. This layering is what you should strive for when you write your apps.

Again, since this is pseudo code (although, almost completely written for real at this point), there will be details that you'll need to fill in. The most important one is actually writing the <option> HTML for the scorer drop downs (not difficult if you're familiar with either echo or return). There's also error handling to take into account.

Take your time and really read what the code is doing. It's not that complicated if you take your time.

chrisidas · July 18, 2011

Aaaaaaaah, I'm starting to get what you mean now

chrisidas · July 18, 2011

Ok, so i think i'm starting to get my head around this now i've read it through properly and taken my time.

This is the code i now have before my HTML

<?php
   function makeSelects($dbResult)
   {
      while($row = mysql_fetch_assoc($dbResult))
      {
          // make select OPTIONS, not the select tag
	  $homeplayername = $row['playername'];
	  ?>
          <option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
          <option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
          <option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
          <option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
          <option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
          <option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
          <option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
          <option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
          <option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
          <option value="<?php echo $homeplayername; ?>"><?php echo $homeplayername; ?></option>
          <?php
      }
  while($row = mysql_fetch_assoc($dbResult))
  {
	  $awayplayername = $row['playername'];
	  ?>
          <option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
          <option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
          <option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
          <option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
          <option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
          <option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
          <option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
          <option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
          <option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
          <option value="<?php echo $awayplayername; ?>"><?php echo $awayplayername; ?></option>
	  <?php
  }

   }

   function homeScorers($dbResult)
   {
      echo '<select name="homeScorer[]" >';

      makeSelects($dbResult);
   }

   function awayScorers($dbResult)
   {
      echo '<select name="awayScorer[]" >';

      makeSelects($dbResult);
   }

   $homeQuery = "SELECT * FROM players WHERE teamname = '$hometeam'";
   $homeResult = mysql_query($homeQuery);

   $awayQuery = "SELECT * FROM players WHERE teamname = '$awayteam'";
   $awayResult = mysql_query($awayQuery);
?>

Is this correct?

One thing i still dont understand is $dbResult. Do i need to change this to $homeResult and $awayResult? If that isnt the case, how would i associate the select options with the select tags?

KevinM1 · July 19, 2011

Read up on functions, especially passing arguments to them. The Reader's Digest version is this:

When you write a function definition, you specify an abstract version of the parameter(s) you want to pass in. To illustrate, a horribly canned example:

function example($arg1, $arg2)
{
   // do stuff with $arg1 and $arg2
}

The key here is that this is a function definiton - a blueprint which isn't actually run until specifically invoked. So, when you have code like:

$x = 10;
$y = "Mila Kunis";

example($x, $y);

$arg1 is replaced by $x and $arg2 is replaced by $y in that particular invocation.

So, in the real code you have, $dbResult is essentially just a placeholder/delegate name. $homeResult and $awayResult are the real values you're dealing with. When you pass one of them to one of the functions, PHP is smart enough to do the replacement for you. So $dbResult is substituted with one of the others automatically.

Really short answer: the $dbResult -> $homeResult/$awayResult is fine, leave as is.

---

For makeSelects, get rid of one of the loops in its entirety, then simply echo the options in the other loop as such

while($row = mysql_fetch_assoc($dbResult))
{
   echo "<option value='{$row['playername']}'>{$row['playername']}</option>";
}

You only need one line in the loop because you only want one option per row. And, simply echoing them out, rather than returning them as a variable, is a bit easier, even if it's not 100% best practice. Ideally, you'd store each option in an array like so:

$options = array();

while($row = mysql_fetch_assoc($dbResult))
{
   $options[] = "<option value='{$row['playername']}'>{$row['playername']}</option>";
}

return $options;

But that would require you to loop through those results to echo them to the screen. Easier just to echo them in place.

chrisidas · July 19, 2011

Thats worked now yeah

Now i have this

<?php
   function makeSelects($dbResult)
   {
      while($row = mysql_fetch_assoc($dbResult))
      {
         echo "<option value='{$row['playername']}'>{$row['playername']}</option>";
  }

   }

   function homeScorers($dbResult)
   {
      echo '<select name="homeScorer[]" >';

      makeSelects($dbResult);
   }

   function awayScorers($dbResult)
   {
      echo '<select name="awayScorer[]" >';

      makeSelects($dbResult);
   }

   $homeQuery = "SELECT * FROM players WHERE teamname = '$hometeam'";
   $homeResult = mysql_query($homeQuery);

   $awayQuery = "SELECT * FROM players WHERE teamname = '$awayteam'";
   $awayResult = mysql_query($awayQuery);
?>

Then to display my drop down boxes in my form i use

<tr>
<td class="post-result-home">
<?php echo homeScorers($homeResult); ?>
</td>
<td class="post-result-away">
<?php echo awayScorers($awayResult); ?>
</td>
</tr>

It now shows 1 drop down box for the home scorers, and one drop down box for the away scorers.

So now i need to make it so it shows say, 10 drop down boxers for both home and away, then hide them with CSS?

I tried doing this, but not sure how to do it. I added more of these

<?php echo homeScorers($homeResult); ?>

but nothing happened.

I also added more of these

         echo "<option value='{$row['playername']}'>{$row['playername']}</option>";

but that didnt change anything either.

Stuck again :shy:

KevinM1 · July 19, 2011

Remember to close your <select> tags. You can do it simply by doing:

   function awayScorers($dbResult)
   {
      echo '<select name="awayScorer[]" >';

      makeSelects($dbResult);

      echo '</select>';
   }

And, obviously, do the same in homeScorers()

To show 10 of them, simply make a for-loop in your HTML where ever you want to show them:

<?php for($i = 0; $i < 10; ++$i)
   {
      homeScorers($homeResult);
   }
?>

And do the same for the away scorers. You'll most likely need to fiddle with the HTML to make it look right.

For the CSS, the easiest thing would be to give all the scorer <select>'s a class, and then set that class's display to none.

chrisidas · July 19, 2011

That works to add more yeah, and to hide them.

The problem i know have is the 1st drop down box shows all the players, then the next 9 dont have anything in :-\

Also, i cant seem to get it to change the number it shows when i change the score in the form. I've tried tweaking little bits in the script but not sure what needs changing tbh.

KevinM1 · July 20, 2011

Show me your current code.

chrisidas · July 20, 2011

<?php
   function makeSelects($dbResult)
   {
      while($row = mysql_fetch_assoc($dbResult))
      {
         echo "<option value='{$row['playername']}'>{$row['playername']}</option>";
  }

   }

   function homeScorers($dbResult)
   {
      echo '<select name="homeScorer[]" class="goalscorers" >';

      makeSelects($dbResult);

      echo '</select>';
   }

   function awayScorers($dbResult)
   {
      echo '<select name="awayScorer[]" class="goalscorers" >';

      makeSelects($dbResult);

      echo '</select>';
   }

   $homeQuery = "SELECT * FROM players WHERE teamname = '$hometeam'";
   $homeResult = mysql_query($homeQuery);

   $awayQuery = "SELECT * FROM players WHERE teamname = '$awayteam'";
   $awayResult = mysql_query($awayQuery);
?>

<form action="result-script.php" method="post" id="myForm">
<table class="post-result" border="0" cellspacing="0" cellpadding="10">
  <tr>
    <td class="post-result-home"><?php echo $hometeam  ?> <input type="hidden" name="hometeam" value="<?php echo $hometeam ?>">
    </td>
    <td class="post-result-away"><?php echo $awayteam ?> <input type="hidden" name="awayteam" value="<?php echo $awayteam ?>">
    </td>
  </tr>
  <tr>
    <td class="post-result-home">Home Goals
<select name="homescore" id="homescore">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
    <td class="post-result-away"><select name="awayscore" id="awayscore">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
      Away Goals</td>
  </tr>
<tr>
<td class="post-result-home">
<p>Goal Scorers</p>
<?php for($i = 0; $i < 10; ++$i)
   {
      homeScorers($homeResult);
   }
?></td>
<td class="post-result-away">
<p>Goal Scorers<p>
<?php for($i = 0; $i < 10; ++$i)
   {
      awayScorers($awayResult);
   }
?></td>
</tr>
<tr>
    <td colspan="2" class="post-result-submit"><input type="submit" value="Submit" /></td>
    </tr>
</table>

</form>

<script>
   var homeScore = document.getElementById('homescore');
   var awayScore = document.getElementById('awayscore');

   homeScore.onchange = function() {
      var homeScorers = document.forms["myForm"].elements["homeScorer[]"];
      var homeLength = homeScorers.length;

      for(var i = 0; i < homeLength; ++i) {
         homeScorers[i].display = "none";
      }

      var score = this.value;

      for(var j = 0; j < score; ++j) {
         homeScorers[j].display = "block";
      }
   }

   awayScore.onchange = function() {
      var awayScorers = document.forms["myForm"].elements["awayScorer[]"];
      var awayLength = awayScorers.length;

      for(var i = 0; i < awayLength; ++i) {
         awayScorers[i].display = "none";
      }

      var score = this.value;

      for(var j = 0; j < score; ++j) {
         awayScorers[j].display = "block";
      }
   }
</script>

KevinM1 · July 20, 2011

I'll do some testing of my own later today to see if I can simulate your problem.

chrisidas · July 20, 2011

Cheers buddy

KevinM1 · July 20, 2011

Okay, the problem is that when you use one of the mysql fetch functions (like mysql_fetch_assoc) in a loop, it moves the internal pointer past the last row in your query result and keeps it there. Thankfully, there's an easy way to move the pointer back to the first row. Change makeSelects to this:

function makeSelects($dbResult)
{
   mysql_data_seek($dbResult, 0);
    
   while($row = mysql_fetch_assoc($dbResult))
   {
      echo "<option value='{$row['name']}'>{$row['name']}</option>";
   }
}

chrisidas · July 20, 2011

Awesome, that works now yeah.

Last problem (hopefully), is when i have them hidden, they still dont show when the number for home goals and away goals are changed :shrug:

KevinM1 · July 21, 2011

Brain fart on my end. Use:

var homeScore = document.getElementById("homeScore");
    
homeScore.onclick = function() {
   var homeScorers = document.forms["myForm"].elements["homeScorers[]"];
   var homeLength = homeScorers.length;
      
   for(var i = 0; i < homeLength; ++i) {
      homeScorers[i].style.display = "none";
   }
      
   var score = this.value;
      
   for(var j = 0; j < score; ++j) {
      homeScorers[j].style.display = "block";
   }
}

Notice that it's arrayelement.style.display = "whatever".

Be sure to do the same for the away scorer side as well.

My entire test script:

<?php
   $dbc = mysql_connect('localhost', '*******', '*******');
   mysql_select_db('test');
  
   function makeSelects($dbResult)
   {
      mysql_data_seek($dbResult, 0);
    
      while($row = mysql_fetch_assoc($dbResult))
      {
         echo "<option value='{$row['name']}'>{$row['name']}</option>";
      }
   }
  
   function homeScorers($dbResult)
   {
      echo "<select name='homeScorers[]' class='hidden'>";
    
      makeSelects($dbResult);
    
      echo "</select>";
   }
  
   function awayScorers($dbResult)
   {
      echo "<select name='awayScorers[]' class='hidden'>";
    
      makeSelects($dbResult);
    
      echo "</select>";
   }
  
   $query = "SELECT * FROM players";
   $result = mysql_query($query);
?>

<!DOCTYPE html>
<html lang="en-us">
   <head>
      <title>Test</title>
      <style>
         .hidden {
            display: none;
         }
      </style>
   </head>
  
   <body>
      <form name="myForm" action="#" method="post">
         <select name="homeScore" id="homeScore">
            <?php for($a = 0; $a < 11; ++$a)
                  {
                     echo "<option value='$a'>$a</option>";
                  }
            ?>
         </select>
            <?php for($i = 0; $i < 10; ++$i)
                  {
                     homeScorers($result);
                  }
            ?>
      </form>
   </body>
  
   <script type="text/javascript">
      var homeScore = document.getElementById("homeScore");
    
      homeScore.onclick = function() {
         var homeScorers = document.forms["myForm"].elements["homeScorers[]"];
         var homeLength = homeScorers.length;
      
         for(var i = 0; i < homeLength; ++i) {
            homeScorers[i].style.display = "none";
         }
      
         var score = this.value;
      
         for(var j = 0; j < score; ++j) {
            homeScorers[j].style.display = "block";
         }
      }
   </script>
  
</html>

That should be more than enough for you to finish with. You really only need to copy the home side functionality to the away side, and fiddle with making your HTML and CSS look good. I used an internal stylesheet for the test file, but you should probably use an external one. Separation of concerns, and all that.

You still have some logic to figure out, namely how to handle the values in the hidden drop downs. I'll leave that as homework.

chrisidas · July 21, 2011

Haha, hopefully i can sort it from here

Cheers for taking some time to help a newbie like me

Sign In

How to show form drop down boxes, based on form selection further up the page

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information