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

Can a function swap form field contents?

P: n/a
Hi there,
I was wondering if anyone had come across some javascript that would
allow me to have a chart of say 20 music tracks, and be able to move
each track up and down the chart using up/down links? I am sure I saw
one about 3 years ago.

Consider this:
A table with a form around it. Each row of the table is numbered 1 to
20. There will be a form field on each row for Artist, Title, Label, Mix
and Genre. There will also be an up and down arrow to move the contents
of each row up and down.

I need to create 2 javascript functions. 1 to swap the contents upwards,
and one to swap downwards.

The link to go up or down will pass the row number to the function, and
the fields that need swapping. The function will then take the values
and swap them over.

Is this possible? And will it work cross-browser cross-platform? Any ideas?

Thank you!

Steve
Sep 14 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Lee
Dooza said:

Hi there,
I was wondering if anyone had come across some javascript that would
allow me to have a chart of say 20 music tracks, and be able to move
each track up and down the chart using up/down links?


I've never come across one, but it's pretty simple, using very
standard cross-browser scripting:

<html>
<head>
<title>Demo</title>
<script type="text/javascript">
function move(f,dir,pos) {
var artist=f.artist[pos].value;
var title=f.title[pos].value;
f.artist[pos].value=f.artist[pos+dir].value;
f.title[pos].value=f.title[pos+dir].value;
f.artist[pos+dir].value=artist;
f.title[pos+dir].value=title;
}
</script>
<body>
<form>
<table>
<tr><th>#</th><th>Artist</th><th>Title</th><th>&nbsp;</th></tr>
<tr>
<td>1</td>
<td><input name="artist" value="Alpha"></td>
<td><input name="title" value="Apple"></td>
<td><input type="button" value="down" onclick="move(this.form,1,0)"></td>
</tr>
<tr>
<td>2</td>
<td><input name="artist" value="Beta"></td>
<td><input name="title" value="Banana"></td>
<td><input type="button" value="down" onclick="move(this.form,1,1)">
<input type="button" value="up" onclick="move(this.form,-1,1)"></td>
</tr>
<tr>
<td>3</td>
<td><input name="artist" value="Gamma"></td>
<td><input name="title" value="Grape"></td>
<td><input type="button" value="up" onclick="move(this.form,-1,2)"></td>
</tr>
</table>
</form>

Sep 14 '05 #2

P: n/a
Dooza wrote:
Hi there,
I was wondering if anyone had come across some javascript that would
allow me to have a chart of say 20 music tracks, and be able to move
each track up and down the chart using up/down links? I am sure I saw
one about 3 years ago.

Consider this:
A table with a form around it. Each row of the table is numbered 1 to
20. There will be a form field on each row for Artist, Title, Label, Mix
and Genre. There will also be an up and down arrow to move the contents
of each row up and down.

I need to create 2 javascript functions. 1 to swap the contents upwards,
and one to swap downwards.

The link to go up or down will pass the row number to the function, and
the fields that need swapping. The function will then take the values
and swap them over.

Is this possible? And will it work cross-browser cross-platform? Any ideas?


Here's one that just swaps rows of a table:

<script type="text/javascript">

function moveR( el, x )
{
while ( el.parentNode && 'tr' != el.nodeName.toLowerCase() ){
el = el.parentNode;
}
var t = el.parentNode;
var i = el.rowIndex + x;
if ( i < 0 ) i += t.rows.length;
if ( i == t.rows.length ) i = 0;
t.replaceChild(t.removeChild(el), t.insertRow(i));
}

</script>

<table>
<tr>
<td>
<input type="button" value="Move up" onclick="moveR(this, -1);">
<input type="button" value="Move down" onclick="moveR(this, 1);">
</td>
<td>row 0</td>
</tr>
<tr>
<td>
<input type="button" value="Move up" onclick="moveR(this, -1);">
<input type="button" value="Move down" onclick="moveR(this, 1);">
</td>
<td>row 1</td>
</tr>
<tr>
<td>
<input type="button" value="Move up" onclick="moveR(this, -1);">
<input type="button" value="Move down" onclick="moveR(this, 1);">
</td>
<td>row 2</td>
</tr>
</table>

--
Rob
Sep 14 '05 #3

P: n/a
Hi Lee,
Thats almost spot on. There are some hidden form fields that are need
too, but I can see where I can add them into the function. Thank you
very much for your help!

Steve

Lee wrote:
Dooza said:
Hi there,
I was wondering if anyone had come across some javascript that would
allow me to have a chart of say 20 music tracks, and be able to move
each track up and down the chart using up/down links?

I've never come across one, but it's pretty simple, using very
standard cross-browser scripting:

<html>
<head>
<title>Demo</title>
<script type="text/javascript">
function move(f,dir,pos) {
var artist=f.artist[pos].value;
var title=f.title[pos].value;
f.artist[pos].value=f.artist[pos+dir].value;
f.title[pos].value=f.title[pos+dir].value;
f.artist[pos+dir].value=artist;
f.title[pos+dir].value=title;
}
</script>
<body>
<form>
<table>
<tr><th>#</th><th>Artist</th><th>Title</th><th>&nbsp;</th></tr>
<tr>
<td>1</td>
<td><input name="artist" value="Alpha"></td>
<td><input name="title" value="Apple"></td>
<td><input type="button" value="down" onclick="move(this.form,1,0)"></td>
</tr>
<tr>
<td>2</td>
<td><input name="artist" value="Beta"></td>
<td><input name="title" value="Banana"></td>
<td><input type="button" value="down" onclick="move(this.form,1,1)">
<input type="button" value="up" onclick="move(this.form,-1,1)"></td>
</tr>
<tr>
<td>3</td>
<td><input name="artist" value="Gamma"></td>
<td><input name="title" value="Grape"></td>
<td><input type="button" value="up" onclick="move(this.form,-1,2)"></td>
</tr>
</table>
</form>

Sep 15 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.