Question

So I cannot understand what is going on entirely. I am using Fancybox to bring up an email submission process. This process gathers information (name, email, etc) and then sends those values via form ‘post’. This php file (mail.php) then takes the values and uses them to populate the appropriate fields to send a mail message. Pretty straight forward, it would seem.

The message sends, however the data I am retrieving from my email submission form doesn’t seem to be there. When I take out the form from the fancybox and just display it plainly on the page it sends the values just fine to the php file, so obviously this has something to do with fancybox.

I don’t fully understand fancybox (haven’t looked over the source) nor have I yielded positive results in searching for a similar problem (perhaps I am just using improper search terms).

Anyways, If anyone could please guide me in the rite direction here, as this is such a frustrating thing to be stalled on.

For reference:

HTML –

  <form id="default-behavior" action="mail.php" method="post">

<div style="display:none">
    <div class="TextCopyright" id="accept" style="width: 700px; font-size: 10px">
        page one
                </br></br><a id="submitClick" href="#submitPage"><button id="conditionButton" type="button" class="submitBtns">I agree to the terms and conditions above</button></a>
    </div>
</div>
<div style="display:none">

        <div id="submitPage">
            <table border="0" cellspacing="0px" class="TextBlock" style="margin-top: 10px" bgcolor="#FFFFFF">
                <tr>
                    <td class="TextBlockOrangeForm"><strong>Name:</strong></td>
                    <td><input type="text" class="formText" name="txtName" id="txtName" style="margin-right:50px"/></td>
                    <td class="TextBlockOrangeForm"><strong>Email:</strong></td>
                    <td><input type="text" class="formText" name="email" id="email"/></td>
              </tr>
                <tr>
                    <td class="TextBlockOrangeForm"><strong>Phone:</strong></td>
                    <td><input type="text" class="formText" name="txtPhone" id="txtPhone"/></td>
                    <td class="TextBlockOrangeForm"><strong>Fax:</strong></td>
                    <td><input type="text" class="formText" name="txtFax" id="txtFax"/></td>
                </tr>
                <tr>
                    <td class="TextBlockOrangeForm"><strong>Address:</strong></td>
                    <td><input type="text" class="formText" name="txtAddress" id="txtAddress"/></td>
                    <td class="TextBlockOrangeForm"><strong>City:</strong></td>
                    <td><input type="text" class="formText" name="txtCity" id="txtCity"/></td>
                </tr>
                <tr>
                    <td class="TextBlockOrangeForm"><strong>Prov/State:</strong></td>
                    <td><input type="text" class="formText" name="txtProv" id="txtProv"/></td>
                    <td class="TextBlockOrangeForm"><strong>Postal/Zip:</strong></td>
                    <td><input type="text" class="formText" name="txtPostal" id="txtPostal"/></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
              </tr>
            </table>
  </br>
            <textarea name="story" class="formText" id="story" style="width:490px; height: 125px">
            </textarea><br>
            <input type="submit" value="Submit Story" id="btnSubmit"/>      
        </div>

</div>
    </form>  

PHP –

$message = $_POST['story']; 

$headers = 'From:' . $from . "\r\n" .
'Reply-To:' . $from . "\r\n" .
'X-Mailer: PHP/' . phpversion();

// now lets send the email. 
mail($to, $subject, $message, $headers); 

echo "Message has been sent....!".$message; 

js –

    $(document).ready(function() {
$("#story").text("");

$("a#inline").fancybox({
    'hideOnContentClick': true,
    'showCloseButton'   : true,
        'autoDimensions': true      
});

$("#submitClick").fancybox({
    'hideOnContentClick': true,
    'showCloseButton'   : true,
        'autoDimensions': true      
});

$("#btnSubmit").click(function () {
    $('#default-behavior').submit();
});
    });        

EDIT
tried with the jquery post method as such and still had the same results (cough, no results):

        $("#btnSubmit").click(function () {
    $.post("mail.php", $("#default-behavior").serialize());
    //$('#default-behavior').submit();
});

and for further confirmation that this is directly related to the fancybox I tried the jquery post with explicit parameters and it sent the data appropriately, ie:

    $("#btnSubmit").click(function () {
    $.post("mail.php", { email: "[e-mail]", story: "blah blah test story" });
    //$('#default-behavior').submit();
});

Answer 1

Ok so problem solved.

by utilizing the jquery $.post() method I was able to send the form values to the php file.

Like this:

  $("#btnSubmit").click(function () {
    var ml = $("#email").val();
    var stry = $("#story").val();

    $.post("mail.php", { email: ml, story: stry });
});  

This works for what I need and so has effectively solved the issue. I still have several questions though. Initially I thought that fancybox may be recreating the form elements and putting the ‘cloned’ elements inside the fancybox, so when trying to access the originals, it would only show “” instead of the values input. But by explicitly assigning the elements to a js variable and then sending those variables through post to the .php file (which evidently works), this has me thinking differently (unless there is something in the process I am missing). So I would really love to solve this, figure out why when calling $("element").serialize() it passes empty values.

For this application, it’s a rather non-important factor – explicitly assigning values is minor because there are so few. However, this can obviously be a huge issue when passing a large number of values to server-side or what not and as such it would really be good to solve this entirely related but separate issue.

tl;dr – damn you fancybox.