469,916 Members | 2,432 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,916 developers. It's quick & easy.

Can a function swap form field contents?

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
3 2131
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
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
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.

Similar topics

2 posts views Thread by Gary | last post: by
3 posts views Thread by idle | last post: by
1 post views Thread by jayfriend | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.