Decrease product number counter on button click

Question

My website has a limited reduced price offer and I want to display the number of remaining spots in real time via a counter that decreases each time the 'sign up' button is clicked.

For example, I would like a simple counter starting at '10', which reduces by '1' (and stops at '0') every time the 'sign up' button is clicked.

The counter I'd simply like to be part of a paragraph, as so:

<p>10 spots remaining at Current Price.</p>

And the trigger button currently appears as thusly:

<div id="link_2"><a class="signup" href="#">Sign up</a></div>

I've absolutely no idea how to go about this, my site can take php if that's the best option.

Thanks! Pinchy

You will need a database to store the remaining number of spots and have to use php to reduce the counter every time the signup button is clicked — Johny, Oct 04 '14 at 15:57
if you want it to work in real time for all the visitors of the website, you're gonna need to have a database, store the amount in it, and use ajax and php (or any other server side languages) to decrease the amount — Amin Jafari, Oct 04 '14 at 15:58
Base yourself on this Q&A on Stack http://stackoverflow.com/q/22926882/ using reverse logic. You can also Google "mysqli database counter ajax". This is far too broad a subject, especially when you don't have code already. I understand that you don't know where to start, but Google is always "a" good place to start. — Funk Forty Niner, Oct 04 '14 at 16:07

score 0 · Accepted Answer · edited May 23 '17 at 12:11

One of the approaches that you can use to achieve what you require is by using a database to store the available spots and update accordingly.

You can create a database table just for the spots available.

Make the html signup code a submit rather than a class (if you want to use php only) or you can use javascript or jQuery to act as submit if clicked (onclick), you can find a topic/tutorial here: Click Here

then a code like:

if(isset($_POST['name_of_submit_button'])) {
    // Set query to update accordingly
    $query = "UPDATE available_spots_table
          SET available_spot = available_spot - 1
          WHERE id = 1"; // You can use ID to identify the 
    // Run the query
    $run_query = mysql_query($query);

    // Some other code here
 }

And you can show it by pulling the data from a database like mysql and using php or even javascript if required.

//PHP:
$remaining_spots = '';
$query = "SELECT available_spots FROM available_spots_table WHERE id = 1"; // Select the number of available spots
// Run the query
$run_query = mysql_query($query);

if(@mysql_num_rows($run_query) > 0){  // If query is succesful
  $result = mysql_fetch_array($run_query);  // Get results
  $remaining_spots = $result['available_spots'];  // Assign result into the variable that you will use to display
} else {
   // return fail message
}
$spots_remaining
//HTML : 
<p><?php $remaining_spots ?> spots remaining at Current Price.</p>

This code sample is just to demonstrate how it can be achieved. However, there are other things to consider like : when a user clicks the signup, you might want to setup a code that verifies that the user did sign up before you update the available_spots_record. Also, because php processes the whole page before being displayed, you have to use javascript/jQuery to show it in real-time. The process is also demonstrated using the procedural mysql, you might wanna consider something like an object oriented php/mysqli or use mysqli = LINK. Lastly, you can also create functions to make this process easier.

Thanks.

Decrease product number counter on button click

1 Answers1