Bootstrap Poll Example - including the PERL CGI backend code and jQuery / AJAX code for backend - frontend JSON communication

Tuned by wizzion.com

Who was, or is, the most virtuous president of modern Slovak history ?

[lt: Qui est que erat optimus bonusatque Praeses Slovakis?]

[sk: Kto bol či je najcnosťnejším prezidentom novodobých dejín Slovenska ?]
(Poll started on 26th November 2018 / AE481126)

HTML code

                <div class="user-poll-section" id="poll-module">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <strong>Who was, or is, the most virtuous president of modern Slovak history ?<br/><br/> [lt: Qui est que erat optimus bonusatque Praeses Slovakis?]<br/><br/>[sk: Kto bol či je naj<a target="_blank" href="https://sk.wikipedia.org/wiki/Cnos%C5%A5">cnosť</a>nejším prezidentom novodobých dejín Slovenska ?]</strong>
			
                        </div>
                        <div class="panel-body">
                                <form id="form_poll1">
				<input type='hidden' name='question' value='dummy_question'/>
                                   <div class="radio">
                                <label>
                                    <input type="radio" name="answer" value="Gasparovic" >
                                    Ivan Gašparovič (2004 - 2014) <div id="Gasparovic"></div>

                                </label>
                            </div>
                              <div class="radio">
                                <label>
                                    <input type="radio" name="answer" value="Kiska">
                                    Andrej Kiska (2014 - 2019)<div id="Kiska"></div>
                                </label>
                            </div>
 
                           <div class="radio">
                                <label>
                                    <input type="radio" value="Kovac" name="answer">
                                    Michal Kováč (1993 - 1998)<div id="Kovac"></div>

                                </label>
                            </div>
                             <div class="radio">
                                <label>
                                    <input type="radio" name="answer" value="Schuster">
                                    Rudolf Schuster (1999 - 2004) <div id="Schuster"></div>

                                </label>
                            </div>
                                   <div class="radio">
<!-- nazi guy commented out, of course
                         <div class="radio">
                                <label>
                                    <input type="radio" name="answer" value="Tiso">
                                    Jozef Tiso (1939 - 1945)<div id="Tiso"></div>
                                </label>
                            </div>
-->
                          <div id="poll_mail" style="display:none;">
                                <div class="panel-heading">
                                        <label id="warnauth" style="width:150px;" type="submit" class="btn btn-danger btn-sm">Authentize Your Identity</label>
                                        <input style="color: black;" placeholder="Put Your e-mail address here" type="text" id="mailinput" name="email">
                                        <button id="vote" style="width:150px;" type="submit" class="btn btn-success btn-sm" style="display:none">Cast Your Vote</label>
                                </div>
                        </div>
                        </form>

                   </div>
</div>
                        <div class="panel-heading">
				(Poll started on 26th November 2018 / AE481126)	
                        </div>
		

AJAX / jQuery code


	//display mail address request after clicking on a poll
	$("label").on("click", function() {   
		$("#poll_mail").css("display","inline");
	});
	//accept only syntactically correct mail addresses
	$("#mailinput").on('input', function(e){
	      e.preventDefault();
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/;
		if (!emailReg.test($("#mailinput").val()) || ($("#mailinput").val().length<1)) {
		}
		else {
			$("#warnauth").css("display","none");
			$("#vote").css("display","inline");
		}
 
	});
	//vote submission (calls poll_insert.pl script, c.f. below)
	$("#vote").click(function() { 
                $.post('/poll_insert.pl',$('#form_poll1').serialize(),function(data, status, xhr){});
		alert("Thank You for Your answer. You will be notified about the results of the poll.");
		$("#poll-module").css("display","none");

	});

	//gets current poll status from the database and updates the html accordingly (calls poll_select.pl script, c.f. below)
	$.getJSON("/poll_select.pl?question=dummy_question", function( data ) {
	  var items = [];
	  $.each( data, function( key, val ) {
	    $("#"+key).html("("+val+" %)");
	  });
	});
	

poll_insert.pl :: PERL CGI backend code for vote insertion

#!/usr/bin/env perl
use CGI qw();
use warnings;
use DBI;
my $c = CGI->new;
print $c->header('text/plain');
my $email=$c->param('email');
my $answer=$c->param('answer');
my $question=$c->param('question');
my $dbh = DBI->connect("DBI:mysql:database=dbname;host=dbhost","dbuser","pass");
if ($answer && $email) {
	my $sth = $dbh->prepare('INSERT INTO poll set question=?,id=?,answer=?');
	$sth->execute($question,$email,$answer);
	print "$email 's answer $answer for question $question successfully inserted to sk16.eu poll\n";
} else {
	print "invalid data";
}

poll_select.pl :: to be called by frontend AJAX/getJSON

#!/usr/bin/env perl
use CGI qw();
use warnings;
use DBI;
print "Access-Control-Allow-Origin: *\n";
print "Content-type: text/html\n\n";
my $question=$c->param('question');
my $dbh = DBI->connect("DBI:mysql:database=dbname;host=dbhost","dbuser","pass");
my $sth = $dbh->prepare('select count(*) as total from poll where question=?');
$sth->execute($question);
$ref = $sth->fetchrow_hashref();
$total=$ref->{'total'};
 
my $sth = $dbh->prepare("select answer,round((count(*)/$total)*100) as percent from poll where question=? group by answer");
$sth->execute($question);
print "{";
$i=0;
  while (my $ref = $sth->fetchrow_hashref()) {
    print "," if $i;
    print '"'.($ref->{'answer'}).'":"'.($ref->{'percent'})."\"\n";
    $i++;
  }
print "}";
This website does not use cookies.

Hand-coded in ViM by wizzion.com CEO Prof. Dr. Daniel D. Hromada, all code available under conditions of CC BY-NC-SA licence.

Let me know (daniel at wizzion dot com) if ever You want to implement this poll system on Your site.