如何在<a>标记中</a>编写JavaScript代码

Question

I have a javascript variable soucreID and let us say

sourceID = 10;

sourceID is dynamic value and always changes so i want to pass this to following tag

<a href="edit-source.php?source=<script>document.write(sourceID)</script>">Edit</a>

But its not working,

Can any one tell me how can i write javascript value in <a href=""> tag.

Thanks in Advance.

Answer 1

Using jQuery, you could do this:

<a href="edit-source.php" class="edit-btn">Edit</a>

var id = 10;
var href = $(".edit-btn").prop("href");
$(".edit-btn").prop("href", href + "?source=" + id);

I assume you don't know the id before the code is rendered, otherwise this is rather moot.

Answer 2

In Plain JS you can do

<script>
var souceID="somesource"; // this is of course assumed
document.write('<a href="edit-source.php?source='+sourceID+'">Edit</a>')
</script>

OR

<a href="#" onclick="this.href='edit-source.php?source='+sourceID">Edit</a>

Using this code from a comment by the OP:

<div id="popuppage" data-role="popup" data-overlay-theme="a" style="max-width:250px;">    
  <ul data-role="listview" data-inset="true" data-dividertheme="d" data-theme="c" style="min-width:210px;"> 
    <li data-icon="gear" class="cust-popuplist" id="popupSourceID"> 
       <a href="#"
       onclick="
         this.href='edit-source.php?source='+
           encodeURIComponent(document.getElementById('srcvalue').value);
       ">Edit</a> 
       <input type="hidden" name="srcvalue" id="srcvalue" value="somevalue"> 
    </li> 
   </ul> 
</div>

Or how about this: No JS needed at all

<form action="edit-source.php">
<input type="hidden" name="source" value="<?php echo $srcvalue; ?>" />
<input type="submit" value="Edit" />
</form>

Answer 3

You can't put tags inside of attribute values.

This is an ugly solution. And also that will work by dumping the variable out when the page first loads. If you had the variable then then you could just use PHP to insert it.

I'm guessing you want to respond to user input so the variable should be added to the link then. You need an entirely different approach in which you set the entire href attribute at the proper time.