how to call options from select dropdown
how to call options from select dropdown
So I am making this golf stat tracking website that I will eventually make into an app, but this part is really causing me to hit a snag. Basically, I am looking to make a function that will load the pars for a course selected by a dropdown menu. However, I am not sure if I have to create many variables to achieve this or just enough to cover the span of 3 holes before the cycle starts again. 'ex. (4-3-5 and 3-5-4) are the only patterns that are able as you can only select a game of 3, 9 or 18 holes' Thanks for the help sorry if this is too complicated or hard to understand. Also disregard the error of courseSelect not being defined as this is where the question I am asking stems from.
Here is the code
<!DOCTYPE html>
<html>
<script>
function showInput()
document.getElementById('display1').innerHTML =
document.getElementById("user_input1").value;
document.getElementById('display2').innerHTML =
document.getElementById("user_input2").value;
document.getElementById('display3').innerHTML =
document.getElementById("user_input3").value;
document.getElementById('display4').innerHTML =
document.getElementById("user_input4").value;
function courseSelect()
//////if document.getElementById('mySelect').innerHTML =
</script>
<body>
<form>
<input type="text" name="name1" id="user_input1"><br>
<input type="text" name="name2" id="user_input2"><br>
<input type="text" name="name3" id="user_input3"><br>
<input type="text" name="name4" id="user_input4">
</form>
<input type="submit" onclick="showInput();"><br>
<label>Players: </label><br>
<span id='display1'></span><br>
<span id='display2'></span><br>
<span id='display3'></span><br>
<span id='display4'></span><br>
<select id="mySelect" onchange="courseSelect()">
<option disabled selected value> -- select a course -- </option>
<option value="Bossame Tournament">Bossame Tournament</option>
<option value="OSLA Open">OSLA Open</option>
<option value="The Closed Tournament">The Closed Tournament</option>
<option value="IWGA Championship">IWGA Championship</option>
<option value="The Lawnmower Classic">The Lawnmower Classic</option>
<option value="My World Match Play">My World Match Play</option>
<option value="The Seasonal Championship">The Seasonal Championship</option>
<option value="The ABC Mexican Open">The ABC Mexican Open</option>
<option value="The Pomponians Championship">The Pomponians Championship</option>
<option value="AB World Tour Championship">Anthony Burke World Tour Championship</option>
<option value="Never Be Royals Tournament">Never Be Royals Tournament</option>
<option value="The Huggy McGurber Invitational">The Huggy McGurber Invitational presented by Glakeside Resorts</option>
<option value="Thee Grind">Thee Grind</option>
<option value="Glakeside Classic">Glakeside Classic</option>
<option value="Resorts World Bimini Challenge">Resorts World Bimini Challenge</option>
<option value="World Golf Classic">World Golf Classic</option>
</select>
<p id="course"></p>
<table id="scorecard"></table>
<table>
</table>
</body>
</html>
@HussainNiazi thanks this is how the code appears in the model
– drent2001
Sep 5 '18 at 23:24
I am not able to understand your requirement, probably because I don't know anything about golf. You may either explain in a little bit more detail or wait for someone with golf knowledge to help you out. However, I am guessing that you want to create variables or elements dynamically? If that is the case then you can use a javascript hash. Or you can create elements dynamically following this tutorial w3schools.com/js/js_htmldom_nodes.asp
– Hussain Niazi
Sep 5 '18 at 23:47
Perhaps you should checkout this answer.
– El_Cacto
Sep 6 '18 at 0:13
@HussainNiazi ok i want that when i select an option from the dropdown, that it will load a string of numbers that are assigned to each option hope that makes it clearer
– drent2001
Sep 6 '18 at 0:24
2 Answers
2
<select><option> to <table><td>
<select><option>
<table><td>
The demo provided below demonstrates how to:
<option>
<td>
<td>
Also, the overall OP (i.e. Original Post) code provided has been changed to show how the use of for loops and NodeLists/HTMLCollections can be more efficient than the repetitive use of single references.
for
<option>
If I understood correctly you want a list of par ratings for each hole in a golf course selected in a <select>. You did not provide these numbers so I added a new course (at index 1 of the <option>s.) In the demo there's only one <option> that's modified you'll have to provide the data for the rest of them yourself:
<select>
<option>s
<option>
<option value="72" data-par='4,5,4,3,4,3,4,5,4,4,4,3,5,4,5,3,4,4' data-yards='445,575,350,240,455,180,450,570,460,495,505,155,510,440,530,170,440,465'>Masters Championship</option>
<option value="72" data-par='4,5,4,3,4,3,4,5,4,4,4,3,5,4,5,3,4,4' data-yards='445,575,350,240,455,180,450,570,460,495,505,155,510,440,530,170,440,465'>Masters Championship</option>
Normally, this data is in a database and sent in the form of a JSON, but because of the static nature of the data (golf courses don't change that often) this is a feasible way of listing golf course stats.
<option>
value attribute is "72" for all golf courses because it's the most common par rating for 18 holes (I don't know of any professional tournaments that play 3 or 9.) To get this value:
value
"72"
.value
var selectElement = document.getElementById('ID of select');var selectValue = selectElement.value;
var selectElement = document.getElementById('ID of select');
var selectValue = selectElement.value;
data-* attributes, such as data-par and data-yards, can have any arbitrary String value but it isn't as simple as value to access:
data-*
data-par
data-yards
value
<options>
<select>
<select>
.options
var optionsList = selectElement.options;
var optionsList = selectElement.options;
Note: I added yards per hole because it's always included with par ratings.
Then reference the selected <option>:
<option>
var optionData = optionList[selectElement.selectedIndex];
var optionData = optionList[selectElement.selectedIndex];
Next, use .dataset method and suffix it with the suffix of data-par and data-yards (i.e. par and yards):
.dataset
data-par
data-yards
par
yards
var dataPar = optionData.dataset.par;var dataYards = optionData.dataset.yards;
var dataPar = optionData.dataset.par;
var dataYards = optionData.dataset.yards;
Getting the text inside <option>Text Content</option>, is similar to the previous procedure:
<option>
</option>
optionData
<option>
var optionText = optionData.text;
var optionText = optionData.text;
At this point you have four strings of data:
selctValue = "72"
dataPar = "4,5,4,3,4,3,4,5,4,4,4,3,5,4,5,3,4,4"
dataYards = "445,575,350,240,455,180,450,570,460,495,505,155,510,440,530,170,440,465"
optionText = "Masters Championship"
Of the four strings of data, group 2. dataPar and dataYards need to be converted into arrays. To move group 1. selectValue to a <td> and group 3. optionText to a <caption>:
dataPar
dataYards
selectValue
<td>
optionText
<caption>
var coursePar = document.getElementById('ID of td');var courseTitle = document.querySelector('caption');coursePar.innerHTML = selextedValue;;courseTitle.textContent = optionText;
var coursePar = document.getElementById('ID of td');
var courseTitle = document.querySelector('caption');
coursePar.innerHTML = selextedValue;
courseTitle.textContent = optionText;
Note: In this case .textContent and .innerHTML properties are interchangeable, but it is important to know how they are different so refer to the Reference section for details.
.textContent
.innerHTML
<option>
There are two data strings that appear as a series of numbers, but they are not:
dataPar = "4,5,4,3,4,3,4,5,4,4,4,3,5,4,5,3,4,4"dataYards = "445,575,350,240,455,180,450,570,460,495,505,155,510,440,530,170,440,465"
dataPar = "4,5,4,3,4,3,4,5,4,4,4,3,5,4,5,3,4,4"
dataYards = "445,575,350,240,455,180,450,570,460,495,505,155,510,440,530,170,440,465"
If used in this state, it would show up as the same literal text in each <td>:
<td>
A string: "445,575,350,240"<td>445,575,350,240</td>
"445,575,350,240"
<td>445,575,350,240</td>
If converted into an Array of Strings each number is considered separately:
An array: ["445","575","350","240"]<td>445</td><td>575</td><td>350</td><td>240</td>
["445","575","350","240"]
<td>445</td><td>575</td><td>350</td><td>240</td>
In this case use the array method split() to convert a String by targeting a delimiter (i.e. the commas: ,):
split()
,
array = ["1","2","3"]
var parArray = dataPar.split(',');var yardsArray = dataYards.split(',');
var parArray = dataPar.split(',');
var yardsArray = dataYards.split(',');
At this point there are two Arrays:
An array of par ratings for 18 holes:
parArray = ["4","5","4","3","4","3","4","5","4","4","4","3","5","4","5","3","4","4"]
parArray = ["4","5","4","3","4","3","4","5","4","4","4","3","5","4","5","3","4","4"]
An array of yardages for 18 holes:
yardsArray = ["445","575","350","240","455","180","450","570","460","495","505","155","510","440","530","170","440","465"]
yardsArray = ["445","575","350","240","455","180","450","570","460","495","505","155","510","440","530","170","440","465"]
<td>s
<td>s
For each array of data a row (i.e. <tr>) of cells (i.e. <td>) need to be referenced in an array. Here's the procedure laid out in a few lines:
<tr>
<td>
Collect all <td> of a specific <tr> into a NodeList:
<td>
<tr>
var parRow = document.getElementById('trOfPar');var NodeListOfParTD = parRow.querySelectorAll('td');
var parRow = document.getElementById('trOfPar');
var NodeListOfParTD = parRow.querySelectorAll('td');
Convert NodeList to an array:
var ArrayOfParTD = Array.from(NodeListOfParTD);
var ArrayOfParTD = Array.from(NodeListOfParTD);
For the sake of expediency the second array is: ArrayOfYardsTD.
ArrayOfYardsTD
At this point there are four arrays:
Two arrays from the <option> attributes data-par and data-yards:
<option>
data-par
data-yards
parArray = ["4","5","4","3","4","3","4","5","4","4","4","3","5","4","5","3","4","4"]yardsArray = ["445","575","350","240","455","180","450","570","460","495","505","155","510","440","530","170","440","465"]
parArray = ["4","5","4","3","4","3","4","5","4","4","4","3","5","4","5","3","4","4"]
yardsArray = ["445","575","350","240","455","180","450","570","460","495","505","155","510","440","530","170","440","465"]
Two arrays of <td>s from two separate <tr>s:
<td>s
<tr>s
arrayOfParTD = [<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>]arrayOfYardsTD = [<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>]
arrayOfParTD = [<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>]
arrayOfYardsTD = [<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>,<td></td>]
<option>s
<td>
To manipulate arrays a for loop is usually adequate. To manipulate arrays in a less verbose and more efficient way, array methods can be used instead. The array method .forEach() will take an array and run a function on each array element:
for
.forEach()
tdArray
arrayOfParTD
arrayOfYardsTD
dataArray
parArray
yardsArray
tdArray.forEach(function(td, index)
td.textContent = dataArray[index];);
tdArray.forEach(function(td, index)
td.textContent = dataArray[index];
);
The final result should be:
th,tdborder:1px solid #000;text-align:center
thtext-align:left
<table>
<tr id="trOfPar"><th>Par: </th><td>4</td><td>5</td><td>4</td><td>3</td><td>4</td><td>3</td><td>4</td><td>5</td><td>4</td><td>4</td><td>4</td><td>3</td><td>5</td><td>4</td><td>5</td><td>3</td><td>4</td><td>4</td></tr>
<tr id='trOfYards'><th>Yards: </th><td>445</td><td>575</td><td>350</td><td>240</td><td>455</td><td>180</td><td>450</td><td>570</td><td>460</td><td>495</td><td>505</td><td>155</td><td>510</td><td>440</td><td>530</td><td>170</td><td>440</td><td>465</td></tr>
</table>
The code presented in the previous sections is not the same as the code in the demo but similar enough hopefully. Each line of JavaScript is commented.
function listPlayers()
/*
Collect all <input>s and <td class="player">s
into the NodeLists inputs and outputs respectively.
*/
var inputs = document.querySelectorAll('input');
var outputs = document.querySelectorAll('.player');
/*
For each iteration of outputs set its text to the
corresponding index of inputs value.
*/
for (let i = 0; i < outputs.length; i++)
outputs[i].textContent = inputs[i].value;
return false;
function courseSelect()
// <select id='tournaments'>
var select = document.getElementById('tournaments');
// HTMLCollection of all <option>s in select#tornaments
var opts = select.options;
// <caption>
var title = document.querySelector('caption');
// The last two <td> on <table id='course'>
var pT = document.getElementById('pT');
var yT = document.getElementById('yT');
/*
Set the inside HTML of <td id='pT'> to a String:
...that comprises of the text: "Course Par: "...
...followed by the value of <select id='tournaments'>
*/
pT.innerHTML = "Course Par: " + select.value;
/*
Set the text of <caption> to the text of the selected
<option>THIS TEXT</option>
*/
title.textContent = opts[select.selectedIndex].text;
/*
Get the values of [data-par] and [data-yards] from the
selected <option>
*/
var dataPar = opts[select.selectedIndex].dataset.par;
var dataYards = opts[select.selectedIndex].dataset.yards;
/*
Convert each of the Strings from [data-par] and
[data-yards] into arrays of Strings.
*/
// Array of par ratings of each hole
var parArray = dataPar.split(',');
// Array of yardages of each hole
var yardsArray = dataYards.split(',');
/*
Collect the <td>s of <tr id='par'> and <tr id='yards'>
into separate NodeLists then convert each into an Array.
*/
var parCells = Array.from(document.querySelectorAll('#par td'));
var yardsCells = Array.from(document.querySelectorAll('#yards td'));
/*
Fill each cell of tr#par with a value from the array of
par ratings according to matching index.
*/
parCells.forEach(function(par, index)
par.textContent = parArray[index];
);
/*
Fill each cell of tr#yards with a value from the array
of yardages according to matching index.
*/
yardsCells.forEach(function(yards, index)
yards.textContent = yardsArray[index];
);
/*
Convert each String value of the array of yardages into
a real Number
*/
var yardage = yardsArray.map(function(yrd)
return parseInt(yrd, 10);
);
/*
Get the sum of all of the Numbers in the new array.
Note: the function addArray() is located outside of this
function.
*/
var totalYards = yardage.reduce(addArray);
// Set the total yards in td#yT
yT.innerHTML = "Yardage: " + totalYards;
return false;
/*
Utility function used to add two numbers.
The return value is used as a parameter to a
Array.reduce() method that runs an array's values
accumulatively.
*/
function addArray(total, number)
return total + number;
th,
td
border: 1px solid #000
caption
font-size: 1.2rem;
font-weight: 900
#course th
text-align: left
#course td,
.c
text-align: center
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id='golf'>
<fieldset id='players'>
<legend>Players</legend>
<input type="text" name="name1" id="p1"><br>
<input type="text" name="name2" id="p2"><br>
<input type="text" name="name3" id="p3"><br>
<input type="text" name="name4" id="p4"><br>
<button id='btn1' type="button" onclick='listPlayers()'>Done</button>
</fieldset>
<fieldset id='games'>
<legend>Tournaments</legend>
<select id="tournaments" onchange="courseSelect()">
<option disabled selected value=""> -- select a course -- </option>
<option value="72" data-par='4,5,4,3,4,3,4,5,4,4,4,3,5,4,5,3,4,4' data-yards='445,575,350,240,455,180,450,570,460,495,505,155,510,440,530,170,440,465'>Masters Championship</option>
<option value="72" data-par='' data-yards=''>Bossame Tournament</option>
<option value="72" data-par='' data-yards=''>OSLO Open</option>
<option value="72" data-par='' data-yards=''>The Closed Tournament</option>
<option value="72" data-par='' data-yards=''>IWGA Championship</option>
<option value="72" data-par='' data-yards=''>The Lawnmower Classic</option>
<option value="72" data-par='' data-yards=''>My World Match Play</option>
<option value="72" data-par='' data-yards=''>The Seasonal Championship</option>
<option value="72" data-par='' data-yards=''>The ABC Mexican Open</option>
<option value="72" data-par='' data-yards=''>The Pomponians Championship</option>
<option value="72" data-par='' data-yards=''>Anthony Burke World Tour Championship</option>
<option value="72" data-par='' data-yards=''>Never Be Royals Tournament</option>
<option value="72" data-par='' data-yards=''>The Huggy McGurber Invitational presented by Glakeside Resorts</option>
<option value="72" data-par='' data-yards=''>Thee Grind</option>
<option value="72" data-par='' data-yards=''>Glakeside Classic</option>
<option value="72" data-par='' data-yards=''>Resorts World Bimini Challenge</option>
<option value="72" data-par='' data-yards=''>World Golf Classic</option>
</select>
<br>
<hr>
<table id="leaderboard" width="100%">
<caption></caption>
<thead>
<tr>
<th width='55%'>Golfer</th>
<th width='5%'>toPar</th>
<th width='5%'>Thru</th>
<th width='5%'>Today</th>
<th width='5%'>R1</th>
<th width='5%'>R2</th>
<th width='5%'>R3</th>
<th width='5%'>R4</th>
<th width='10%'>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class='player'></td>
<td class='c'></td>
<td class='c'>F</td>
<td class='c'></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class='player'></td>
<td class='c'></td>
<td class='c'>F</td>
<td class='c'></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class='player'></td>
<td class='c'></td>
<td class='c'>F</td>
<td class='c'></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class='player'></td>
<td class='c'></td>
<td class='c'>F</td>
<td class='c'></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table id='course'>
<tbody>
<tr id='holes'>
<th>Hole: </th>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
<td> 5 </td>
<td> 6 </td>
<td> 7 </td>
<td> 8 </td>
<td> 9 </td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr id='par'>
<th>Par: </th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id='yards'>
<th>Yards: </th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Totals: </th>
<td id='pT' colspan='9'></td>
<td id='yT' colspan='9'></td>
</tr>
</tfoot>
</table>
</fieldset>
</form>
</body>
</html>
one other thing pertaining to the yardage, so since the hole positions on the green change how would i go about changing the yardage without having to edit the source code? would i just use a div class to make the table editable?
– drent2001
Sep 6 '18 at 19:26
Placing an editable div inside the td would work well. If you do that, don't forget to change selectors so that they target the divs instead: ex.
yardsRow.querySelectorAll("td div");– zer00ne
Sep 6 '18 at 20:22
yardsRow.querySelectorAll("td div");
To write the fully functional program we will need to know the game rules.
According to the info you have given us, we can write an abstract model of a working program. Let your users or players select the number of holes e.g. 3,9,18. We can assume that two players can compete for the scores / points, the one with the high score or points wins the game. Each player will score points according to the game rules. Your form should be user friendly. Help the user by labelling the user input. You have given us four
input text box for the players. So we can assume that four players are competing instead of two. Default values can be misleading, it is better to define the value of your button, your users will know what to expect when they click the button. You have given us the list of tournaments and championships. That's quite helpful in analysing this project. The solution can be two folds. First you will need the data about the games. i.e. scores, players, tournaments, dates. Once you have the data, you can use it to generate useful information like stats. To achieve that goal you will need full stack technologies. For example, html, JavaScript, PHP or Java or Python, MySQL or PostgreSQL. You can always use variables on your front end, but the lifetime of a variable is short and happy. Once the user exit the program the info is gone. On the other hand if you only want to make “ this golf stat tracking website ”. The starting point will be to define the game rules. Create or design the user interface. Design or create database. Collect data. Store data. Retrieve data. Process data. Display information. Good luck!
//
<!DOCTYPE html>
<!--
index.html
-->
<html>
<head>
<title>Golf stat tracking.</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
var course = "C1";
var player1 = "P1";
var player2 = "P2";
var player3 = "P3";
var player4 = "P4";
var probability = ;
function showInput()
document.getElementById('display1').innerHTML = document.getElementById("user_input1").value;
document.getElementById('display2').innerHTML = document.getElementById("user_input2").value;
document.getElementById('display3').innerHTML = document.getElementById("user_input3").value;
document.getElementById('display4').innerHTML = document.getElementById("user_input4").value;
player1 = document.getElementById("user_input1").value;
player2 = document.getElementById("user_input2").value;
player3 = document.getElementById("user_input3").value;
player4 = document.getElementById("user_input4").value;
stats(course);
function courseSelect()
///////////////////////////////////////////////////////////
//////if document.getElementById('mySelect').innerHTML = //
///////////////////////////////////////////////////////////
course = document.getElementById('mySelect').value;
//alert(course);
document.getElementById('p1').value = player1;
document.getElementById('p2').value = player2;
document.getElementById('p3').value = player3;
document.getElementById('p4').value = player4;
document.getElementById('c1').value = course;
stats(course);
function stats(cor)
var cors = cor;
var comment = [
"Win or lose.",
"My favorate player.",
"Against the wind.",
"Best of the best.",
"Only time will tell.",
"The champ."
];
var players = [
player1, player2,
player3, player4
];
var coml = comment.length;
var pll = players.length;
var ranc = (Math.random() * (coml - 1));
var ranc2 = (Math.random() * (coml - 1));
var ranp = (Math.random() * (pll - 1));
var ranp2 = (Math.random() * (pll - 1));
for(var i = 0; i < coml; i++)
ranc = (Math.random() * (coml - 1));
ranc2 = (Math.random() * (coml - 1));
ranp = (Math.random() * (pll - 1));
ranp2 = (Math.random() * (pll - 1));
//alert(coml + " " + ranc + " " + Math.round(ranc) + " " + ranc2 + " " + Math.round(ranc2) );
document.getElementById('pl1').value = players[Math.round(ranp)];
document.getElementById('pl2').value = players[Math.round(ranp2)];
var pp1 = document.getElementById('pl1').value;
var pp2 = document.getElementById('pl2').value;
probability.push(pp1);
var prl = probability.length;
var pp1p = 0;
var pp2p = 0;
for(var i = 0; i < prl; i++)
if(pp1 === probability[i])
pp1p++;
else if (pp2 === probability[i])
if(pp1 !== pp2)
pp2p++;
document.getElementById('sc').value = cors;
document.getElementById('comm1').value = "p("+pp1p +"/" + prl + ") " + comment[Math.round(ranc)];
document.getElementById('comm2').value = "p("+pp2p +"/" + prl + ") " + comment[Math.round(ranc2)];
document.getElementById('sco1').value = ranc;
document.getElementById('sco2').value = ranc2;
if (pp1 === pp2)
document.getElementById('pl1').value = player1;
document.getElementById('pl2').value = player2;
document.getElementById('comm1').value = comment[Math.round(ranc)];
document.getElementById('comm2').value = comment[Math.round(ranc2)];
</script>
</head>
<body>
<div>Golfers:</div>
<form>
Name1
<input type="text" name="name1" id="user_input1"><br>
Name2
<input type="text" name="name2" id="user_input2"><br>
Name3
<input type="text" name="name3" id="user_input3"><br>
Name4
<input type="text" name="name4" id="user_input4">
</form>
<input type="submit" value="OK" onclick="showInput();"><br>
<label>Players: </label><br>
<span id='display1'></span><br>
<span id='display2'></span><br>
<span id='display3'></span><br>
<span id='display4'></span><br>
<hr>
<br>
Course:
<select id="mySelect" onchange="courseSelect()">
<option disabled selected value> -- select a course -- </option>
<option value="Bossame Tournament">Bossame Tournament</option>
<option value="OSLA Open">OSLA Open</option>
<option value="The Closed Tournament">The Closed Tournament</option>
<option value="IWGA Championship">IWGA Championship</option>
<option value="The Lawnmower Classic">The Lawnmower Classic</option>
<option value="My World Match Play">My World Match Play</option>
<option value="The Seasonal Championship">The Seasonal Championship</option>
<option value="The ABC Mexican Open">The ABC Mexican Open</option>
<option value="The Pomponians Championship">The Pomponians Championship</option>
<option value="AB World Tour Championship">Anthony Burke World Tour Championship</option>
<option value="Never Be Royals Tournament">Never Be Royals Tournament</option>
<option value="The Huggy McGurber Invitational">The Huggy McGurber Invitational presented by Glakeside Resorts</option>
<option value="Thee Grind">Thee Grind</option>
<option value="Glakeside Classic">Glakeside Classic</option>
<option value="Resorts World Bimini Challenge">Resorts World Bimini Challenge</option>
<option value="World Golf Classic">World Golf Classic</option>
</select>
<div>
<h1>Score Card</h1>
<form action='pathto/golfers.php' method='POST'>
<table>
<tr><td>Holes:</td>
<td><select name="holes">
<option selected="selected" value="3">3</option>
<option value="9">9</option>
<option value="18">18</option>
</select>
</td>
</tr>
<tr>
<td>Player</td><td>Score</td><td>Comment</td>
</tr>
<tr><td><input type="text" name="p1" id="p1"></td>
<td><input type="text" name="sc1"></td>
<td><input type="text" name="com1"></td>
</tr>
<tr><td><input type="text" name="p2" id="p2"></td>
<td><input type="text" name="sc2"></td>
<td><input type="text" name="com2"></td>
</tr>
<tr><td><input type="text" name="p3" id="p3"></td>
<td><input type="text" name="sc3"></td>
<td><input type="text" name="com3"></td>
</tr>
<tr><td><input type="text" name="p4" id="p4"></td>
<td><input type="text" name="sc4"></td>
<td><input type="text" name="com4"></td>
</tr>
<tr>
<td>Date:</td>
<td><input type="date" name="date"></td>
</tr>
<tr>
<td>Time:</td>
<td><input type="time" name="time"></td>
</tr>
<tr>
<td>Course:</td>
<td><input type="text" name="c1" id="c1" readonly=""></td>
</tr>
<tr>
<td><input type="submit" value="OK"></td>
</tr>
</table>
</form>
</div>
<div>
<h1>STATS</h1>
<table>
<tr>
<td>Player</td><td>Stats</td><td>Comment</td>
</tr>
<tr><td><input type="text" name="pl1" id="pl1" readonly=""></td>
<td><input type="text" name="sco1" id="sco1" readonly=""></td>
<td><input type="text" name="comm1" id="comm1"></td>
</tr>
<tr><td><input type="text" name="pl2" id="pl2" readonly=""></td>
<td><input type="text" name="sco2" id="sco2" readonly=""></td>
<td><input type="text" name="comm2" id="comm2"></td>
</tr>
<tr><td><input type="text" name="pl3" id="pl3" readonly=""></td>
<td><input type="text" name="sco3" readonly=""></td>
<td><input type="text" name="comm3" id="comm3"></td>
</tr>
<tr><td><input type="text" name="pl4" id="pl4" readonly=""></td>
<td><input type="text" name="sco4" readonly=""></td>
<td><input type="text" name="comm4" id="comm4"></td>
</tr>
<tr>
<td>Date:</td>
<td><input type="date" name="sdate" readonly=""></td>
</tr>
<tr>
<td>Time:</td>
<td><input type="time" name="stime" readonly=""></td>
</tr>
<tr>
<td>Course:</td>
<td><input type="text" name="scourse" id="sc" readonly=""></td>
</tr>
</table>
</div>
<br>
<hr>
<br>
</body>
</html>
//
this helps as well thanks
– drent2001
Sep 7 '18 at 13:22
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
You need to first ensure there are no syntax errors in your code. I can see the select element code is missing </options> tags for most options. Please fix all syntax errors and run the the code snippet to ensure the problem is replicated exactly as you are facing in your development model. Thanks.
– Hussain Niazi
Sep 5 '18 at 23:13