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);
});