Submit form variable to lightbox

submit form and output in lightbox

Page 1 of 1

4 Replies - 12796 Views - Last Post: 14 August 2010 - 01:42 PM Rate Topic: -----

#1 sg552  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 16
  • Joined: 16-November 09

Submit form variable to lightbox

Posted 13 August 2010 - 01:38 PM

Hello everyone,

I need help with sending form variable to a lightbox.

OK, what this page suppose to do is user will insert his ID, click Papar ~Display in English, the page will refresh and his examination result will be output in the lightbox. More information on my test page here:

http://www.smkhutank...opendidikan.php
paste 158756873427 into the form and click Papar.

that lightbox popup is a remote file so I can paste mysql query in it. Also its not working actually. I already set the query manually like this:

$result = mysql_query("SELECT * FROM exam_data WHERE no_KP='158756873427'");


what I need is the form from infopendidikan.php to send its variable to the lightbox remote page resultpopup.php. Also you can click on the query popup on the left menu to see the fixed query. resultpopup.php need to retrieve variable from infopendidikan.php.

Anyway this is infopendidikan.php code:

<?php

//if the "submit"variable does not exist
//form has not been submitted
//display initial page
if (!$_POST['submit'])
{
?>
 <p>Sila masukkan No. Kad Pengenalan anda diruangan yang disediakan dan klik butang <i>Papar</i> keputusan.</p>
 
  <form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" name="form1" id="form1" >
<p>
<label><strong>No. Kad Pengenalan:</strong></label> 
<input name="no_KP" type="text" size="20" maxlength="20" id="FirstName" value="Contoh: 896537841253"/> 
<label><strong>Jenis Peperiksaan:</strong></label> 
<label for="select"></label>
<select name="select" id="select">
  <option value="PMR">PMR</option>
  <option value="SPM">SPM</option>
</select>
<br /><br />

<input class="button" type="submit" name="submit" id="button" value="Papar" />
</p>
</form>

<?php

}


else
{
//if the "submit" variable exists
//the form has been submitted
//look for and process form data
//display result

// Make a MySQL Connection

mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("exam") or die(mysql_error());

// tapis input pengguna
$no_KP = mysql_real_escape_string($_POST['no_KP']);
$select = mysql_real_escape_string($_POST['select']);

// Get a specific result from the "example" table
$result = mysql_query("SELECT * FROM exam_data WHERE no_KP='$no_KP' AND jenis_exam='$select'");  

// get the first (and hopefully only) entry from the result
$row = mysql_fetch_array( $result );
// Print out the contents of each row into a table 

if ($row['no_KP'] == "")
{
	echo "<p>Tiada maklumat dijumpai :(/>";

}
else
{
echo "<p><div align=\"center\"><h3>Penilaian Menengah Rendah<br>SMK Hutan Kampong</h3> </div>";


	echo "<script type='text/javascript'>
$(document).ready(function(){ 
                jQuery.facebox({ ajax: 'resultpopup.php' })
})
</script>";

echo "&nbsp;&nbsp;&nbsp;<b>Nama :</b> " .$row['nama']. "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>No. K/P :</b> " .$row['no_KP'];
// Get a specific result from the "example" table
$result = mysql_query("SELECT * FROM exam_data WHERE no_KP='$no_KP' AND jenis_exam='$select' ORDER BY kod_subjek ");  

echo "<form><p><table border='0'>";
echo "<tr> <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Kod M/P&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th> <th><div align=\"left\">Nama Mata Pelajaran&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th> <th>Gred</th> </tr>";
// keeps getting the next row until there are no more to get
while($row = mysql_fetch_array( $result )) {
	// Print out the contents of each row into a table
	echo "<tr><td>"; 
	echo "<div align=\"center\">" .$row['kod_subjek']. "";
	echo "</td><td>"; 
	echo $row['subjek'];
	echo "</td><td>"; 
	echo "<div align=\"center\">" .$row['gred'];
	echo "</td></tr>"; 
} 

echo "</table></p></form>";
echo "&nbsp;&nbsp;&nbsp;<A HREF=\"javascript:window.print()\">Cetak</A></p>";

}
}
?>

If I can get the result in the lightbox without page refresh that will be more cool. :) oh yes the lightbox I'm using is facebox from http://famspam.com/facebox/

Any help is appreciated. Thanks in advance :)

Is This A Good Question/Topic? 0
  • +

Replies To: Submit form variable to lightbox

#2 Jstall  Icon User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: Submit form variable to lightbox

Posted 14 August 2010 - 06:43 AM

Hi,

If I am understanding you correctly all you want to do is make the post to resultpopup.php rather than to infopendidikan.php. That would just require changing the "action" attribute of your form. However if you want to do it without a page refersh that will require some AJAX. Since you are already using jQuery it will simplify things. Something like:

$(function(){

     $("#form1").submit(function(){
         //data from the form
         var data = $(this).serialize();
         //post the data using an ajax call
         $.ajax({
            type:"POST",
            url:"resultpopup.php",
            data:data,
            success:function(){
               //do something here
            }
         });
         //return false to prevent the form from submitting normally
          return false;
     });

});//end document ready




Since I'm not sure of the structure of your resultpopup.php file, and am not familier with the facebox plugin(although I have a general idea of how it works) I couldn't say how to process the data. However that does accomplish what you wanted, I believe. Hope this helps :)

This post has been edited by Jstall: 14 August 2010 - 06:45 AM

Was This Post Helpful? 1
  • +
  • -

#3 sg552  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 16
  • Joined: 16-November 09

Re: Submit form variable to lightbox

Posted 14 August 2010 - 07:32 AM

Hi Mr,

I have succesfully send POST on the same page and then execute mysql query in facebox. Please take a look at my updated code below:

<?php 

//if the "submit"variable does not exist 
//form has not been submitted 
//display initial page 
if (!$_POST['submit'])
{ 
?> 
 <p>Sila masukkan No. Kad Pengenalan anda diruangan yang disediakan dan klik butang <i>Papar</i> keputusan.</p> 
  
  <form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" name="form1" id="form1" > 
<p> 
<label><strong>No. Kad Pengenalan:</strong></label>  
<input name="no_KP" type="text" size="20" maxlength="20" id="FirstName" value="Contoh: 896537841253"/>  
<label><strong>Jenis Peperiksaan:</strong></label>  
<label for="select"></label> 
<select name="select" id="select"> 
  <option value="PMR">PMR</option> 
  <option value="SPM">SPM</option> 
</select> 
<br /><br /> 

<input class="button" type="submit" name="submit" id="button" value="Papar" /> 
</p> 
</form> 

<?php 

} 


else 
{ 
//if the "submit" variable exists 
//the form has been submitted 
//look for and process form data 
//display result 

// Make a MySQL Connection 
mysql_connect("localhost", "root", "") or die(mysql_error()); 
mysql_select_db("exam") or die(mysql_error()); 

// tapis input pengguna 
$no_KP = mysql_real_escape_string($_POST['no_KP']); 
$select = mysql_real_escape_string($_POST['select']); 

// Cari No. KP user dalam pangkalan data 
$result = mysql_query("SELECT * FROM exam_data WHERE no_KP='$no_KP' AND jenis_exam='$select'");   

// get the first (and hopefully only) entry from the result 
$row = mysql_fetch_array( $result ); 
// Print out the contents of each row into a table  

// Banding No. KP user & papar maklumat 
if ($row['no_KP'] == "") 
{ 
    echo "<p>Tiada maklumat dijumpai :(/>"; 

} 
else 
{ 

    echo "<script type='text/javascript'> 
$(document).ready(function(){  
                jQuery.facebox({ div: '#info' }) 
}) 
</script>"; 

echo "<div id=\"info\" style=\"display:none;\">"; 

echo "<div align=\"center\"><h3>Penilaian Menengah Rendah<br>SMK Hutan Kampong</h3> </div>"; 


echo "<b>Nama : </b>" .$row['nama']. "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>No. K/P : </b>" .$row['no_KP']; 

// Get a specific result from the "example" table 
$result = mysql_query("SELECT * FROM exam_data WHERE no_KP= '$no_KP' ORDER BY kod_subjek ");   

echo "<form><p><table border='0'>"; 
echo "<tr> <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Kod M/P&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th> <th><div align=\"left\">Nama Mata Pelajaran&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th> <th>Gred</th> </tr>"; 
// keeps getting the next row until there are no more to get 
while($row = mysql_fetch_array( $result )) { 
    // Print out the contents of each row into a table 
    echo "<tr><td>";  
    echo "<div align=\"center\">" .$row['kod_subjek']. ""; 
    echo "</td><td>";  
    echo $row['subjek']; 
    echo "</td><td>";  
    echo "<div align=\"center\">" .$row['gred']; 
    echo "</td></tr>";  
}  

echo "</table></p></form>"; 
echo "<A HREF=\"javascript:window.print()\">Cetak</A>"; 


echo "</div>"; 

} 
} 
?>


I execute facebox lightbox using <div id=""></div> instead of running remote file. Thats mean resultpopup.php is not needed anymore.
Take a look at my page here:
http://www.smkhutank...opendidikan.php
paste 158756873427 into the form and click Papar.

but there is a problem (well not really) everytime student request their examination result the page will be refresh. I use your code replacing the current facebox function but nothing happen.

Oh yes, your code above I use it replacing my current facebox function but nothing happen? I was hoping for no page refresh function.

I open to suggestion whether to use remote file or running with <div id=""></div>. Anything that can get query result in facebox lightbox without page refresh is fine by me.

Thanks for your time Mr. :)

This post has been edited by sg552: 14 August 2010 - 07:38 AM

Was This Post Helpful? 0
  • +
  • -

#4 Jstall  Icon User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: Submit form variable to lightbox

Posted 14 August 2010 - 09:42 AM

Hi,

If you don't want the page to refresh then you will of course still need to do some AJAX. If I were going to do this I would still use a seperate file, just to make things easier to work with(in my mind anyway).

My first page would look like this :

 <p>Sila masukkan No. Kad Pengenalan anda diruangan yang disediakan dan klik butang <i>Papar</i> keputusan.</p> 
  
  <form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" name="form1" id="form1" > 
<p> 
<label><strong>No. Kad Pengenalan:</strong></label>  
<input name="no_KP" type="text" size="20" maxlength="20" id="FirstName" value="Contoh: 896537841253"/>  
<label><strong>Jenis Peperiksaan:</strong></label>  
<label for="select"></label> 
<select name="select" id="select"> 
  <option value="PMR">PMR</option> 
  <option value="SPM">SPM</option> 
</select> 
<br /><br /> 

<input class="button" type="submit" name="submit" id="button" value="Papar" /> 
</p> 
</form> 
<div id="info" style="display:none;"></div>

<script type = 'text/javascript'>

 $(function(){
      //handle the form submitting
      $("#form1").submit(function(){
          var data = $(this).serialize();
          //do an ajax call that expects html to be returned
          $.ajax({
             type:"POST",
             url:"resultpopup.php",
             dataType:'html',
             data:data,
             success:function(data){
                //put the returned html into the info div and turn it 
                //into a facebox popup
                $("#info").html(data);
                jQuery.facebox({ div: '#info' });
             }

          }); // end ajax
     
         //prevent form from submiting normally
         return false;
      })
  });
</script>



Now take the code for processing the query and outputting the results into the
resultpopup.php file. Note that I change checking for $_POST['no_KP'] instead of $_POST['submit']. This is because the .serialze method does not add the submit button value to the string.

<?php
if(isset($_POST['no_KP']))
{
//the form has been submitted 
//look for and process form data 
//display result 

// Make a MySQL Connection 
mysql_connect("localhost", "root", "") or die(mysql_error()); 
mysql_select_db("exam") or die(mysql_error()); 

// tapis input pengguna 
$no_KP = mysql_real_escape_string($_POST['no_KP']); 
$select = mysql_real_escape_string($_POST['select']); 

// Cari No. KP user dalam pangkalan data 
$result = mysql_query("SELECT * FROM exam_data WHERE no_KP='$no_KP' AND jenis_exam='$select'");   

// get the first (and hopefully only) entry from the result 
$row = mysql_fetch_array( $result ); 
// Print out the contents of each row into a table  

// Banding No. KP user & papar maklumat 
if ($row['no_KP'] == "") 
{ 
    echo "<p>Tiada maklumat dijumpai :(/>"; 

} 
else 
{ 



echo "<div align=\"center\"><h3>Penilaian Menengah Rendah<br>SMK Hutan Kampong</h3> </div>"; 


echo "<b>Nama : </b>" .$row['nama']. "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>No. K/P : </b>" .$row['no_KP']; 

// Get a specific result from the "example" table 
$result = mysql_query("SELECT * FROM exam_data WHERE no_KP= '$no_KP' ORDER BY kod_subjek ");   

echo "<form><p><table border='0'>"; 
echo "<tr> <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Kod M/P&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th> <th><div align=\"left\">Nama Mata Pelajaran&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th> <th>Gred</th> </tr>"; 
// keeps getting the next row until there are no more to get 
while($row = mysql_fetch_array( $result )) { 
    // Print out the contents of each row into a table 
    echo "<tr><td>";  
    echo "<div align=\"center\">" .$row['kod_subjek']. ""; 
    echo "</td><td>";  
    echo $row['subjek']; 
    echo "</td><td>";  
    echo "<div align=\"center\">" .$row['gred']; 
    echo "</td></tr>";  
}  

echo "</table></p></form>"; 
echo "<A HREF=\"javascript:window.print()\">Cetak</A>"; 
}




It is important to note that I copied and pasted most of this from your code so there could be a syntax error or two in there. This should produce what you are looking for. There could very well be better ways to do this but this is the one I came up with. I hope it helps :-).
Was This Post Helpful? 1
  • +
  • -

#5 sg552  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 16
  • Joined: 16-November 09

Re: Submit form variable to lightbox

Posted 14 August 2010 - 01:42 PM

Alhamdullilah, its finally done. Dear sir, thank you sir. I invite you to my webpage http://www.smkhutank...opendidikan.php - some test ID could use 158756873427, 763498652167 no more page refresh :D Also the record not found is also in the lightbox, not part of my plan but that is nice.

Here's more cookie for you Posted Image

It's has been like 12 hours I search the net. Thank you again sir :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1