提交和处理PHP代码后禁用提交按钮（使用AJAX提交吗？）

Question

So I have a form set up for a vote page with submit buttons. It works fine with the form and the php code and everytime someone press the vote button for a specific value it will be count by 1.

Because I am using submit buttons to count the vote, users can spam the buttons because there is nothing what will stop them, for example someone can press the button "wordpress" 10 times so the value of wordpress becomes +10. To prevent that I would like to use a disable button function with Jquery. I've managed to get that function working with a jquery code but unfortunately it will not handle the PHP code from above (through the form).

Question

So my question, How can I disable a submit button after submitting a form and handling the php code of the form?

AJAX

Is it possible to do it with AJAX? And how? I have 0 knowledge about AJAX and don't know if this will help my problem.

<?php
        $votestring = 'Klik <a href="/sofeed/uitslagsofeed.php">hier</a> om naar de resultaten te gaan';

        if(isset($_POST['wordpress'])) {

            $vote_wordpress = "update stemmen set value1=value1+1";

            $run_wordpress = mysqli_query($dbCon, $vote_wordpress);

            if ($run_wordpress){

                echo 'U heeft uw stem uitgebracht op ' . $answer1 .'!<br>';
                echo $votestring;
            }
        }

        if(isset($_POST['laravel'])) {

            $vote_laravel = "update stemmen set value2=value2+1";

            $run_laravel = mysqli_query($dbCon, $vote_laravel);

            if ($run_laravel){

                echo 'U heeft uw stem uitgebracht op ' . $answer2 .'!<br>';
                echo $votestring;
            }
        }

        if(isset($_POST['html'])) {

            $vote_html = "update stemmen set value3=value3+1";

            $run_html = mysqli_query($dbCon, $vote_html);

            if ($run_html){

                echo 'U heeft uw stem uitgebracht op ' . $answer3 .'!<br>';
                echo $votestring;
            }
        }

        if(isset($_POST['css'])) {

            $vote_css = "update stemmen set value4=value4+1";

            $run_css = mysqli_query($dbCon, $vote_css);

            if ($run_css){

                echo 'U heeft uw stem uitgebracht op ' . $answer4 .'!<br>';
                echo $votestring;
            }
        }

        if(isset($_POST['bootstrap'])) {

            $vote_bootstrap = "update stemmen set value5=value5+1";

            $run_bootstrap = mysqli_query($dbCon, $vote_bootstrap);

            if ($run_bootstrap){

                echo 'U heeft uw stem uitgebracht op ' . $answer5 .'!<br>';
                echo $votestring;
            }
        }
        ?>

    <div class="row">
        <form name="stemmen" id="formstemmen" action="stemmensofeed.php" method="post">

        <div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" style="margin-bottom: 10px;">

            <?php if (!empty($answer1)) { echo '<input type="submit" id="wordpress" class="btn btn-primary" name="wordpress" value='.$answer1.'>'; } ?>

        </div>
        <div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" style="margin-bottom: 10px;">

            <?php if (!empty($answer2)) { echo '<input type="submit" class="btn btn-primary" name="laravel" value='.$answer2.'>'; } ?>

        </div>
        <div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" style="margin-bottom: 10px;">

            <?php if (!empty($answer3)) { echo '<input type="submit" class="btn btn-primary" name="html" value='.$answer3.'>'; } ?>

        </div>

        <div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" style="margin-bottom: 10px;">

            <?php if (!empty($answer4)) { echo '<input type="submit" class="btn btn-primary" name="css" value='.$answer4.'>'; } ?>

         </div>

        <div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" style="margin-bottom: 10px;">

            <?php if (!empty($answer5)) { echo '<input type="submit" class="btn btn-primary" name="bootstrap" value='.$answer5.'>'; } ?>

        </div>

        </form>



    </div>

    <!-- jQuery 2.2.0 -->
    <script src="admin/plugins/jQuery/jQuery-2.2.0.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-sass/assets/javascripts/bootstrap.js"></script>
<script>


    $('input#wordpress').click(function(e) {
        e.preventDefault();
        var aaa =  $(this);
        aaa.prop('disabled', true);
        setTimeout(function() {
            aaa.prop('disabled', false);
        }, 3000);
    });
</script>

EDIT

 $(function () {

    $('form').on('submit', function (e) {

        e.preventDefault();

        $.ajax({
            type: 'post',
            url: 'stemmensofeed.php',
            data: $('form').serialize(),
            success: function () {
                $('input').prop('disabled', true);
                alert('Your vote is saved!');
            }
        });

    });

});

So I have pasted in some AJAX code instead of the jquery code. This will work, as the submit buttons will disable after the submit. But, it is still not handling the php code.

Answer 1

Two points:

(1) you have to add some logic like: same id, same ip, etc. can't vote twice. It has to sent from HTML to PHP side and based on the checking you can add condition in the HTML to show or not to show the button in active form.

(2) In your jQuery code you have used $('input#wordpress') which will not work as none of your buttons have id attribute.

The Ajax you have mentioned using - will save it and do the stuff for you.

Answer 2

Assign a 'Disabled' class to the button once condition is met, for example:

<input id="button"
   type="submit"
   class="btn btn-primary btn-primary butdim <?php if(condition){echo 'disabled';} ?>"
   name="submit"
   value="Submit Changes">

So when the condition in the if statement is true, in this case the submit from the button has been posted, then the echo of "disabled" will give the class a disabled element, and prevent anyone from clicking it.

Answer 3

I have found the problem myself, see my code

$('input[type="submit"]', 'form#formstemmen').on('click', function (e) {
    e.preventDefault();

    var name = $(this).attr('name');

    var data = {};
    data[name] = $('input[name="'+name+'"]').val();
    console.log(data);
    $.ajax({
        type: 'post',
        url: 'stemmensofeed.php',
        data: data,
        success: function () {
            $('input').prop('disabled', true);
            alert('Your vote is saved!');
        }
    });

});

The problem was the data , the data: $('form').serialize(), function was not returning any data.