By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,451 Members | 994 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,451 IT Pros & Developers. It's quick & easy.

Add & delete drop-downs

P: n/a
Hi there,

i have a soccer-site, on which of course,
can be kept track of played matches.
Now the admin has to be able to set the number
of goals, and then select who scored what goal.

I want a system where one can put a number in
a textfield (NaN would return an error).
Say the admin enters '3'. Then three dropdown
lists appear below that field, in them are the
players.
If he turns '3' (goals) into '2', the lowest one
has to be deleted, but the upper two have to stay,
with an unchanged (already selected) value ...

Preferrably cross browser. I just can't seem to
figure out, i've tried loads of innerHTML and
document.write(), both didn't give me what i
wanted (yet).

Hope someone can help!

Greetings frizzle.

Sep 6 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
frizzle wrote:
Hi there,

i have a soccer-site, on which of course,
can be kept track of played matches.
Now the admin has to be able to set the number
of goals, and then select who scored what goal.

I want a system where one can put a number in
a textfield (NaN would return an error).
Say the admin enters '3'. Then three dropdown
lists appear below that field, in them are the
players.
If he turns '3' (goals) into '2', the lowest one
has to be deleted, but the upper two have to stay,
with an unchanged (already selected) value ...

Preferrably cross browser. I just can't seem to
figure out, i've tried loads of innerHTML and
document.write(), both didn't give me what i
wanted (yet).


Because they are completely the wrong things to be using.

I think you are better off to have the admin select the player, enter
the number of goals, then add that to some list.

The following example just checks that the number of goals is an
integer, that's all. For general web use, it should also:

- check to see if the same player is added more than once
- not let the user manually modify the results
- provide a way of removing or editing entries

But since it's just an example to get you going...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Goal scorers</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript">
function addToResults( f ){
var g = f.goals.value;
// validate that g is an integer
if ( /^\d+$/.test(g) ) {
f.scorerAndGoals.value +=
f.players[f.players.selectedIndex].text +
', ' + g + '\n';
} else {
alert ('Number of goals must be a number, e.g. 2');
}
}
</script>

</head>
<body>
<form name="demoform" action="">
<table>
<tr>
<th>Select a player</th>
<th>How many goals?</th>
<th>Click to add</th>
<th>Scorer and goals</th>
</tr>
<tr>
<td>
<select id="players">
<option>Pelle
<option>Maradonna
<option>Beckham
</select>
</td>
<td>
<input type="text" id="goals">
</td>
<td align="center">
<input type="button" value="Add to results" onclick="
addToResults(this.form);
"><br>
<input type="reset" value="Clear form">
</td>
<td>
<textarea id="scorerAndGoals"></textarea>
</td>
</tr>
</table>
</form>

</body>
</html>


--
Rob
Sep 7 '05 #2

P: n/a
Thanks for the reply,
i tried it, but this isn't completely what
i mean ... :-(

What i meant was

********* U G L Y V I S U A L M O D E *********

txt_field goals: [___________2] // should be an integer, e.g. 2

dropdown players:
goal 1: [Pele_______V]

goal 2: [Pele_______V]
|Maradonna |
|Beckham___|

****** / / U G L Y V I S U A L M O D E ******


I want to keep track of who scored what goal. I hope this
is more clear, and not to much to ask ...

Thanks,

Frizzzle.

Sep 7 '05 #3

P: n/a
frizzle wrote:
Thanks for the reply,
i tried it, but this isn't completely what
i mean ... :-(

What i meant was

********* U G L Y V I S U A L M O D E *********

txt_field goals: [___________2] // should be an integer, e.g. 2

dropdown players:
goal 1: [Pele_______V]

goal 2: [Pele_______V]
|Maradonna |
|Beckham___|

****** / / U G L Y V I S U A L M O D E ******


I want to keep track of who scored what goal. I hope this
is more clear, and not to much to ask ...

Thanks,

Frizzzle.


Sorry, I just don't like the 'enter a number' bit. The following uses a
button to add and delete goals. It needs some work to make it suitable
for the web, it's dependent on the page structure and naming
conventions, but it gives you a start:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Goal scorers</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
table { border-collapse: collapse;}
td {vertical-align: top;}
select {width: 10em; margin: 5px 0px 0px 5px;}
input {width: 10em;}
..goalCell {
text-align: right;
padding-left: 5px;
border: 1px solid green;
}
</style>

<script type="text/javascript">
// Get the last select element with id containing 'goal-'
// Goes thru elements from last to first, returns first match
function getLastGoal( f )
{
var el, els = f.elements;
var i = els.length;
while ( i-- ){
el = els[i];
if ( el.id && /goal-/.test(el.id) ) {
return el;
}
}
}

// Return the first div that is a parent of el
function getDiv ( el )
{
while ( el.parentNode && 'div' != el.nodeName.toLowerCase() ){
el = el.parentNode;
}
return ('div' == el.nodeName.toLowerCase() )? el : null;
}

function addGoal( f )
{
// Get the last goal select element
var elG = getLastGoal( f );

// Get the parent div and clone the whole div
var elD = getDiv( elG );
if ( !elD ) return; // Didn't find a parent div
var newD = elD.cloneNode(true);

// Modify the new select element's id (can't have duplicates)
var newG = newD.getElementsByTagName('select')[0];
var newId = newG.id.split('-');
newId[1] = +newId[1] + 1;
newG.id = newId[0] + '-' + newId[1];

// Modify the text
newD.firstChild.data = 'Goal ' + newId[1];

// Add the new Div
elD.parentNode.appendChild( newD );
}

function delGoal( f )
{
// Get the last goal select element
var elG = getLastGoal( f );

// If it's the last one, don't delete it
if ( 'goal-1' == elG.id ) return;

// Get the parent Div & delete last goal div
var elD = getDiv( elG );
elD.parentNode.removeChild( elD );
}

</script>
</head>
<body>
<form name="goalsScored" action="">
<table>
<tr>
<td>
<input type="button" value="Add new goal" onclick="
addGoal( this.form );
"><br>
<input type="button" value="Delete last goal" onclick="
delGoal( this.form );
"><br>
<input type="reset" value="clear form">
<td class="goalCell">
<div>Goal 1
<select id="goal-1">
<option selected>
<option>Pelle
<option>Maradonna
<option>Beckham
</select>
</div>
</td>
</tr>
</table>
</form>

</body>
</html>
--
Rob
Sep 7 '05 #4

P: n/a
Wow! Great work!
I only have one but ... :-(
Would'nt this mean there always
has to be at least 1 goal?

Frizzle.

Sep 7 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.