Can a function swap form field contents?

D

Dooza

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
 
L

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?
Click to expand...

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>
 
R

RobG

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 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?
Click to expand...

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>
 
D

Dooza

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
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?
Click to expand...


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>
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Building a program that can enter data into a field 3
Can someone pls help me with a little algorithm script 1
Digital Signature field form in PDF generated document from HTML 5
Issue with passing fetched data to POST form. How can I? 0
Bootstrap contact form not working 2
How can I arrange a series of radio buttons? 2
Can anyone code this for me ? 1
How can I create a table using the input element? 1

Members online

No members online now.
Total: 206 (members: 0, guests: 206)
Robots: 287

Forum statistics

Threads
474,432
Messages
2,571,680
Members
48,796
Latest member
Greg L.

Latest Threads

Top