Jump to content

Recommended Posts

I have a form on my website to submit results from a football match.

 

The current options i have in my form are 'home goals' and 'away goals', which just have drop down menus so the user can select the number of goals scored.

 

Is it possible to have another option underneath so that the user can click to add a goal scorer.

 

For example. If the score is 2-0, the user cliks 'add goalscorer', then a drop down box appears with all the players in the team. When they have selected the goal scorer, they have an option to add another scorer.

 

The code i use on another page which displays a drop down box of players in the team is

 <?php $sql = mysql_query("SELECT * FROM players WHERE teamname='$userTeam'");

echo '<select name="playername" id="playername">';
while($row = mysql_fetch_array($sql)){
$playername = $row['playername'];
?> 

 

I dont want to have like 10 boxes on each side, i only want them to appear when the user asks them to.

 

Is it possible to do this in PHP or would i need to use JavaScript?

 

 

Unless you want to have the page refresh, you'll need to use JavaScript.  Remember - PHP runs on the server, while JavaScript runs in the browser.  By the time your PHP script's output is rendered in the browser, it's done executing.  There's no way for it to respond to the user unless another HTTP request is sent, which would invoke the entire script again.

Ah right. I wouldnt mind the page reloading if there was a way to do that?

 

To be honest, from a design standpoint, using JavaScript would actually be a lot better.  It gives the user a seamless experience, and would be trivial to execute.  Easier than doing it just in PHP.

 

For PHP-only, you'll need the form to submit to itself, checking to see which side has a score.  Then, you'd need to redisplay the form, with drop down boxes for the right team, depending on the score.

 

With JavaScript, it's easier because you can create the goal scorer drop downs immediately, on the first page load, and simply hide them with CSS.  When a goal number drop down's onchange event fires, you can grab its value and unhide the correct number of goal scorer drop downs on the fly.

 

---

 

Regardless, you'll need to pass in the goal scorer's data as an array of values on each side.  So, each goal scorer drop down you create should have a name along the lines of <select name="team1[]" >.

It wouldn't be too difficult.  You'll need to learn some of the basics, but, since JavaScript is already ubiquitous and becoming ever more important in the industry (especially with HTML 5's improvements), it's a core language to learn.  No time like the present to get your feet wet. :)

 

The biggest hurdles are:

 

1. Making sure the script doesn't execute before the HTML is rendered.  JavaScript runs fast and tends to be greedy.  One of the most common mistakes newbies make is putting their scripts in the <head></head> element without ensuring that the DOM (Document Object Model - your HTML document, plus a simple API to traverse/manipulate it) is loaded.  The easiest way around it?  Place your <script></script> tags at the end of your HTML, before the closing </html> tag.

 

2. Using inline JavaScript.  A lot of tutorials show stuff like:

 

<select name="blah" onchange="someFunc(someVal);">

 

Don't do it like that.  Place all your JavaScript code in <script></script> tags, like:

 

<!doctype html>
<html>
   <head>
      <title>Example</title>
   </head>

   <body>
      <!-- stuff -->
   </body>

   <script type="text/javascript">
      // JS code
   </script>

</html>

 

Why?  It makes it easier to write/test/maintain/debug/edit your code, and it keeps your components separate from one another.  Well-formed applications keep their various components (PHP, CSS, HTML, JavaScript, etc.) separate from one another, communicating only through rigid, explicit lines of communication.  Mashing them together quickly gets messy.  Might as well learn best practice from the start.

 

3. For your specific case, the hiding/unhiding of the drop downs is the biggest problem.  You'll need to obtain the value of the goals, then unhide the right number of goal scorer drop downs.  There's a wrinkle here - what if the user changes the score after goal scorer values have been selected?  You'll be dealing with arrays, and array offsets here.

 

So, do what you can, and if you have an issue, write a question in our JavaScript sub-forum, with the code you have.  I'll be able to give better guidance after seeing what you've come up with.

 

EDIT: Best resource to start from: https://developer.mozilla.org/en-US/learn/javascript

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.