We Keep Coding

Replace a existing HTML link dynamically using js?

I'm using Joomla and use a radio box to select a buy option.
Everything works fine and I'm able to dynamically update the information displayed to the user.
My issue is to update the buy link when they select the option. My current js code to update the front end is:
jQuery(function($){
$(document).ready(function(){
$('#pricing').text('R'+'<?php echo (int)$opt1_o_price ?>');
$('#savings').text('R'+'<?php echo $opt1_save ?>');
$('#discount').text(Math.round('<?php echo $perc1 ?>')+'%');
});
$('.item').on('change',function(){
$('#pricing').text('R'+($(this).data('price')));
$('#savings').text('R'+($(this).data('price')-$(this).data('after')));
$('#discount').text(Math.round(100-
($(this).data('after')/$(this).data('price')*100))+'%');
$('input[name=sku]').val($(this).data('sku'));
And the code used to generate the link is:
<a href="<?php echo JRoute::_('my-groupbuy-cart?&task=add_to_cart&id='.$cmgbstore_id).'&option_id=1'; ?>"</a>
I am already able to select the ID using "$cmgbstore_id" because it gets loaded when the page loads, but I need to be able to change the "option_id" at the end of the link by using the option they have selected in the radio box. The value will always either be "1", "2" or "3".
An example of my radio box code is:
<div class="product-options">
<div class="option-input">
<input id="1" type="radio" value= "1" name="product-option" class="radio item" checked="checked" data-sku="1001" data-price="<?php echo (int)$opt1_o_price ?>" data-save="<?php echo (int)$opt1_save?>" data-after="<?php echo (int)$opt1_d_price ?>" />
</div>
<label for="1" class="option-detail">
<span class="option-title"><?php echo $opt1_title ?></span>
<span class="option-price">R<?php echo $opt1_o_price ?></span>
<span class="option-was-price">R<?php echo $opt1_d_price ?></span>
<span class="option-discount">Save R<?php echo $opt1_save .'.00'?></span>
</label>
I tried using the append option in js but every time the option changes another buy button gets added. Also it gets added at the end of the page and not where the original buy button was. The code I tried was something like this:
var link = document.createElement('a');
link.setAttribute('href', 'my-groupbuy-cart?&task=add_to_cart&id='+'<?php echo $cmgbstore_id ?>'+'&option_id=1');
link.innerHTML = "BUY NOW";
$('body').append(link);
I'm open for suggestions though and would really appreciate any help!
Thanks in advance.

Figure it out using the replies on my initial question.
What I did if someone else needs it: DEMO - https://jsfiddle.net/nbucona8/4/
It was simpler than I thought, but as #IncredibleHat said above I needed to use
$( selector ).attr('href','http://new/value');, so I made it:
$( "a[name='buy-button']" ).attr("href","/somelink/"+ dealid +"&option_id="+ $(this).attr("value"));
It refers back to any <a> element with the name "buy-button" and changes the href to the correct option_id.
So I call the buy link using:
<a name="buy-button" href=""> BUY NOW! </a>
And whenever the radio box option changes it changes the option_id by using :
$(this).attr("value")
at the end of the link.
Thanks to everyone that helped out.

POST one _fixed_ variable to popup window

Simple question. Yet managed to spend the whole day on it and still no result. Researched S.O., Google. Countless postings. Yet none of the questions are to the point I am struggling with. Any good soul that can help answer the following question.
All I want to do is POST a single predefined/fixed variable to a POPUP window via clicking on an image. Again, no arrays, no dynamics, nothing else involved. Just a predefined/fixed variable value. That is all. I do have a working solution that gets it done via a GET, but it does not suit my needs. Therefore am on a continuous and seemingly long hunt for a solution using POST method.
mainpage.php
<form method="post" action="popup_page.php" target="popup" onclick="window.open('popup_page.php','name','width=600,height=400')">
<button type="submit" name="flower" value="lotus">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Sacred_lotus_Nelumbo_nucifera.jpg" width="200px" height="200px" alt="lotus"></button>
</form>
To validate if the variable "flower" (with the pre-defined answer of "lotus") comes through, I check it on popup_page.php by doing:
popup_page.php
<? echo $_POST['flower']; ?>
And of course no variable ever makes it to the popup page. Can anyone help what am I missing in my code? Or is my whole setup wrong altogether? Really appreciate anyone help in advance!!

POST the value to server
<form action='popup_page.php' method='POST'>
<input type='hidden' name='flower' value='lotus'></input>
<button type='submit' value='Submit'></button>
</form>
Get value on server and echo back popup
<?php
if (isset($_POST['flower'])) {
echo '<script>alert("'.$_POST['flower'].'")</script>';
}
?>

Thanks to Phiter, who directed me to the duplicate page. Final missing pieces were found here:
https://www.electrictoolbox.com/post-form-popup-window-javascript-jquery/
So the full answer below (successfully posting a predefined variable specifically to a Popup page, not just a regular new tab/page).
mainpage.php
<script type="text/javascript">
function target_popup(form) {
window.open('', 'formpopup', 'width=400,height=400,resizeable,scrollbars');
form.target = 'formpopup';
}
</script>
<form action="popup_page.php" method="post" onsubmit="target_popup(this)">
<button type="submit" name="flower" value="lotus"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Sacred_lotus_Nelumbo_nucifera.jpg" width="200px" height="200px" alt="lotus"></button>
</form>
popup_page.php
<? echo $_POST['flower']; ?>

How to change a href when using multiple variables in PHP?

So I didn't found what I was looking for in last two days.
To be clear I have a table "tracks" in my database.
So I can show from "tracks" the "demo" field wich is an audio file "url"..
<?= $tracks['demo']; ?>
I have multiple url's but then I need to replace the a href
<a href="<?php echo $tracks['demo'];?>"
in a logical way.
In simple terms it's like I want to click on button 1 that loads
url 1 into this a href with the ID, title field from that track.
When you press button 2 you need to load another url and replace url 1 with url2.
I tried many ways including javascript but it won't work.
Problem now is that when I list 4 items it always loads the latest "URL" i have posted in my source code. :)
When I echo out <?php echo $tracks['demo]; ?> on all items I can see the correct url's so the functionality to replace the url is my issue.
* I basically want to load many mp3 url's in a player I made in the footer of my website. It works by hardcoding the urls in the url field but this is not what it should be... *
Code:
<?php while($tracks = mysqli_fetch_assoc($muziek)) : ?>
<div class="col-md-2 viny" id="muziek">
<h4><?= $tracks['title']; ?></h4>
<img src="<?= $tracks['img']; ?>"
alt=" <?= $tracks['title']; ?> />
<p class="artist">Artist: <?= $tracks['artist']; ?></p>
</div>
<?= $tracks['demo'] = $audiourl ; ?>
<button type="button" onclick="play">Play</button>
</div>
<?php endwhile; ?>
*THIS LOOPS PERFECT FOR ALL ITEMS TRACKS ARE LISTED PERFECT *
In my player I have
<a href="<?php echo $audiourl;?>" ><?= $tracks['artist']; ?></b> - <?= $tracks['title']; ?></a>
function play(){
I'm not good at JS... And this is my issue because it now loads the latest output from the php loop...
}

I don't know how you are replacing it but
Why not pass the audio in the function. Here like this
<button type="button" onclick="play(<?= $tracks['demo'] = $audiourl ; ?>)">Play</button>
assign a id to anchor tag
<a id="someId" href="<?php echo $audiourl;?>" ><?= $tracks['artist']; ?></b> - <?= $tracks['title']; ?></a>
and in the play function, you receive it like this
function play(audioUrl){
}
and change the href like this in the play function
If you are using jquery
$('#someId').attr("href", audioUrl);
sometimes the above does not works. Can't remember why but if that does not works try this
$('#someId').href = audioUrl
If you are using javascript
document.getElementById('abcd').href = audioUrl

So I tried many things but I had many issues with the player it's js file using the same id's and so on.
The new logic I tried out seems to work:
<form action="" method="POST">
<input type="submit" value="Play" name="Play">
</form>
<?php
if (isset($_POST["Play"]))
{
echo $tracks['demo'];
}else{
echo ' ';
}
?>
There is more going on but I tried to write it down as simple as this to show the logic. All Track url's are hidden and when the page loads there is an empty $audiourl by default loaded in the a href from my audioplayer. By clicking the button play I show the url in the source but not on the site.
Then the latest $audiourl variable changes to this value.

javascript onClick is not not working in php

I am echoing a html form with php which has the following lines:
<a class='btn btn-sm btn-danger pull-right' onClick=return confirm('Delete This account?'); href='".url('deleteuser/'.$order->id)."' >Delete</a>
This correctly goes to the url specified. However, the onClick method is never triggered. Any help is much appreciated.

EDIT: Clarified pure HTML versus echo string.
Put quotes around the onclick attribute value.
i.e. in pure HTML:
onClick="return confirm('Delete This account?');"
So if you are outputting this via echo, you need to escape the respective type of quote characters with a backslash.
echo 'onClick="return confirm(\'Delete This account?\');"';
or
echo "onClick=\"return confirm('Delete This account?');\"";

Upvoted #faintsignal answer because it is correct, your confusion of single quotes is causing, however a much better way to do this is separate the PHP from the HTML:
<?php
foreach($someItem as $someKey => $order){
?>
<a class="btn btn-sm btn-danger pull-right" onClick="return confirm('Delete This account?');" href="<?php echo url('deleteuser/'.$order->id); ?>">Delete</a>
<?php
}
?>
Just providing an alternative, and it's generally considered good practice because you have clear separation of duties and its easier to maintain.
EDIT: provided a super generic example of using foreach, obviously you can mod for your setup but it shows you can separate the function and it will run just fine.

Html with javascript in php seems to be conflicting

The code i want to get into a php statement is
<a href="javascript:void();"
onclick="document.loginfrm.user.value="username";
document.loginfrm.pass.value="password";
document.loginfrm.submit();">login
</a>
So what i would normally do is just surround it with an echo and quotation marks: an then replace any quotation marks in the statement with these --> ('), so that's what i did... and for some reason it seems to misinterpret the sentence severely. Here is the code i enter in php.
echo "<a href='javascript:void();'
onclick='document.loginfrm.user.value='username';
document.loginfrm.pass.value='password';
document.loginfrm.submit();'>". login ."</a>";
And this is how the browser interprets it:
<a href="javascript:void();
" onclick="document.loginfrm.user.value=" username';=""
document.loginfrm.pass.value="password" ;="" document.loginfrm.submit();'="">
login</a>
So yes is there any way around displaying html within php that could get around this problem

Can you try this, added \
echo "<a href=\"javascript:void();\"
onclick=\"document.loginfrm.user.value='username';
document.loginfrm.pass.value=password';
document.loginfrm.submit();\">login </a>";

You need to escape it properly. Try
echo "<a href=\"javascript:void();\"
onclick=\"document.loginfrm.user.value='username';
document.loginfrm.pass.value='password';
document.loginfrm.submit();\">". $login ."</a>";

You're not escaping your quotes. Try:
echo "<a href=\"javascript:void();\"
onclick=\"document.loginfrm.user.value='username';
document.loginfrm.pass.value='password';
document.loginfrm.submit();\">". login ."</a>";
which should produce:
<a href="javascript:void();"
onclick="document.loginfrm.user.value='username';
document.loginfrm.pass.value='password';
document.loginfrm.submit();">login
</a>
As you have it now, you're closing the onclick attribute when you hit the quote at the start of the "username" value, which means the browser is interpreting username as another attribute and it just gets more confused from there...
Edit: sorry, fixed the html, rather than the php code...

You should do something like this..
<a href="javascript:void();"
onclick="document.loginfrm.user.value='username';
document.loginfrm.pass.value='password';
document.loginfrm.submit();">login
</a>
and with php it should be
echo '<a href="javascript:void();"
onclick="document.loginfrm.user.value=\"username\";
document.loginfrm.pass.value=\"password\";
document.loginfrm.submit();">
login
</a>';