I have a problem that I really cannot figure out how to solve. I have 2 different pages of the same project. It allows users to create a form and submit it to a different webpage. And there are 2 versions, one that just request the fields types, names and values, and another that allows users to input the full form manually.
So, as my question stated, in the first case it works perfectly, and in the second case it comes back to the same page, and it's driving me crazy! I will put the code at the end, but now the steps to reproduce the error. So far it's a page hosted for free as I'm using it for testing purposes:
Go to http://saveyourself.vacau.com/form/
Put this in the fields (this is actually a test account for this page):
Page: http://newfutureuniversity.org/
Method: "Post"
Name 1: "User"
Value 1: "User"
Type 1: "text"
Name 2: "Pass"
Value 2: "Password"
Type 3: "Password"
Name 3: "Login"
Value 3: "1"
Type 3: "Hidden".
Press "Show form", and the form will be displayed
Now see the source code of the page, and copy from "<form...>" to "</form>"
Go to this page http://saveyourself.vacau.com/form/manual/ and paste it there.
Press "Show form", and you should get to EXACTLY the same page as you got after step 3 (check the html, it's 100% the same, the only change is the address, /manual/).
Now, here is the trick. Despite both pages have exactly the same html, if you press the button "Send form" after step 3, you would be logged into the new page, but if you press the button "Send form" after step 6 (in /form/manual/ ), that page is refreshed and the form that you pasted is deleted. How is this possible? As far as I know, there is no PHP involved here, as when the form is displayed, it's just plain html and the new page should handle the whole PHP. So, if it receives the same form, it should answer in the same way, right? In the second page it's not used the "$_SERVER['HTTP_REFERER'];" (where the visitor comes from), nor anything similar. Also, there's 0 javascript. I post now the html in case it helps, and some of the PHP (not to put too much code).
So the question is, does anyone have any idea of why the second form doesn't work?
Thank you so much.
HTML code (it's the same in both pages after step 3 or 6):
<!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>
<title>Send form</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
</head>
<body style="background: #DDFFFF; width: 80%; height:100%; margin: 0 10% 0 10%; text-align: center;">
<h1>Send form</h1>
<form action="http://newfutureuniversity.org/" method="POST">
Web page: http://newfutureuniversity.org/<br>
Method: POST<br><br>
<table style="margin-left: auto; margin-right: auto;">
<tr>
<td style="text-align: right;">
User:</td><td><input type='text' name='User' value=''></td>
</tr>
<tr>
<td style="text-align: right;">
Pass:</td><td><input type='password' name='Pass' value=''></td>
</tr>
<tr>
<td style="text-align: right;">
Login:</td><td><input type='text' name='Login' value='1'></td>
</tr>
</table><br>
<input type="submit" value="Send form">
</form>
</body>
</html>
Simplified PHP code from the page working ( http://saveyourself.vacau.com/form/ ):
//Header, body and others go before of this
<?php
if ($_POST['sent']==1&&empty($_POST['source'])) //If form is submited
{
$i = 1;
?>
<form action="<?php echo $_POST['page']; ?>" method="<?php echo $_POST['method']; ?>">
Web page: <?php echo $_POST['page']; ?><br>
Method: <?php echo $_POST['method']; ?><br><br>
<table style="margin-left: auto; margin-right: auto;">
<?php
while (!empty($_POST['nam'.$i]))
{ ?>
<tr>
<td style="text-align: right;">
<?php echo $_POST['nam'.$i].":</td><td><input type='".$_POST['typ'.$i]."' name='".$_POST['nam'.$i]."' value='".$_POST['val'.$i]; ?>'></td>
</tr>
<?php
$i++;
}
?>
</table><br>
<input type="submit" value="Send form">
</form>
<?php
}
elseif (!empty($_POST['source'])) //If user just wants to create a form and see the code
{
//I think this bit is irrelevant codereview, so I skipped it.
}
else //Body of the first page shown
{ ?>
<form method="post">
Web page: <input type="text" name="page">
Method to send: <select name="method"><option value="POST">Post</option><option value="GET">Get</option></select><br>
<table style="border: 1px solid #AAA; margin-left: auto; margin-right: auto;">
<tr>
<td>Number</td>
<td>Name</td>
<td>Value</td>
<td>Type</td>
</tr>
<?php for ($i = 1; $i <= 10; $i++)
{ ?>
<tr>
<td><?php echo $i; ?></td>
<td><input type="text" name="nam<?php echo $i; ?>"></td>
<td><input type="text" name="val<?php echo $i; ?>"></td>
<td>
<select name="typ<?php echo $i; ?>">
<option value="text">Text</option>
<option value="password">Password</option>
<option value="radio">Radio</option>
<option value="checkbox">Checkbox</option>
<option value="hidden">Hidden</option>
<option value="reset">Reset</option>
<option value="submit">Submit</option>
</select>
</td>
</tr>
<?php } ?>
</table><br>
Don't worry, a submit button is automatically added.<br>
<input type="hidden" name="sent" value="1">
<input type="submit" value="Show form">
<input type="submit" name="source" value="Form code">
</form><?php } ?>
</body>
</html>
Full PHP code from the page not working ( http://saveyourself.vacau.com/form/manual/ ):
<!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>
<title>Send form</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
</head>
<body style="background: #DDFFFF; width: 80%; height:100%; margin: 0 10% 0 10%; text-align: center;">
<h1>Send form</h1>
<?php
if ($_POST['sentbrr']==1) //If form is submited
echo stripslashes($_POST['code']);
else //First time
{ ?>
<form method="post">
Enter the code for the form manually<br>
<textarea name="code" style="width: 100%; min-height: 450px;"></textarea><br>
<input type="hidden" name="sentbrr" value="1">
<input type="submit" value="Show form">
</form>
<?php
} ?>
</body>
</html>
If you look at the second (not working) page, you have:
<form method="post">
with no action="" attribute attached to it. Therefore your form does not know where to submit the form to.
Short answer: It's the browser's fault (bug?).
Long answer: Behavior varies in different browsers. After testing on IE9, Firefox, and Safari, this issue seems to be a web-kit bug.
This hypothesis is also backed by the numerious "form/action" issues reported at crbug.com and bugs.webkit.org
Research:
Kypros seems to be right, though the answer is not as obvious.
If you go to the faulty page (the one that does not send the right "Request URL" when form submitted), and try to inspect it (for instance with "chrome Developer Tools") you will see that the form "action" attribute is indeed empty.
This is in contrast with the source code view which shows the attribute is correctly set!
It seems PHP (or the browser?) is protecting us by eliminating the "action" field from the actual DOM, though I can't find the reason why anywhere.
To verify this I changed the code to:
echo '<form action="http://newfutureuniversity.org/" method="POST">';
echo $_POST['code'];
..and pasted in the rest of the form. This submits well. It doesn't seem to be coming from "stripslashes". You could also just pass in "action" as another form input (instead of inside "code") and it also just works:
echo '<form action="'.$_POST['action'].'" method="POST">';
echo stripcslashes($_POST['code']);
After I ran the same scenario in IE9 - the "problem" does not seem to exist! This makes me think that browser security is the culprit. Assuming it's a bug with chrome/web-kit, I opened a bug in crbug.com, updates will be POSTed here.
Related
I have following codes
<html>
<head>
<title>Javascript function </title>
<style type="text/css">
.box
{
width:400px;
background-color:#F0F8FF;
}
h4
{
color:#09F
}
</style>
<script type="text/javascript">
function hello(){
var xx=eval(form1.text1.value);
var yy=eval(form1.text2.value);
form1.text3.value=xx+yy
}
</script>
</head>
<body onLoad="form1.text1.focus()">
<center>
<div class="box">
<h1 style="color:#2c80d3 ">Javascript Function</h1>
<table border="0" cellspacing="1" cellpadding="1" width="25%">
<form name="form1" action="textboxes.php" method="Post">
<tr><td> First</d><td width="20px"><input type="text" name="text1" value=""></td></tr>
<tr><td> Second</d><td><input type="text" name="text2" value="" onBlur="hello()"></td></tr>
<tr><td> Result</d><td><input type="text" name="text3" value="" disabled=""></td></tr>
</form>
</table>
<h4>Enter any digit in text1 and text2 and see result in text3</h4>
<h4>Is it possible to do above with php without submitting FORM?</h4>
</div>
</center>
</body>
</html>
No problem, It works fine.
I used java script to sum two numbers.
Is it possible to add two numbers with php without using any submit button?
If yes then please guide me.
http://i41.tinypic.com/2rfev7m.jpg
If you want to do it without a submit button and in php, you can use an AJAX request in javascript to the server, which will compute to value and then return it to the client.
here is the working sample.
First of all we need to create a html file named add.html.
here is the code of the add.html file…
<!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>Addition</title>
</head>
<body>
<form action="result.php" method="post">
Enter first Integer: <input type="text" name="first" size="5" /><br/>
Enter second Integer: <input type="text" name="sec" size="5" /><br/>
<input type="submit" name="submit" value="Add" />
</form>
</body>
</html>
place it in the pseudo server folder. If your pseudo server is WampServer, then the path of the file will be
C:/wamp/www/add.html
now open your favorite browser and to the address bar type
localhost/add.html
You can see the add.html page. add with number
You can see two text box where you can input the numbers and a submit button. You can input two numbers into the input boxes and press the submit button (The Add button). But nothing will happen. Because the php will do the adding job.
Lets create the php file. You can name it result.php. As I have already declared in the add.html form action is the result.php.
<form action="result.php" method="post">
if you give different name of the php file then please change the form action php name in add.html.
Here is the php code of result.php…
<?php //Starting of php
$first = $_POST['first']; //Getting Value of first integer from add.html
$sec = $_POST['sec']; //Getting Value of Second integer from add.html
$res = $first + $sec; //Adding the two values and placing the added result to 'res' variable
echo 'Added Result:';
echo $first." + ".$sec." = ".$res; //Showing the result to the screen
//Ending of php
?>
save this result.php file in the server path where you have already placed the add.html file.
Now it is the time to test. Open your favorite browser and in the address bar type…
localhost/add.html
enter two numbers and hit the Add button. you will see that the browser will direct you to the result.php page where you can see the added result.
hope this will help you.
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.
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']
I have a relatively simple sounding question that hopefully entails a simple answer. I am currently developing a website that is a scroll-down type; everything is on one page, you know the one. My 'contact' section is at the very bottom of the page, and I am of course doing form validation with PHP. The validation part works, I have no trouble with that. However, if validation fails, the browser takes me back all the way back to the top of the page; this is inconvenient for obvious reasons.
I am aware of the 'header()' function, which I can use to keep me at the bottom of the page if an error occurs. As an example, at the top of my HTML page before the DOCTYPE, I can write:
if ($errors) {
header(Location: 'somelocation.php#contact');
}
This works, but for some reason it prevents my PHP embedded in my html to work. If some errors occur, I want to display them using PHP on the page:
<h2>Contact</h2>
<?php if($errors) { ?>
<p class="warning">Please fix the errors</p>
<?php } ?>
'Please fix the errors' does not appear. It does appear however, if I remove the header function from the page, so I know the problem is related. So basically, if I remove the header() function, the page goes back to the top, and the errors show; if I keep the header() function, the page correctly stays where it is, but no errors show.
Alternatively, this question also can be asked in the case of, what happens when the form is validated correctly, the 'header' function is called, and I want to stay at the bottom of the page and display some HTML saying 'Thanks, your form has been submitted'? (I don't want to go to a 'thank-you' page or anything, just stay in the same spot and give a 'thanks' on the page) I assume I'd run into the same problem. Is there a solution to this?
Thanks in advance!
Specifying a location in the header will cause the browser to redirect to that URI. This is being called before any output is sent to the browser.
When the page is reset, $errors == false, so the paragraph isn't displayed.
It sounds like you need to integrate AJAX, or a mixture of server- and client-side code here.
A very simple and efficient way to validation of a form is using jquery, A perfect example of this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for="cname">Name</label>
<em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cemail">E-Mail</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">URL</label>
<em> </em><input id="curl" name="url" size="25" class="url" value="" />
</p>
<p>
<label for="ccomment">Your comment</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>
Happy Coding.!!!
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!!!