Another Function of iFrame, I Use iFrame For Trigger

Generally, iframe is use to display another webpage load into the main webpage. But, I use an iframe in anti-mainstream, maybe because I was too creative :D or I am too stupid in webbase programming with php and javascript. Here I use iframe as a trigger to insert, update, delete.

With connectivity to MySQL database I succeeded in changing the general function of the iframe and make it as a trigger.

In fact, is the same point to load another webpage into the main webpage. But, another webpage that loaded in this case contains queries insert, update, delete. And its iframe visibility set to hidden.

Here I am just trying to show that, any attribute in any programming language can be utilized by your creativity, there are no standard rules on programming, because the important thing is the end result of what goals you need to accomplish.

I included an example of a simple module that contains the input form and a data table that shows results from the input. I created this module using the programming language PHP and javascript and I created a simple way that is easy to understand for beginners who want to learn programming php and javascript, connected with mysql database. please download the module at the following Link

Create Database

The first thing you need to do is create a database with the name dbtest and create table with name tbl_reg with two fields: id(int, auto increment) and name(varchar, 200).

Create Conncetion page (conncection.php)

<?php
$host = "localhost"; //your mysql host address
$database_name = "dbtest"; //your mysql database name
$user_name = "root"; //your mysql user name
$password = "root"; //your mysql password
$conn=mysql_connect($host,$user_name,$password);
mysql_select_db($database_name,$conn);
?>


Create Main Webpage (index.php)
<html>
<head>
<title>bagustuta.com</title>
</head>
<body>
<div>
Another function of the iframe on php and javascript. <br/>Use iframe to insert, update, delete the mysql database.
</div>
<div>
 
</div>
<div>
Input Form

<iframe style="position: absolute; visibility:hidden" id="ipost"></iframe>

</div>
<div>
Name : <input type="text" id="name" placeholder="Type Your Name">   <input type="button" id="btnsave" onclick="save(document.getElementById('name').value,document.getElementById('ids').value)" value="Save"/>
<input type="hidden" id="ids" value="">
</div>
<div>
 
</div>
<div>
Data Table
</div>
<div id="showdata"></div>
</body>
</html>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
<script type="text/javascript">

//load data
$('#showdata').load("data.php");

//save & edit function
function save(val,id){
if(id==""){
document.getElementById('ipost').src="post.php?methode=save&val="+val;
}else{
document.getElementById('ipost').src="post.php?methode=edit&val="+val+"&id="+id;
}
document.getElementById('ids').value="";
document.getElementById('name').value="";
$('#showdata').load("");
$('#showdata').load("data.php").fadeIn();
}

//delete function
function del(val){
document.getElementById('ipost').src="post.php?methode=delete&val="+val;
$('#showdata').load("");
$('#showdata').load("data.php").fadeIn();
}

</script>

Create Data Result (data.php)
<?php
include("connection.php");
?>
<table cellspacing="0">
<tr align="center">
<td style="border-bottom: 1px solid #000; border-left: 1px solid #000; border-top: 1px solid #000;" width="100"> NAME
</td>
<td style="border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; border-top: 1px solid #000;" width="100"> ACTIONS
</td>
</tr>
<?php
$qry="SELECT id,name from tbl_reg order by id";
$rs = mysql_query($qry);
while($rows=mysql_fetch_array($rs)){
?>
<tr>
<td style="border-bottom: 1px solid #000; border-left: 1px solid #000; border-top: 0px solid #000;" width="100">
<?php echo $rows["name"]; ?>
</td>
<td align="center" style="border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; border-top: 0px solid #000;" width="100">
<input type="button" id="edit" onclick="document.getElementById('name').value='<?php echo $rows["name"]; ?>';document.getElementById('ids').value='<?php echo $rows["id"]; ?>'" value="Edit"/> <input type="button" id="del" onclick="del(<?php echo $rows["id"]; ?>)" value="Delete"/>
</td>
</tr>
<?php
}
?>
</table>

Create Post Page (post.php)
<?php
include("connection.php");
$val=$_REQUEST["val"];
$methode=$_REQUEST["methode"];
$id=$_REQUEST["id"];

if($methode=="save"){
$qry="INSERT INTO tbl_reg(name) VALUES('$val')";
$rs = mysql_query($qry);
}
if($methode=="delete"){
$qry="DELETE FROM tbl_reg WHERE id=$val";
$rs = mysql_query($qry);
}
if($methode=="edit"){
$qry="UPDATE tbl_reg SET name='$val' WHERE id=$id";
$rs = mysql_query($qry);
}
?>