create frame like structure in php/html?

php html iframe frames

11,176

Solution 1

<frameset cols="25%,*,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>

Solution 2

A way to do it without frames using JQuery. You would have to get a copy, the jquery version I use here is a bit old, but the sample is still valid and it is not as intimidating as you might think. A static form on the left that has the variables you wish to submit/track, and then a JQuery call (just javascript) i call the loading of the other page within a div. all dynamic, no page reload required etc.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Some Page</title>
        <script type="text/javascript" src="includes/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
            function loadform1() {
                jQuery.ajax({ // create an AJAX call...
                    data: jQuery('#myform1').serialize(), // get the form data
                    type: 'POST', // GET or POST
                    url: 'form1resultpage.php', // the file to call
                    success: function(response) { // on success..             
                        $('#displaydata').html(response); // update the DIV
                    }
                // might need to add a return false here so the page won't reload
                });
            };
            function loadform2() {
                jQuery.ajax({ // create an AJAX call...
                    data: jQuery('#myform2').serialize(), // get the form data
                    type: 'POST', // GET or POST
                    url: 'form2resultpage.php', // the file to call
                    success: function(response) { // on success..             
                        $('#displaydata').html(response); // update the DIV
                    }
                // might need to add a return false here so the page won't reload
                });
            };
        </script>
    </head>
    <body>
        <div style="float:left;width:50%;">
            <form id="myform1" name="myform1" onsubmit="loadform1()">
                <div style="float:left; width: 150px;">Criteria 1</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria1" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <div style="float:left; width: 150px;">Criteria 2</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria2" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <input type="submit" value="Show Form 1 results" />
            </form>
            <div style="clear:both; height: 30px;"><hr></div>
            <form id="myform2" name="myform2" onsubmit="loadform2()">
                <div style="float:left; width: 150px;">Criteria 1</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria1" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <div style="float:left; width: 150px;">Criteria 2</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria2" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <input type="submit" value="Show form 2 results" />
            </form>
        </div>
        <div id="displaydata" style="float:left;width:50%; text-indent: 30px;">
            This is the display page, it will change            
        </div>
    </body>
</html>

then it's just a matter of creating a form per "function" you with to display, and then copy/pasting and modifying the jquery call to submit the other form to another page... I will edit the example to have 2 forms :). If you just need 1 form that performs functions with 10 or 12 fields, remove the "myform2" stuff and you're good to go!!!

11,176

Author by

learner

Updated on June 04, 2022

Comments

learner almost 2 years

I need to create a page having two, frame like structure. On left I always want to show a small form with around 10 entries which after clicking the submit button perform some processing and shows result. I need to have access to the left part at all times. The right part is for processing data, accessing database and display results. Earlier I created a page with frames but has some issues with chrome and the fact that fame is depricated, I want to swich to some other structure. I am comfortable with php and html. Someone suggested me ajax but I am zero in that.

How can I accomplish frame like structure having two parts that load different files? Thanks

The reason I dont want to use frame is given below:

I have a testframe.php file that loads testinpform.php into right frame containing code to create 3 buttons. when I load the testframe.php, It shows all the the buttons in the right frame and all the buttons work as desired for the first time. once a button is clicked, none of the buttons work after that click. When I move to some other page using some other link and come back, then these buttons start working again.

This beavior is shown only by Chrome browser. If I do not use frame and just load testinpform.php, all the buttons work as desired.

In firefox, the same code work pefectly fine with or without frame.

So, Is this a problem of chrome or I need to add something in my code to make it work in all browsers.

My code is as follows.

testframe.php

<?php
function generateFrames() {
echo "<FRAMESET  COLS=\"360,*\">\n";
echo "<FRAME noresize NAME=\"input\" SRC=\"otherfile.php?page=left\">\n";
echo "<FRAME NAME=\"output\" SRC=\"testinpform.php?page=right\">\n";
echo "</FRAMESET>";
}

if($page=="left") {
echo "<BODY BGCOLOR=\"#FFFFFF\">";
echo "<FONT FACE=\"Arial,Verdana,Helvetica\" COLOR=\"FF0000\" SIZE=\"3\">PHP Tester</FONT>";
echo "<FORM METHOD=\"get\" ACTION=\"processForm.php?page=right\"TARGET=\"output\">\n";
echo "<TABLE BORDER=\"0\" CELLSPACING=\"0\" CELLPADDING=\"0\">\n";
echo "<TR><TD><TEXTAREA NAME=\"input\" COLS=\"100\" ROWS=\"40\"
WRAP=\"virtual\">".$input."</TXTAREA></TD></TR>\n";
echo "<TR><TD ALIGN=\"center\"><INPUT TYPE=\"submit\"
VALUE=\"Execute\"></TD></TR></TABLE></FORM>\n";
echo "</BODY>";
}

else if ($page=="right") {
echo "<BODY BGCOLOR=\"#FFFFFF\">";
if(empty($input)) {
echo "Ready to parse...";
}
else {
$input=stripSlashes($input);
eval($input); 
}
echo "</BODY>"; 
}

else {
generateFrames();
}
?>

testinpform.php

<?php
$filenames =  array("file1.txt", "file2.txt", "file3.txt");
$namesToshow = array("file1", "file2", "file3");
$numfiles = count($filenames);

for ($i = 0; $i< $numfiles; $i++)
 {
 echo"<form enctype=multipart/form-data method=GET
 action='viewResult.php' target='_blank' >";
 echo"<input type='hidden' name='filetoview' value= $filenames[$i] >";
 echo"<input type='submit' value= $namesToshow[$i] >";
 echo'</FORM>';
  }

 echo"<a href= abc.com>click here to go to next page and then come back using the back button>";
 ?>

Thanks

@Silvertiger Thanks for your reply. I am looking at your code and try to customize it according to my need.

I am giving the simplest example for my case.

frame.php contains the code suggested by @silvertiger.

In the left part, I want to include "inputform.php" that has (for example) following code:

<form name="secondForm" method="POST" enctype="multipart/form-data" action = 'process.php' target = "output">      
<input type="hidden" name="organism" value="human" >
Enter the input in the text box:<br />
<textarea name="textArea" cols="40" rows="6" >Enter your query here</textarea> <br />
<input type="submit" value="submit" class="html-text-box"> 
</form>

When I call frame.php and press the submit button, the input form pass all the data to process.php which will show its result on the right half.

process.php file is:

<?php
$organism= $_POST['organism'];
$textArea = $_POST['textArea'];
print ("\n$organism, $textArea");
?>

What changes do I need in the frame.php file below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Some Page</title>
        <script type="text/javascript" src="includes/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
            function loadform1() {
                jQuery.ajax({ // create an AJAX call...
                    data: jQuery('#myform1').serialize(), // get the form data
                    type: 'POST', // GET or POST
                    url: 'process.php', // the file to call
                    success: function(response) { // on success..             
                        $('#displaydata').html(response); // update the DIV
                    }
                // might need to add a return false here so the page won't reload
                });
            };            
        </script>
    </head>
    <body>
        <div style="float:left;width:50%;">
            <form id="myform1" name="myform1" onsubmit="loadform1()">
                <div style="float:left; width: 150px;">Criteria 1</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria1" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <div style="float:left; width: 150px;">Criteria 2</div>
                <div style="float:left; margni-right: 20px;">
                    <input type="text" name="criteria2" value="" />
                </div>
                <div style="clear:both; height: 30px;"></div>
                <input type="submit" value="Show Form 1 results" />

            </form>            
     <div style="clear:both; height: 30px;"><hr></div>         
        </div>

        <div id="displaydata" style="float:left;width:50%; text-indent: 30px;">
        <?php include('defaultpage.php'); ?>
        </div>
    </body>
</html>

Thanks a lot.

learner over 12 years

Thanks, I am aware of this method and already using FRAMES. I want to switch to some other method due to the reason that chrome has some issues dealing with this structure.
learner over 12 years

I have two division on a page. Left always remain visible. On the basis of output on left and when the submit is pressed, the value is POSTed to another page that loads on the right. The code above not not working as desired. Thanks a lot
Fahim Parkar over 12 years

What issues do you have? which part won't work?? I don't think any issues in this....
Silvertiger over 12 years

in order for this to work you have to have created the "form1resultspage.php" and the "form2resultspage.php", and customize the form for your purposes. This was a framework for you to work off of. the loading page on the right requires you download and have a local copy of the jquery file on your web server. this code should work fine as long as you read it and adjust for your own circumstances.
Silvertiger over 12 years

the example I provided has a division on the left (50% of the page) and a division on the right (50% of the page). the right side is recreated and displayed each time you submit one of the forms (or single form) on the left side. From what you describe, this is exactly what you are looking for.