在提交和处理PHP代码后禁用提交按钮(使用AJAX提交?


Disable submit button after submitting and handling PHP code (Submit with AJAX?)

所以我为带有提交按钮的投票页面设置了一个表单。它适用于表单和 php 代码,每次有人按下特定值的投票按钮时,它都会被计为 1。

因为我使用提交按钮来计算投票,所以用户可以向按钮发送垃圾邮件,因为没有什么可以阻止它们,例如,有人可以按"wordpress"按钮 10 次,因此 wordpress 的值变为 +10。为了防止这种情况,我想在 Jquery 中使用禁用按钮功能。我已经设法让该函数与 jquery 代码一起工作,但不幸的是它不会从上面(通过表单(处理 PHP 代码。

问题

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

阿贾克斯

是否可以使用 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 代码。

两点:

(1(你必须添加一些逻辑,比如:相同的ID,相同的IP等不能投票两次。它必须从HTML发送到PHP端,并且根据检查,您可以在HTML中添加条件以显示或不以活动形式显示按钮。

(2(jQuery代码中,您使用了$('input#wordpress'),由于您的按钮都没有id属性,因此无法使用。

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

满足条件后为按钮分配"禁用"类,例如:

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

因此,当 if 语句中的条件为真时,在这种情况下,从按钮提交已被发布,那么"禁用"的回显将给类一个禁用的元素,并阻止任何人单击它。

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

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

问题是datadata: $('form').serialize(),函数没有返回任何数据。