Ask your WordPress questions! Pay money and get answers fast! (more info)

Simple Jquery Calculation & Event Trigger WordPress

  • REFUNDED

Hi,

I'm modifying a 'booking form' for the events manager wordpress plugin and would like a bit of help with the Jquery.

There's 2 parts to this question:

1) I need to display the total based upon a select field and the price of a ticket, so if a ticket is €50 and there's 4 selected, it will display €200. I've found this code (below) which sort of works but it's not calculating properly, it needs to get the value from the select field properly (see below link as well). I think it's just a case of changing the ".data('price')" part.

http://ibz.staging.wpengine.com/direct-tickets/?eventid=15628&aid=143

<script>

$(document).ready(function () {
$('.em-ticket-select').change(function(){
var price = parseFloat($('.price').data('base-price'));

$('.em-ticket-select').each(function(i, el) {
price += parseFloat($('option:selected', el).data('price'));
});

$('.price span').text(price.toFixed(2));
});
});

</script>

<p class="price" data-base-price="50">&pound;<span>50.00</span></p>


2) Also on this page, if you don't enter any details you'll get an error message, which displays at the top - using Jquery I need to either move this warning to the bottom, or scroll the user up to the error message upon reloading with an error. http://ibz.staging.wpengine.com/direct-tickets/?eventid=15628&aid=143

Please help :)

Answers (1)

2014-04-02

zebra webdesigns answers:

Hello Meakin

first thing

Replace the all the $ symbols with jQuery


zebra webdesigns comments:

like this

<script>
jQuery(document).ready(function () {
jQuery('.em-ticket-select').change(function(){
var price = parseFloat(jQuery('.price').data('base-price'));
jQuery('.em-ticket-select').each(function(i, el) {
price += parseFloat(jQuery('option:selected', el).data('price'));
});
jQuery('.price span').text(price.toFixed(2));
});
});
</script>


Meakin comments:

Thanks - I've done that now:


http://ibz.staging.wpengine.com/direct-tickets/?eventid=15628&aid=143


Cheers
Russ


Meakin comments:

How do I change this bit: data('price') to take the number from the dropdown menu?

Cheers


zebra webdesigns comments:

Hello Meakin I have PM ed you and also there is another code in your script

$(document).ready(function(){
$('#affiliate').val('143')
})

which you need to change the $ as jQuery. Also it is not properly closed
it should close like });


Meakin comments:

Thanks, I actually managed to get this fixed by myself using:

.text()