0

I've set up a form with submit buttons to do a vote. The data will be stored in the database with php. To prevent spamming I searched for a jquery option to disable the buttons for a certain time. Unfortunately it is not working in a form. For exmaple, if I remove the form around the buttons it works fine but because I have to store the value's of the buttons I need to have the form attribute. What happens now is that AND my form is not handling the php code above (I did not put in the code for that) and the disable button function is not working (the button is disabled for like 1sec instead of what it suppose to be).

    <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() {
    var aaa =  $(this);
    aaa.prop('disabled', true);
    setTimeout(function() {
    aaa.prop('disabled', false);
    }, 3000);
    });
</script>

I am not a expert at javascript and jquery, so is there someone who can help me out with this?

A fiddle from the orginal code http://jsfiddle.net/jhNcM/ = the expected result (+ handle php code from form).

EDIT

I've managed to get the disable button working, Thanks to @Koustav Ray, by this code

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

Unfortunately the form will now not handle the php code.. Please help with this matter!

Giesburts
  • 5,096
  • 10
  • 34
  • 70
  • What is expected result ? – guest271314 Apr 05 '16 at 15:00
  • @guest271314 I've added a fiddle, thats actually the result I want for my own button + handling the php code by the form – Giesburts Apr 05 '16 at 15:01
  • Not certain what `php` within `html` is expected to return ? What are `$answer1` through `$answer5` ? – guest271314 Apr 05 '16 at 15:03
  • 1
    The problem that you run this code on click, but because you do not use `prevenDefault` the form just executes before the javascript could run. Even more if the spammer disables js they can still spam, use honeypot or captcha. – Nergal Apr 05 '16 at 15:04
  • 2
    you are using the input type as submit, which is submitted the form. try to use ajax for submission. [submitting-html-form-using-jquery-ajax](http://stackoverflow.com/questions/16323360/submitting-html-form-using-jquery-ajax) – Murad Hasan Apr 05 '16 at 15:10
  • @FrayneKonok I will look in to it as the `prevenDefault` only disable the button instead of also handling the php code.. Thanks :) – Giesburts Apr 05 '16 at 17:08
  • @guest271314 The php code in the html is fine and works without the jquery function. The php variables contains data from the databse such as "wordpress" and "Laravel" what will be used as a vote option.. – Giesburts Apr 05 '16 at 17:09

1 Answers1

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

This should do it..you are disabling this for 3 seconds though.. Consider @Nergal's answer and also try ajax for submitting the form after this..

Koustav Ray
  • 933
  • 10
  • 24
  • So now the button is disabled after a click, but Unfortunately it will not handle the php code anymore.. Should I take a look at the ajax submitting? Thanks anyway :) – Giesburts Apr 05 '16 at 17:06
  • correct you should..because e.preventdefault stops the default behaviour,ie submitting of the form..try this for form submitting.. `$.post( "stemmensofeed.php", function( data ) { //do something with your response i.e. data like --> alert(data);` }); – Koustav Ray Apr 06 '16 at 07:31