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.
Related
I have this code on page 1. All a tags have the same link. If the user clicks on one link, the next page 2 is loaded. I want to display the price of that id specific to that link to show on page 2.
example: If the user clicks a link with id="saloon_price", the price on page 2 should appear Saloon: £50.
If the user clicks the link with id="mpv_price", the price on page 2 should appear MPV: £70.
Please help me to achieve this on page 2.
I am very new to coding. And using Javascript. Kindly help me with a simpler solution. Thanks
<a id="saloon_price" href="/quotes/details"> Saloon: £50</a>
<a id="estate_price" href="/quotes/details">Estate: £60</a>
<a id="mpv_price" href="/quotes/details">MPV: £70</a>
In the web, we pass values mainly using the URL, and read them again in the loaded page.
<a id="saloon_price" href="/quotes/details?label=Saloon&value=£50"> Saloon: £50</a>
<a id="estate_price" href="/quotes/details?label=Estate&value=£60">Estate: £60</a>
<a id="mpv_price" href="/quotes/details?label=MPV&value=£70">MPV: £70</a>
And read this post for more details:
How to get the value from the GET parameters?
You will propably need to use PHP or other server-side languages. You can do this easily with forms. But you will need to run this on some kind of server.
This will echo (type to document) the value of value attribute on the button...
index.php:
<form action="/quotes/details.php" method="post">
<button type="submit" name="price" value="£50" id="saloon_price"> Saloon: £50 </button>
...other buttons...
</form>
/quotes/details.php:
...
<?php
$price = $_POST["price"];
echo "MPV: " . $price;
?>
...
You can use method="get" and $_GET["price"] if you want to see these values in url.
i created an ajax favorite button where when a user clicks the heart button the information gets sent to the server without reload and the heart shape becomes filled with red using javascript(exactly like instagram heart button ). now i am having a problem that when the page reloads the heart filling is removed and how will each indiviual message be filled and not only the first instance ?
here is my code:
my html code:
<a href="" class="msg-icon" onclick="toggle()" >
<input type="hidden" name="fav" value="<?php echo $row['msgid']; ?>" style="" >
<i class="far fa-heart" id="favBtn" style="" ></i>
</a>
my javascript code:
function toggle(){
var btn= document.getElementById("favBtn");
if(btn.classList.contains("far")){
btn.classList.remove("far");
btn.classList.add("fas");
}else{
btn.classList.remove("fas");
btn.classList.add("far");
}
}
how can i make it that the heart filling is only removed when the user clicks on the button again for each message?
I see you are using PHP to load the id of the message on page load. I'm guessing you want something similar when setting the initial CSS-classes on "favBtn". The following snippet checks a field on the same $row with php and chooses chat class to show initially based on that.
<i class="<?php if($row['isFavorite'] {echo "fas";} else {echo "far";}) fa-heart" id="favBtn"></i>
Another alternative would be to load the data with an AJAX call, but that would delay the load of the status and probably not what you are looking for in this case.
Good luck!
If those unreadable CSS class names come from an external library, consider putting them into variables with more recognizable names, and using the variables instead of the external names directly.
For example:
var heartOutline = 'far'
var heartFilled = 'fas'
function toggle(){
var btn= document.getElementById("favBtn")
if(btn.classList.contains(heartOutline)){
btn.classList.remove(heartOutline)
btn.classList.add(heartFilled)
}else{
btn.classList.remove(heartFilled)
btn.classList.add(heartOutline)
}
}
// they got rid of semicolons in JS because they wanted to emulate Python
I'm getting used to not using semicolons in JS.
i'm really new in javascript and php.. i have a case..
<label><a href="#" class="pull-right" style="margin-top: -5px;" id="moreupload">
<!--<?php
$count = substr_count($html,'<div class="col-md-12 row" style="margin-top:10px;">'); //where $html holds your piece of HTML.
if ($count>=0){
echo "Add Design";}
else{
echo "Upload Design";
}
?>-->
Upload Design</a></label>
so i want to change the "upload design" text based on user click..so if user click => 1 it change to "add design" without refreshing the page.. any idea how? sorry for my bad English
You can add a click event to moreupload by getting it by getElementById('moreupload'). And after that you can change it's innerHTML like following:
document.getElementById('moreupload').addEventListener('click', function() {
// Change the text
this.innerHTML = 'Add Design'
});
<label>
<a href="#" class="pull-right" style="margin-top: -5px;" id="moreupload">
<!--<?php
$count = substr_count($html,'<div class="col-md-12 row" style="margin-top:10px;">'); //where $html holds your piece of HTML.
if ($count>=0){
echo "Add Design";}
else{
echo "Upload Design";
}
?>
-->
Upload Design
</a>
</label>
hope it helps
To change button text you don't need PHP. It purely front-end. But what with button functionality. Does Upload and Add buttons do different backend call? If so, it is more efficient to hide and show needed buttons. Javascript is what you need.
Html:
Upload Design
Javascript:
$("#moreupload").on("click",function(){
$(this).text("Add Design");
});
PS: not sure if you should wrap into , look into docs about usage. https://www.w3schools.com/tags/tag_label.asp
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.
im using a template to make my project and there is a button which is a (a href ) styled button
I want it use it as post in php to pull data .. but its not working . this is the button
<div class="wrapper">
<span class="link1">
<strong>Search</strong>
</span>
</div>
and i want to use it here ...
<?php
if(isset($_POST['submit'])) {
echo '<script type="text/javascript">alert("This button works")</script>';
}
?>
but it does not seem to work ..plz help
Maybe you were referring to javascript instead of Java.
They are not the same.
But yes you could use javascript to submit the form using that anchor.
But first, you need to make sure that you have a form tag inside that markup.
Then bind an event on that anchor:
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
echo '<script type="text/javascript">alert("This button works")</script>';
}
?>
<div class="wrapper">
<form method="POST" id="your_form_id">
<span class="link1">
<strong>Search</strong>
</span>
</form>
</div>
<script type="text/javascript">
document.getElementById('hide').addEventListener('click', function(e){
e.preventDefault();
document.getElementById('your_form_id').submit();
});
</script>
Simple Demo
FYI: If you want a value to be passed, either utilize hidden input tags. Or put a value attribute and instead use a button.
if(isset($_POST['submit']))
it is false , as you have not submit any form.
Either make it
or add javascript/jquery form submit when clicking on href button.
Hope it helps.
Your May see this