CODEWITHSUNDEEP
javascriptjquery
Davo
Davo

Reputation: 181

Place JS Variable in my modal's HREF link

I have a JS variable showing properly in an alert window. I am trying to place the same value in my href link on the modal that immediately follows the alert.

On the main page I have a script that shows the value in an alert box - It gets the clicked_id value from here:

<span onclick='executeChildSupport(this.id)'><a href='#' data-toggle='modal'><i class='fa fa-th' aria-hidden='true'></i></a></span>

This is the JS script that catches the clicked_id and shows in the alert box

 function executeChildSupport(clicked_id) {
    $(this).tooltip('hide');
    event.currentTarget.innerHTML = "<i class='fa fa-th' aria-hidden='true' style='margin-left:10px'></i>";
    alert(clicked_id);
    $('#supportShare').modal('show');
    return false
  }

Following the alert, a modal is then shown, I am trying to place the "clicked_id" JS variable that was shown in the alert also in the modal's page where there is an HREF string as shown below (where it says "document.write(clicked_id)")

<a href="../_support/tip.php?id=" target="_blank" class="btn btn-primary"><i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i><br>LINK HERE <script>document.write(clicked_id);</script></a>

Any suggestions?

HERE IS THE MODAL CODE (BODY AREA ONLY - I believe that is all that is needed by the request)

<div class="modal-body" style="padding: 40px;color:#fff">
<table border="0" style="width:100%">
<tr>
<td colspan="3" style="padding:8px 3px 3px 2px">
<a href="../_support/tip.php?id=" target="_blank" class="btn btn-primary" style="background-color:#171717;width:100%;border:none;padding:30px">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i><br>LINK <script>document.write(+clicked_id+);</script></a>
</td>
</tr>
</table>
</div>

What about this direction?

<a href="javascript:document.write('../_support/tip.php?id='+clicked_id'); target="_blank">LINK</a>

Upvotes: 0

Views: 76

Answers (1)

Al-amin Nowshad
Al-amin Nowshad

Reputation: 70

If I've understood your query then you can follow two ways, (all codes below are not absolute working code, these are given for understanding, you may want to change them as you want)

not-recommended way is to use a global variable then using it in your link example: 

var current_id = null;
......
alert(clicked_id);
current_id = clicked_id;
....

Then doing

<a href="../_support/tip.php?id=" target="_blank" class="btn btn-primary">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i>
<br>
LINK HERE 
<script>document.write(current_id);</script>
</a>

Recommended Way is to access and change the value of the dom after alert example: 

......
alert(clicked_id);
$('#clicked_id').text(clicked_id);
$('#dynamic_link').attr('href', '../_support/tip.php?id='+clicked_id);
$('#supportShare').modal('show');
.....

or you can use a callback after the modal loads

......
alert(clicked_id);
$('#supportShare').modal('show', function(){
    $('#clicked_id').text(clicked_id);
    $('#dynamic_link').attr('href', '../_support/tip.php?id='+clicked_id);
});
.....

Then changing a bit like:

<a href="#" target="_blank" class="btn btn-primary" id="dynamic_link">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i>
<br>
LINK HERE 
<span id="clicked_id"></span>
</a>

Upvotes: 1

Related Questions