How can use coupon code to minus value from total price - php

Question

This is my html part where I use coupon input
IF need more code I'll provide
Enter Coupon Code
<input type="text" class="form" name="couponadd" id="couponadd" placeholder="Enter Your Coupon Code" oninput="myFunction()" style="width: -moz-available;" />
Oninput I am getting the coupon code in script
<script>
function myFunction() {
var getcoupon = document.getElementById("couponadd").value;
var aftercoupn=0;
if coupon code is gold then less 15 from total
if(getcoupon == 'gold')
{
var aftercoupn = 15;
document.getElementById("aftercoupan").innerHTML = '- $' + aftercoupn;
alert('minus 15 dollers');
}
if coupon code is silver then less 10 from total
else if(getcoupon == 'silver')
{
var aftercoupn = 10;
document.getElementById("aftercoupan").innerHTML = '- $' + aftercoupn;
alert('minus 10 dollers');
}
else
{
}
}
</script>
Iam getting price from php code loop
echo "<ul id='sub'>";
if($Seats == null){
echo '<li class="BlankSeat" ></li>';
}
elseif($ticketType=='PINK' && $ticketType == $_GET['type']){
echo '<li class="pink" id="pink" data-price="100" title="Row'.$Seats.'" name="'.$RowName.'" value="'.$Seats.'"></li>';
}
else{
echo '<li class="orange" id="orange" data-price="200" title="Row'.$Seats.'" name="'.$RowName.'" value="'.$Seats.'"></li>';
}
}
echo "</ul>";
script code from get price on click of li
var total =0;
var counter = 0;
var price=0;
$('li').click(function(e) {
var price = $(this).attr('data-price');
if click something
{
counter++;
}else
{
counter --;
}
how can i use coupon code value here in total
var total = parseFloat(price * counter);
document.getElementById('demoPrice').innerHTML = '$' + total;
}
});

Answer 1

Update aftercoupn variable on text input, then use it on li's on click like
var total = 0;
var counter = 0;
var price = 0;
var aftercoupn = 0;
$('li').click(function(e) {
$('li').removeClass('active');
$(this).addClass('active');
var price = $(this).attr('data-price');
if (price) { // I'm not sure with the counter variable here
counter++;
} else {
counter--;
}
var total = parseFloat(price * counter);
$('#demoPrice').text('$' + (total-parseInt(aftercoupn)));
});
function myFunction() {
var getcoupon = $("#couponadd").val(),
txt='Invaild Coupon';
if (getcoupon == 'gold') {
aftercoupn = 15;
txt = '- $' + aftercoupn;
console.log('minus 15 dollers');
counter=0;
} else if (getcoupon == 'silver') {
aftercoupn = 10;
txt = '- $' + aftercoupn;
console.log('minus 10 dollers');
counter=0;
}
$('li.active').length && $('li.active').trigger('click');
$("#aftercoupan").text(txt);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form" name="couponadd" id="couponadd" placeholder="Enter Your Coupon Code" oninput="myFunction()" style="width: -moz-available;" />
<div id="aftercoupan"></div>
<ul id='sub'>
<li class="BlankSeat" data-price="0">Blank</li>
<li class="pink" id="pink" data-price="100" title="Row10" name="pink" value="10">Pink</li>
<li class="orange" id="orange" data-price="200" title="Row20" name="orange" value="20">Orange</li>
</ul>
<div id="demoPrice"></div>

Answer 2

I assume you're using price as a global variable. Then on click of li you should be updating that variable. So, you'll be able to have the price set on li click from other places ( I think that is what you're trying to achieve).
var total = 0, price, counter = 0;
$('li').click(function(e) {
price = parseFloat($(this).attr('data-price'));
// Do your other stuffs if you want
});
Then at other places you can get this price set after li click.
total = price * counter;
document.getElementById('demoPrice').innerHTML = '$' + total;
The whole thing is written in an assumption of your need. Correct me if I've thought it wrong or misunderstood somewhere