Passing form data to a lightbox

Hi,

I’ve been trying to figure out a solution to this for ages, but getting no where. I’d like to have a form on the page which when submitted opens a lightbox and echos that form data. I’ve tried the below, but it doesn’t seem to work. Does anyone know a solution to this? Doesn’t have to be the facebox lightbox, can be any lightbox script.

Thanks!

http://www.searchlabtest.com/facebox/examples/index.php


  <script type="text/javascript">
    jQuery(document).ready(function($) {
	$("#submitMe").click( function(event) {
    $.facebox("<iframe src='var.php'></iframe>" );

});
    })
  </script>

......

 <form action="var.php" method="POST">
    <select name="q">
	<option value="Worked_1!"/>Worked_1</option>
	<option value="Worked_2!"/>Worked_2</option>
	<option value="Worked_3!"/>Worked_3</option>
	</select><br /><br />
	<input type="button" value="Send form data to lightbox" id="submitMe" />
</form>

var.php is simply…


<html>
<body>
<?php echo $_POST[q]; ?>
</body>
</html>

The q in your PHP code is currently a variable, and so will be throwing an error because that variable has not been defined.

You will want to use a string there instead. See for example, http://php.net/manual/en/reserved.variables.post.php

Thanks very much for your response. I missed that, so I change the code to <?php echo $_GET[“q”]; ?>. Though it still doesn’t seem to have sorted the issue. It still doesn’t echo the value in the iframe in the lightbox.

Any ideas what else I could try? Alternate solutions? Really struggling to resolve this one!

The method that the form is using is post, so PHP will have to use $_POST - not $_GET

Good spot, don’t know how I ended up changing it to a GET, I changed it to <?php echo $_POST[“q”]; ?>. That’s two silly mistakes now!

Though the value still isn’t showing up in the lightbox. I’m pretty sure my current code is not the correct way to achieve what I want. Any ideas on a solution?

Thanks!

Well the way to submit form data to a server-side script without having the page reload, is via ajax - which with jQuery is done by replacing the form submit event with an ajax request instead.

It’s done something like this:


<form id="submitResponseToLightbox" action="var.php" method="POST">


function updateLightbox(content) {
    // update the lightbox from here
}

$("#submitResponseToLightbox").submit(function(event) {
    var form = this,
        serializedData = $(form).serialize();

    var request = $.ajax({
        url: "var.php",
        type: "post",
        data: serializedData
    });

    request.done(function (response, textStatus, jqXHR) {
        updateLightbox(response);
    });

    // prevent the default web page submission of the form
    event.preventDefault();
});

Hi, thanks so much for your help on this. I added the code to the page…

  <script type="text/javascript">
    jQuery(document).ready(function($) {
	$("#submitMe").click( function(event) {
    $.facebox("<iframe src='var.php'></iframe>" );

});
    })
  </script>
  <script type="text/javascript">


  function updateLightbox(content) {
    // update the lightbox from here
}

$("#submitResponseToLightbox").submit(function(event) {
    var form = this,
        serializedData = $(form).serialize();

    var request = $.ajax({
        url: "var.php",
        type: "post",
        data: serializedData
    });

    request.done(function (response, textStatus, jqXHR) {
        updateLightbox(response);
    });

    // prevent the default web page submission of the form
    event.preventDefault();
	$.facebox("<iframe src='var.php'></iframe>" );
});
  </script>
</head>

<body>
 <form id="submitResponseToLightbox" action="var.php" method="POST">
    <select name="q">
	<option value="Worked_1!"/>Worked_1</option>
	<option value="Worked_2!"/>Worked_2</option>
	<option value="Worked_3!"/>Worked_3</option>
	</select><br /><br />
	<input type="button" value="Send form data to lightbox" id="submitMe" />
</form>

This doesn’t seem to work though…
http://www.searchlabtest.com/facebox/examples/

Have to admit, not really sure what I’m doing with this. Can you tell me where I’m going wrong?

Well for a start, you’re updating the lightbox at the wrong place. You need to perform the update after the request to the var.php has returned its contents, which is from the request.done method. See that updateLightbox function? Place the code to update the lightbox inside of that function. That is where the content from the var.php file will be sent.

Do you mean this? …

  <script type="text/javascript">


  function updateLightbox(content) {
       jQuery(document).ready(function($) {
	$("#submitMe").click( function(event) {
    $.facebox("<iframe src='var.php'></iframe>" );

});
    })
}

$("#submitResponseToLightbox").submit(function(event) {
    var form = this,
        serializedData = $(form).serialize();

    var request = $.ajax({
        url: "var.php",
        type: "post",
        data: serializedData
    });

    request.done(function (response, textStatus, jqXHR) {
        updateLightbox(response);
    });

    // prevent the default web page submission of the form
    event.preventDefault();
});
  </script>

http://www.searchlabtest.com/facebox/examples/

Sorry, not sure I follow, whats the code to update the lightbox?

Well from what I see on the facebox page, it should be as easy as:


$.facebox(content);

Let’s approach this again from first principles.

First - get the form working, submitting to the php form, and while we’re at it, remove those accursed <br> tags which are to be used only for layout addresses and poetry.


<!doctype html>
<html>
<head>
    <title>Send form data to facebox</title>
    <link href="facebox/facebox.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="sendToFacebox" action="var.php" method="POST">
    <p><select name="q"> 
        <option value="Worked_1!"/>Worked_1</option>
        <option value="Worked_2!"/>Worked_2</option>
        <option value="Worked_3!"/>Worked_3</option>
    </select></p>
    <p><input type="submit" value="Send form data to facebox" /></p>
</form>

That works well, in that it sends the data to the php file, which is a good safety measure for when scripting is not available (some turn it off for security, other businesses deliberately disable it, etc…)

Now to put the scripting in there. Place the scripting at the end of the body, just before the </body> tag. That ensures that the scripting doesn’t slow the loading of the page, and also allows the scripting to easily interact with the contents of the page before it finishes loading.

In this case, you’re using jquery and facebox, so place the CSS link for facebox in the head, and the scripting libraries for jQuery and facebox at the end of the body. And, a script for what we’re going to write next too.


<head>
    ...
    <link href="facebox/facebox.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
    ...

    <script src="js/jquery.min.js"></script>
    <script src="facebox/facebox.js"></script>
    <script src="js/sendformtofacebox.js"></script>
</body>

The scripting should be as simple to achieve now, as the following code:


$('#submitResponseToLightbox').submit(function(event) {
    var form = this,
        serializedData = $(form).serialize();
 
    $.post(form.action, serializedData)
    .done(function (response, textStatus, jqXHR) {
        $.facebox(response);
    });
 
    // prevent the default web page submission of the form
    event.preventDefault();
});

We could even start refactoring some parts of the scripting around now, to help make it easier to see what is going on.
For example, the .done function, only needs the response parameter.


.done(function (response) {
    $.facebox(response);
});

And even simpler than that, because we’re passing the parameter straight to the facebox function, we can just pass the facebox function directly to done.


.done($.facebox);

We can also move some of the code out to separate functions, such as with an overrideFormSubmit function:


function overrideFormSubmit(form, func) {
    $(form).submit(function(event) {
        func.call(this);

        // prevent the default web page submission of the form
        event.preventDefault();
    });
}

overrideFormSubmit('#sendToFacebox', function () {
    ...
});

And with a formPostAjax function:


function formPostAjax(form, func) {
    var serializedData = $(form).serialize();

    $.post(form.action, serializedData)
    .done(func);
}
...
formPostAjax(this, $.facebox);

So that the final code that we end up with, supported by the overrideFormSubmit and the formPostAjax functions, is:


function overrideFormSubmit(form, func) {
    $(form).submit(function(event) {
        func.call(this);

        // prevent the default web page submission of the form
        event.preventDefault();
    });
}

function formPostAjax(form, func) {
    var serializedData = $(form).serialize();

    $.post(form.action, serializedData)
    .done(func);
}

overrideFormSubmit('#sendToFacebox', function () {
    formPostAjax(this, $.facebox);
});

Oh yes, there’s just one more change that I would make to the above (my) code, and it’s a formatting change.

$.post(form.action, serializedData)
.done(func);

JavaScript handles the above code as one statement, but it’s not all that clear to the person viewing it, if it’s supposed to be one statement or two.

The above code works the same as if it were in one line:


$.post(form.action, serializedData).done(func);

But with jQuery, it’s better to separate those different aspects of things if they aren’t tightly related, or may grow to handle different situations.
So, indenting the .done part helps to express that the .done part is connected with the part above it, and makes it easy to add other things that the .post may need to handle too.


$.post(form.action, serializedData)
    .done(func);