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.
Use framesets:
<frameset cols="25%,*,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
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!!!
See below
myFile.html
<frameset cols="25%,*">
<frame src="myFileA.html" />
<frame src="myFileB.html" name="main"/>
</frameset>
myFileA.html
<html>
<body>
File A<br>
File B<br>
File C
</body>
</html>
myFileB.html
<html>
<body>
Default Page
</body>
</html>
Also create a.html, b.html and c.html.
Open myFile.html in browser and see the MAGIC...
Let me know if something else is needed!!!
Good Luck!!! Cheers!!!
Related
I have read a few posts from on here and a few from w3schools, but i don't seem to be able to get my head around it.
essentially i have a page that needs to load a list of users that have logged into a system between 2 dates. their boss will log in and using his/her group id, dateto and datefrom, generate a drop down list that displays all the users that logged in during that period.
so far i have managed to be able to pass 1 selection value across to the php called by the ajax, but i can't manage to work out how to "post" multiple input selections.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Operator Portal</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
.smallfont
{
font-size: 9px;
}
</style>
<script>
$(function() {
$('.datepicker').datepicker({ minDate: -21, maxDate: "+1D" });
});
</script>
</head>
<body>
<form action="results.php" method="post" target="_blank" class="ui-dialog-content" title="Owner Operator Web Portal">
<?php
include 'joomla-auth.php';
$name = JFactory::getUser() ->username;
?>
<input type="hidden" name="operatorID" value="<?php echo $name; ?>">
<p><strong>To show job details select the Car Number and Date Range below :</strong></p>
<table width="374" border="0" cellpadding="1">
<tr>
<td width="93"><strong>Car Number:</strong></td>
<td width="271"><select name="CarNumber" size="1" id="CarNumber" type="text">
</td>
</tr>
<tr>
<td><strong>Date From: </strong></td>
<td><input type="text" class="datepicker" name="DateFrom" id="DateFrom" />
<span class="smallfont">(date format: mm/dd/yyyy)</span></td>
</tr>
<tr>
<td><strong>Date To:</strong></td>
<td>
<input type="text" class="datepicker" name="DateTo" id="DateTo" />
<span class="smallfont">(date format: mm/dd/yyyy)</span></td>
</tr>
<tr>
<td height="50"> </td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="4">
</table>
<input name="Submit" type="submit" class="ui-buttonset" id="Submit" formaction="results.php" formmethod="POST" title="Submit" value="Submit">
<input name="Reset" type="reset" class="ui-buttonset" id="Reset" title="Clear All" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>
What i would like to be able to do is add another form element which is populated by the aforementioned ajax call
i think its meant to look something like this, but i cant manage to get it to work.
<html>
<head>
<script>
function showUser() {
// Retrieve values from the selects
var u = document.getElementByID('DateFrom').value;
var g = document.getElementByID('DateTo').value;
if (u=="" || g=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?u="+u+"&g="+g,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<div id="u">
<input type="text" class="datepicker" name="DateFrom" id="DateFrom" />
<span class="smallfont">(date format: mm/dd/yyyy)</span></td>
</div>
<div id="g">
<input type="text" class="datepicker" name="DateTo" id="DateTo" />
<span class="smallfont">(date format: mm/dd/yyyy)</span></td>
</div>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
Im obviously missing something very obvious. Now i realise that i havent put the hidden "input" into this second section of code, i was working on getting 2 inputs working before trying to get a 3rd.
thanks,
Michael
looks like you mispelled some javascript
var u = document.getElementByID('DateFrom').value;
var g = document.getElementByID('DateTo').value;
the 'ID' should be a 'Id.' Lower case D. Try that - it should be the reason why nothing is getting passed
var u = document.getElementById('DateFrom').value;
var g = document.getElementById('DateTo').value;
Also check that the DOM element is built and exists when the function is called. Putting the JS at the end of the page helps.
Another Thing to help understand AJAX is that the controller (getuser.php) receives its variable via $_GET, as you have specified. So when clicking on your button, you call your AJAX function and shoot it your variables (u & g) and your controller handles them via $_GET.
Your controller spits out an output and that is what received back on your original page. So you can simply echo a string with as many variable as you like in a format you can parse correctly. for example:
you echo an output from getuser.php:
echo $var1.'|'.$var2.'|'.$var3;
Then your original page can process further or w.e you need:
data = xmlhttp.responseText.split ( "|" );
var1 = data[0];
So you dont need any traditional HTML form when using AJAX. Simply code your variables with your Javascript function. For example:
<div id="fancyButton" onclick="sampleAJAXfunction(var1,var2,var3)"></div>
I hope this helps with your original question.
I am calling a console application from php which gives me some output. I have to display the output in a div after the console application is executed. I have passed the output from the console application as a SESSION to another page to display it. I have used ajax and javascript in my webpage too which make it more complicated. Now when I print the output the output in the div is the previous value of the SESSION.My code is as follows:
The main page:
<!DOCTYPE html>
<html>
<head>
$('#file').live('change', function()
{
$("#preview").html('');
$("#preview").html('<img src="images/loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(
{
target: '#preview'
}).submit();
<script type="text/javascript">
function myfunction()
{
$("#display").html('');
$("#display").html('<img src="images/loader.gif" alt="Uploading...."/>');
$("#retrieveimageform").ajaxForm(
{
target: '#display'
}).submit();
$('#tags').html('<?php include 'Tagsdisplay.php';?>');
%I want to include this only after it goes through the retrieveimage1.php page
where the console application is called and the session is created but this is
not happening the tags div is shown before the console application is called
and the other results are displayed on the display div
$('#tags').show();
};
</script>
<title></title>
</head>
<body>
<div id="maindiv">
<div id="banner">
<?php
include 'Header.php';
?>
</div>
<div id="wrapper">
<div id="imageupload">
<form action="uploadimage.php" method="post"
enctype="multipart/form-data" id="imageform">
<label for="file">Upload your image:</label>
<input type="file" name="file" id="file"><br>
</form>
</div>
<div id='preview'>
</div>
<div id='tags'>
</div>
<div class="clear"></div>
<form action="retrieveimage1.php" method="post"
id="retrieveimageform">
................................
<input type="submit" name="search" value="Search" id="btnSearch" onclick="myfunction()">
</form>
<div id="display"></div>
</div>
The retrieveimage.php where the console app is called and session is created:
session_start();
$start_time= microtime(true);
if (isset($_SESSION['img']))
{
$image=$_SESSION['img'];
$_SESSION['coarselbl1']=" ";
$_SESSION['coarselbl2']=" ";
$_SESSION['coarselbl3']=" ";
$_SESSION['finelbl1']=" ";
$_SESSION['finelbl2']=" ";
$_SESSION['finelbl3']=" ";
$_SESSION['finelbl4']=" ";
$_SESSION['category']=" ";
if($_POST['cat']=='handbag')
{
$_SESSION['category']="Bag";
$cwt=$_POST["slider1"];
$fwt=$_POST["slider2"];
$twt=$_POST["slider3"];
$swt=$_POST["slider4"];
$addr="handbags31_fourth.exe $image $cwt $fwt $swt $twt";
exec($addr,$data);
$_SESSION['coarselbl1']=$data[2];
$_SESSION['coarselbl2']=$data[3];
$_SESSION['coarselbl3']=$data[4];
}
The TagsDisplay.php where the tags are displayed:
<?php
session_start();
echo $_SESSION['category']."<br/>";
if($_SESSION['category']=="Bag")
{
echo "Coarse Color: ".$_SESSION['coarselbl1'].",".$_SESSION['coarselbl2'].",".$_SESSION['coarselbl3']."<br/>";
unset($_SESSION['coarselbl1']);
unset($_SESSION['coarselbl2']);
unset($_SESSION['coarselbl3']);
}
?>
The problem here is when I click the search button the myfunction is called and the tags div is displayed before the display div and the value printed are the previous session value. I want the tag div to come only after the display div is shown and the new session are assigned. How can I achieve that?
Fix the jquery line
$('#tags').html('<?php include 'Tagsdisplay.php';?>');
to this:
$('#tags').html('<?php include "Tagsdisplay.php";?>');
(note the quotes) because you are not even including the file that unsets the previous session's values.
My first HTML file has a form a with a radio button. I want the second file (which is PHP) to print a message about what they choose. With that message thought, I would like to have some text formating (size, color, etc.).
file.html:
<html>
<body>
<form action="file.php" method="post">
<input type="radio" name="favorite" value="rbOne">
<input type="radio" name="favorite" value="rbTwo">
<input type="submit" value="Submit">
</form>
</body>
</html>
file.php:
<html>
<head>
<style>
body{
background-color:white;
}
p{
color:white;
font-size:50px;
font-weight:bold;
}
</style>
</head>
<body>
<?php $choice = $POST_['favorite']; ?>
<p align="center">Thanks for voting for <?php echo "$choice" ?>!!</p>
</body>
</html>
When I click the Submit button, it going to the file.php page, but it displays this:
Thanks for voting for !!
It makes $choice blank.
You need PHP opening and closing tags:
<?php echo $choice;?>
Also, $POST_['favorite'] should be $_POST['favorite']
Im just learning javascript the last days (started PHP some months ago).
So, my code make this:
e.g
http://controljuridico.com/video01/
I have three files.
An Html file with the form.
A javascript file with the functions after click on "enviar" (send) button.
A php that process the data.
HTML file (index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link href="css/css.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/jquery.js" type="text/javascript" language="JavaScript"></script>
<script src="js/js.js" type="text/javascript" language="JavaScript"></script>
</head>
<body>
<div id="content">
<h1>Test.</h1>
<h1>Step 1) choose city</h1>
<br />
<br />
<label>test(*)</label>
<hr />
<br />
<form name="form_data" id="form_data">
<label>(*) City</label>
<br />
Medellin
<input type="radio" name="ciudad" value="Medellin" />
Manizales
<input type="radio" name="ciudad" value="Manizales"/>
Cali
<input type="radio" name="ciudad" value="Cali"/>
<br />
<label>(*) Especialidad</label>
<br />
<input type="button" value="Enviar" id="btn_enviar" />
<br />
<br />
<label id="mensaje"></label>
</form>
<div id="resultado" ></div>
</div>
</body>
</html>
js.js File
$(document).ready(function(){
$('#btn_enviar').click(function(){
if( validaRadio( 'ciudad','Ciudad' ) == false) return false;
$.ajax({
type:'POST',
url :'upload.php',
data: $('#form_data').serialize(),
beforeSend : function(){
$('#mensaje').html('Enviando datos...');
},
success: function (data){
$('#mensaje').html('Datos enviados correctamente.');
$('#resultado').html(data);
},
complete: function(){
$('#form_data').slideUp();
$('#resultado').slideDown();
}
});
});
});
Php File (upload.php)
<?php
$sergu = $_POST['ciudad'];
if ($_POST['ciudad'] == "Medellin") {
?>
<label>Ciudad Ingresada:</label>
<br />
<label><?php echo $_POST['ciudad'] ?></label>
<hr />
<?php
}else{
echo "it is not medellin....";
}
?>
So, this works very well but. What if I want this:
After click on "enviar" button also show another similar form at the left of this form.
I mean its just like choosing steps if you choose the step one I need another step and so on and I want that this another step just appear to the left of the previus form.
It is possible? how?
Thanks in advance for your help! I really appreciate it.
You could for example just hide the 'second form' when the page first loads via css like this:
<form id="second_form" style="display: none">...
and when your success function fires you remove the css like so:
success: function(){
...
$('#second_form').show();
}
Short answer: yes.
In jquery, there is .insertBefore(). An easy way to implement what you (kind of) want, is to just echo out the new form in the php, and instead of
$('#resultado').html(data);
Do the following:
$(data).insertBefore('#resultado');
This will insert the new form, echoed out by the PHP, under the previous one. Ofcourse you also have to delete the
$('#form_data').slideUp();
Else, the forms will be hidden.
I have an html page which contains a div that displays the html from an external php file.
It works great until I add a DOCTYPE declaration to the html page. The page continues to function, except the external content does not appear in the div.
<!DOCTYPE HTML>
<html dir="ltr" lang="en-US">
<head>
<title>Test Page</title>
<!--meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="./inc/jquery.js"></script>
<script type="text/javascript">
function getinfo()
{
$.post('prodinfo.php', { prodcode: prodcodeform.prodcodevar.value},
function(output)
{
$('#prodinfo').html(output).show;
});
}
function hideinfo()
{
$('#prodload').hide();
$('#openprodinfo').show();
}
function showinfo()
{
$('#prodload').show();
$('#openprodinfo').hide();
}
</script>
</head>
<body>
<input style="position:relative;" type="button" class="button" id="openprodinfo" title="Open" value="INFO" onclick="showinfo();">
<DIV id="prodload" style="position:absolute;margin-left:auto;margin-right:auto;display:none;text-align:center;background-color:#000000;z-index:200;border:1px solid #4e443b;">
<div id="prodinfo" style="position:relative;display:block;top:0;width:1000px;height:820px;background-color:#ffffff;margin-left:auto;margin-right:auto;">
</div>
<form name="prodcodeform">
<input type="text" readonly="readonly" id="prodcodevar" name="prodcodevar" value="nil" >
</form>
<div ID="prodinfobutton" style="position:relative;">
<input style="position:relative;" type="button" class="button" id="closeprodinfo" title="Close" value="CLOSE" onclick="document.getElementById('prodcodevar').value='nil'; hideinfo(); ">
</div>
<input type="button" id="button001" value="ONE" onclick="document.getElementById('prodcodevar').value='item1'; getinfo();">
<input type="button" id="button002" value="TWO" onclick="document.getElementById('prodcodevar').value='item2'; getinfo();">
</DIV>
</body>
</html>
You are switching to Standards mode, so your browser is no longer playing the game of being compatible with Internet Explorer 4.
prodcodeform.prodcodevar.value will error because prodcodeform is undefined.
You don't get a global variable for every element with an id or name in a document.
Change:
<form name="prodcodeform">
To
<form id="prodcodeform" method="post" action="prodinfo.php">
… and make it do something sane when a non-Ajax request gets posted (move it so it is around the buttons, make them submit buttons, and cancel the default event if the JS succeeds).
Then add:
var prodcodeform = document.getElementById('prodcodeform');
before you try to use the variable.
You started your body with </body> instead of <body>.