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

Question

因此，我为带有提交按钮的投票页设置了表单。 它可以很好地与表单和php代码配合使用，每当有人按下“投票”按钮以获得特定值时，它将被加1。

因为我使用的是提交按钮来计算投票数，所以用户可以对按钮进行垃圾邮件处理，因为没有什么可以阻止它们，例如，某人可以按“ wordpress”按钮10次，因此wordpress的值变为+10。 为了防止这种情况，我想在Jquery中使用禁用按钮功能。 我已经设法使该函数与jquery代码一起使用，但是不幸的是，它无法从上方（通过表单）处理PHP代码。

题

所以我的问题是，提交表单并处理表单的php代码后，如何禁用提交按钮？

AJAX

可以用AJAX做到吗？ 如何？ 我对AJAX知识为0，不知道这是否对我的问题有所帮助。

<?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>

编辑

 $(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!');
            }
        });

    });

});

所以我粘贴了一些AJAX代码而不是jquery代码。 这将起作用，因为在提交后将禁用提交按钮。 但是，它仍然无法处理php代码。

Answer 1

两点：

（1）您必须添加一些逻辑，例如：相同的ID，相同的IP等，不能两次投票。 它必须从HTML端发送到PHP端，并且基于检查，您可以在HTML中添加条件以以活动形式显示或不显示按钮。

（2）在您的jQuery代码中，您使用了$('input#wordpress') ，因为您的按钮都没有id属性，因此无法使用。

您提到的Ajax使用-将保存它并为您做这些事情。

Answer 2

满足条件后，将“ Disabled”类分配给按钮，例如：

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

因此，如果if语句中的条件为true，则在这种情况下，已经发布了按钮的提交，则回显“ disabled”将为该类提供禁用元素，并阻止任何人单击它。

Answer 3

我自己发现了问题，请参阅代码

$('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!');
        }
    });

});

问题是data ， data: $('form').serialize(),函数未返回任何数据。