PHP not working with a submit button in a form with Jquery

Question

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!

@guest271314 I've added a fiddle, thats actually the result I want for my own button + handling the php code by the form — Giesburts
– Giesburts, Commented Apr 5, 2016 at 15:01
Not certain what php within html is expected to return ? What are $answer1 through $answer5 ? — guest271314
– guest271314, Commented Apr 5, 2016 at 15:03
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
– Nergal, Commented Apr 5, 2016 at 15:04
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 — Murad Hasan
– Murad Hasan, Commented Apr 5, 2016 at 15:10

Koustav Ray · Accepted Answer · 2016-04-05 15:10:52Z

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

answered Apr 5, 2016 at 15:10

Koustav Ray

1,15213 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Giesburts Over a year ago

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 :)

Koustav Ray Over a year ago

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); });

Collectives™ on Stack Overflow

PHP not working with a submit button in a form with Jquery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related