Question

I have a form which displays in a jQuery FancyBox div with id “mcform”. When a button is clicked I call this function:

function postit() {
  $.ajax({
    type: "POST",
    url: 'listSubscribe.php',
    data: "fname=" + $("#fname").val() + "&lname=" + $("#lname").val() 
      + "&email=" + $("#email").val(),
     success: function(msg) {
        $('#mcform').html(msg);
        $("#fname").val('');
        $("#lname").val('');
        $("#email").val('');
    }
  });   
}

I can see in the console that listSubscribe.php gives a 200 header and returns text. However the form does not change except that the values wipe. But if I close the FancyBox and reopen it lo and behold there is the text returned by listSubscribe.php replacing the html of the form as intended.

Anyone have an idea what would cause this? I assume I am fighting FancyBox but I don’t know what to do about that.

Page is here: http://dominiquesonmag.com/new.html

Thanks for reading!

Answer 1

This works

function postit() {
 $.ajax({
   type: "POST",
   url: 'listSubscribe.php',
   data: $("#mcform form").serialize(),
   success: function(msg) {
       $('#fancy_content').children().children().html(msg);
        $("#fname").val('');
        $("#lname").val('');
        $("#email").val('');
   }
 });   
}

since you are referring mcform by id it just sets the value on the first element it finds instead change it to a class say mcformclass and try $('.mcformclass').html(msg);, this should change the value on both instances of mcform.