How to make bootstrap Voting snippet functional, change value in MySQL

Question

I am trying to add a voting/poll panel in sidebar of my HTML/PHP/MySQL website.

Scenario I have list of plans for separate places in MySQL Database Table, when some one search for the place they will also see list of plans decided for that place. They can vote for what plan to be executed next in that place.

What I have worked so far? I am able to fetch plans for specific places when viewers search for any place. Code used:

<div class="panel panel-default">
<div class="panel-heading">
    <h3 class="panel-title">
        Vote next plan
    </h3>
</div>
<div id="voting">
    <form>
        <div class="panel-body">                                
           <ul class="list-group">
                <?php
                    while ($planvote = mysql_fetch_array($planresultv)) {
                        echo '<li class="list-group-item">';
                        echo '<div class="radio">';
                        echo '<label>';
                        echo '<input type="radio" name="optionsRadios">';
                            echo $planvote['plan_name'];                                                
                        echo '</label>';
                        echo '</div>';
                        echo '</li>';
                    }
                ?>
            </ul>
        </div>
        <div class="panel-footer">
            <button type="button" class="btn btn-primary btn-sm">
                Vote</button>
            <a href="#">View Result</a>
        </div>
    </form>
</div>

Screenshot

Now, I have a database table with columns

|sn|plan_name|poll|
|1 |Path way |0   |

How can I add/change value of poll in some on selects radio button on the voting form and clicks vote.

P.S. You can answer ideas or help me with code if you want to.

Answer 1

You could add a value to you radio button:

echo '<input type="radio" name="optionsRadios">';

After you did this, you could make an ajax call where you update the results by getting the value of the radiobutton. Make sure to add an id to your button:

<button id='vote_button' type="button" class="btn btn-primary btn-sm">

Ajax call:

$("#vote_button").click(function(){
    if($("input[type='radio'][name='optionsRadios']:checked").length > 0){
        var chosenvalue = $("input[type='radio'][name='optionsRadios']:checked").val();
        var dataString = 'paramX=' + chosenvalue;
        $.ajax({
            type: "POST",
            url: "yourfile.php",
            data: dataString,
            cache: false,
            success: function (html) {
            }
        });
    }
});

In your ajax call you can update the voting system by using some PHP code and an SQL like where $val = the passed value to your ajax:

UPDATE your_table SET poll = poll + 1 WHERE sn = $val

But you will probably have to add way more coding than this, else people can just spam the voting system..

Answer 2

Solution

JS/Ajax Script

<script src="js/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#vote_button").click(function(){
if($("input[type='radio'][name='optionsRadios']:checked").length > 0){
var chosenvalue = $("input[type='radio'][name='optionsRadios']:checked").val();
var dataString = 'paramX=' + chosenvalue;

$.ajax({
    type: "POST",
    url: "yourfile.php",
    data: dataString,
    cache: false,
    success: function (html) {
        console.log(html);
        $('.notice').html(html);

    },
    error: function(err) {
        console.log(err);
    }
});
}
});

HTML/ PHP

<div id="voting">
<form>
    <div class="panel-body">                                
       <ul class="list-group">
            <?php
                while ($planvote = mysql_fetch_array($planresultv)) {
                    echo '<li class="list-group-item">';
                    echo '<div class="radio">';
                    echo '<label>';
                    echo '<input type="radio" name="optionsRadios" value="'.$planvote['sn'].'">';
                        echo $planvote['vdc_PlName'];                                               
                    echo '</label>';
                    echo '</div>';
                    echo '</li>';
                }
            ?>
        </ul>
    </div>
    <div class="panel-footer">
        <button id="vote_button" type="button" class="btn btn-primary btn-sm">
            Vote</button>
        <a href="#">View Result</a>
    </div>
</form>

Finally it update the value of poll in database table.