How to submit/ POST PHP Data to Facebox

Posted on March 17th, 2011

After browsing the web, I have seen that a lot of people have been having problems with sending php post data to a facebox. Well I have the how-to on just that!

If you don’t know what Facebox is, it’s a jQuery modal plugin, that is very sleek and resembles the modal from facebook.com, simple enough.

The purpose of these instructions is to be able to create a simple form in html, that uses php to post data to another remote page. In otherwords pass a variable to another website. Which is simple, but how can this be accomplished with Facebox?

Here is my example code:

manageForms.php – this is an excerpt of form manager script I wrote for a client, this is the code for the actions panel. There is a decrypt form submission option since the data submitted is encoded in the mysql database.

1
2
3
4
5
6
7
8
9
10
11
echo '<form method="post" name="decrypt" id="decrypt" action="decryptAndShow.php?form='.$form.'">';
echo '<div style="padding:10px;border:1px solid #000;margin:5px;">Actions: <a href="'.GRID_SOURCE.'excel.php?grid_id=grid">Export to Excel</a> | <a href="">Generate PDF</a> | <a href="">View HTML</a> | Decrypt form: <select name="x" onclick="document.decrypt.id.value=this.value">';
   while($row = mysql_fetch_array($q)){
      $company_name = base64_decode($row[company_name]);
      echo '<option value="'.$row[id].'">';
      echo 'ID: '.$row[id].' Company Name: '.$company_name.'';
      echo '</option>';
   }  
      echo '</select>';
      echo '<input type="hidden" name="id" id="id" value="no submission selected for decryption"><input type="button" value="Go!" onclick="decrypt_form()"></form>';
      echo ' | <a href="'.GRID_SOURCE.'/class/print.php?grid_id=grid">Print</a> | (Mode: <a href="manageForms.php?type='.$type.'&sales_rep='.$sales_rep.'&form='.$form.'&mode=edit">Edit</a> | <a href="manageForms.php?type='.$type.'&sales_rep='.$sales_rep.'&form='.$form.'&mode=view">View</a>)</div>';

Now here is the simple little ajax code to include, to make the decrypt form above post it’s ‘id’ variable to facebox.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
   function decrypt_form() {     
      $.facebox(function() {
         $.ajax({
            data: { "id" : $("#id").val() },
            error: function() {
               $.facebox("There was an error decrypting the form submission");
            },
            success: function(data) {
               $.facebox(data);
            },
            type: "post",
            url: "decryptAndShow.php?form='.$form.'"
         });     
      });  
   }
</script>

Here is how the code works, I created a function called decrypt_form() all this does is execute the code when it is called, which I called it through the button on the form. Next is to use the facebox function, and within that do a simple ajax post method. in data: this is where you will put the variable you want to post from the form, in my case is is ‘id’. Skip error, well change the error message to whatever you like. Keep success the same, and of course your type is ‘post’, and change the URL to whatever php file you had in the forms action.

Simple enough :)

Ok, now if you are having trouble just post a comment, but that should cover the how-to. If not here is the decryptAndShow.php a small excerpt of code:

1
2
3
4
5
6
7
8
$form = $_GET[form];
$id = $_POST['id'];
$pagetitle = 'Decryption of '.$form.' identification # '.$id.'';
include('../includes/connect.php');

$query = 'select * from '.$form.' where id = '.$id.'';
$result = mysql_query($query);
echo "<strong>data submission id:</strong> ".$id."<br>";

Leave a Reply

    To syntax highlight code just use [cc lang="whatever language here"]your code here[/cc]