0

So after submit a form for a review, i'd like to have a modale popup to thank the customer and autoclose after a delay. I have this code : 

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'],  ENT_QUOTES); ?>" id="feedbackForm"  data-toggle="validator"   data-disable="false" method="post">       

<button type="submit" value="Submit" title="Post your review" class="btn btn-primary btn-lg" data-loading-text="Sending..." style="display: block; margin-top: 10px;">Send &nbsp;&nbsp;<span class="glyphicon glyphicon-send"></span></button>
</form>

<div id="dialog" style="display: none">
Thank you for your review, this dialog will automatically close in 10 seconds.
</div>     
</div>
  <script type="text/javascript">
 $(document).ready(function ()
{
;(function($) {

     // DOM Ready
    $(function() {

        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $('#my-button').on('click', function(e) {

            // Prevents the default action to be triggered.
               e.preventDefault();                      
 $('#feedbackForm').ajaxForm(function () {

$('#dialog').bPopup({
 autoClose: 3000,
    easing: 'easeOutBack', //uses jQuery easing plugin
        speed: 450,
        transition: 'slideDown' 
});

    });
    });
    });

 });
})(jQuery);
</script>

It submit the form but the modale popup doesn't open... Thank you for your help !

seb606
  • 41
  • 1
  • 7
  • Thank you, yes i include Jquery, if i remove this : " $('#feedbackForm').ajaxForm(function () {", the modale popup is open and autoclose but the form is not submit then.... – seb606 May 12 '16 at 23:05

1 Answers1

0

Depending on how you intend to wait 3 seconds, based upon your needs. You can at least get the popup to go away using a bit of jquery below: 

$("#dialog").hide();

Also since you are using the plugin you may want to make sure its being called properly. Check the console and logs for any errors or lack of errors.

You can find some write up at: bpopup

Joseph Opanel
  • 48
  • 6
  • 1
    Thank you Joseph, i'm a beginner so i don't really know how to solve this problem. Normally i want to clic on the submit button and popup appear for a delay and then disappear or close and then the form to be submitted. I'll check again on the website but a bit more help will be welcome ^^ – seb606 May 13 '16 at 08:07
  • 1
    I dont think I have enough information. Based on your code you will need an ajax request that you don't have yet. Could you post your form and ajax request? If you dont have an ajax request but you have a place to POST or GET data too. If you supply the full form I can create what you would need for you to learn from. – Joseph Opanel May 13 '16 at 18:37
  • 1
    thank you, i added a part of the code with my form, i don't have ajax request. – seb606 May 14 '16 at 09:18
  • 1
    thank you, i looked on internet, my ajax call is not good and complete, i update the code here, you can see how i set my form. A little help will be welcome, thank you ! – seb606 May 15 '16 at 05:09
  • Your code has many problems. Firstly the form will submit and open the new page because of the action. I think what you want to do is serialize the form in javascript and make a POST type in ajax. Upon the success you can run the bpopup script. This page may help you do that http://stackoverflow.com/questions/425095/submit-form-using-ajax-and-jquery – Joseph Opanel May 17 '16 at 22:25
  • 1
    Thank you Joseph, in fact the page add a review on the same page after submit, i already check the data but with php... I need to serialize the form in javascript and make a POST type in ajax then ? I almost tried this but without serialize the data, sorry i'm a beginner. – seb606 May 18 '16 at 15:17
  • You need to serialize the form data wth your ajax request. So when you send the serialized data the PHP can read each post variable which is defined by the name attribute. – Joseph Opanel May 20 '16 at 22:47