How to read a filename?

[dark_kaho]

I'm thinking about a problem about how to read a filename from a <a> tag.

For example:

<table>
<thead>
<tr>
<th>Title</th>
<th>Duration</th>
<th>Play</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://example.com/audio1.mp3">Audio
1</a></td>
<td>1 sec</td>
<td><span id="play1"><a href="#" onclick="playAudio(this);"><img src="Images/img1.jpg" alt="play" /></a></span></td>
</tr>
<tr>
<td><a href="http://example.com/audio2.mp3">Audio
2</a></td>
<td>1 sec</td>
<td><span id="play2"><a href="#" onclick="playAudio(this);"><img src="Images/img2.jpg" alt="play" /></a></span></td>
</tr>
</tbody>
</table>

I hope that after I click the image link 1, I can get that path like http://example.com/abc.html?filename=audio1.mp3 and so on.
But I just don't know how to write the function correctly.
I dno't know how to read the filename.
Any ideas?
Thanks so much^^

[edited by: Fotiman at 6:19 pm (utc) on Nov. 25, 2009]
[edit reason] Examplified URLs [/edit]

[Fotiman]

Welcome to WebmasterWorld!
First, lets start by stripping your code example down to the bare minimum (or at least get it close):

<a href="http://example.com/audio1.mp3">Audio 1</a>
<span id="play1"><a href="#"
  onclick="playAudio(this);"><img src="Images/img1.jpg" alt="play" /></a></span>
<a href="http://example.com/audio2.mp3">Audio 2</a>
<span id="play2"><a href="#" 
  onclick="playAudio(this);"><img src="Images/img2.jpg" alt="play" /></a></span>

Now, it looks like you've got 2 links for each audio file. The first is a link to the .mp3 file, the second is a link to nothing (but supposed to play the file). For people with JavaScript disabled, that's not very helpful, so I would start by making the "play" links also link to the .mp3 file:

<a href="http://example.com/audio1.mp3">Audio 1</a>
<span id="play1"><a href="http://example.com/audio1.mp3" 
  onclick="playAudio(this);"><img src="Images/img1.jpg" alt="play" /></a></span>
<a href="http://example.com/audio2.mp3">Audio 2</a>
<span id="play2"><a href="http://example.com/audio2.mp3" 
  onclick="playAudio(this);"><img src="Images/img2.jpg" alt="play" /></a></span>

Now your playAudio method take a reference to the HTMLLinkElement, and can get the file information from the href:

function playAudio(el) {
  var filename = el.href;
  //...
}

Now you can manipulate filename to strip out only the filename or whatever you need.

Hope that helps.

[dark_kaho]

Thanks so much!
But I still have some problems...

function playAudio(e1)
{
var filename=e1.href;
e1.href="abc.html?filename="+filename;
}

Is that I made some mistakes here?
Because I got this result.
http://example.com/abc.html?filename=http://example.com/audio1.mp3
Still can't get the filename...

[Fotiman]

Right, the href value is going to be the full path to the file. You could strip out just the filename by looking for the last "/" in the URL and taking everything after that:

var filename = el.href.substring(el.href.lastIndexOf('/')+1);

Note, I use "el" (the letter "E" and the letter "L", as in "el"ement), whereas you have "e1" (the letter "E" and the number 1).

[dark_kaho]

Oh!
I get the idea now!
Thanks so much^^