submitting contact form in fancy box

Question

I've got a contact form opening in a FancyBox 2 modal window. But when you submit the form, current page got refreshed and contact form gets disappeared.

You can check this bug in my site by clicking support in main menu

Here's my code,

$(document).ready(function() {
    $(".various").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
});

and this is my contact form link,

<a href="formhome.php" class="menu-support fancybox.ajax">Support</a>

Can anyone tell me how to submit my contact form in fancy box without reloading the page please?

Check http://stackoverflow.com/a/11299547/1055987 if that helps — JFK, Feb 15 '13 at 17:33

score 0 · Answer 1 · answered Feb 15 '13 at 06:00

what you need here is jquery ajax

jquery

$('#idOfcontactForm').submit(function(){
   $.ajax({
     url:"yourpage.php", // action of the form ,
     data:$(#contactform).serialize(), // send forms data to server
     dataType:"json", // take response as json
     type:"post", //send form by post or get
     success:function(result){
       alert(result.msg);
    }
   });
    return false;  // default submit return false
 });

PHP(yourpage.php)

  //manupulate you submited data..
  // if using post you can get data by $_POST;
  echo json_encode(array('msg'=>"successfully saved");

submitting contact form in fancy box

1 Answers1