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.
Related
Define Colors With RGBA Values
Add the Following code under style
<!DOCTYPE html>
<html>
<head>
<style>
#p7 {background-color:rgba(215,215,215,1);}
</style>
</head>
<body>
id="p7">Disabled Grey none transparent
Simple Example as follow
<!-- this appear in request shown disabled by gray color -->
<input id="p7" type="textbox" name="prn" value="100" readonly="readonly"" />
</form>
Result
I did use the following code but it is not working so I had make my work around as above
<input readonly style="color: Grey; opacity: 1; ">
An other solution tested and works
<tr>
<script type="text/javascript">
$(document).ready(function () {
$('#p8').submit(function () {
$("input").prop('disabled', false);
//Rest of code
})
});
</script>
<td align="right">Employee Name</td>
<td><input id="p8" type="text" name="name" <?php if(isset($_GET['id'])) print('value="'.$row['name'].'"'); ?>Disabled /></td>
</tr>
<tr>
I am trying to create a simple online form using html and php tooutput to a .csv. I have no problem doing this for a single form but the users of this form will usually have multiple entries at once. To make it easier for them I am using a form of which you can add lines to submit more entries in one submission. Below is the HTML and PHP code.
The issue I am having is the PHP part. I can only get it to ever submit the first entry.
Any ideas? I have a working version of the site/form here, but again, only the first entry every gets entered into the .csv. Thanks for the help.
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mdcstyle.css" />
<title>Submission form</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var currentItem = 0;
$('#addnew').click(function(){
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<tr><td>Area:<input class="textfield" name="area'+currentItem+'" id ="area'+currentItem+'"type="text" /></td><td>Contractor:<input class="textfield" name="contractor'+currentItem+'" id ="contractor'+currentItem+'"type="text" /></td></tr>';
$('#data').append(strToAdd);
});
});
//]]>
</script>
</head>
<body>
<div class="content">
<h2>header text</h2>
<p>Please complete this form for Udpates. Add a new line if you have more than one project.</p>
<form id="myform" name="form1" method="post" action="signup2.php">
<table class="dd" width="100px" id="data">
<tr>
<td>Area:<input class="textfield" name="area0" id="area0" type="text" /></td>
<td>Contractor:<input class="textfield" name="contractor0" id="contractor0" type="text" /></td>
</tr>
</table>
<input class="subbutton" type="submit" name="Submit" value="Submit Form">
</form>
<button id="addnew" name="addnew" value="Add new item">Add new entry</button>
<input type="hidden" id="items" name="items" value="1" />
<br>
</div>
</body>
</html>
PHP:
<?php
for( $i = 0; $i <= $count; $i++ )
{
date_default_timezone_set('America/New_York');
$today = date("m.d.y");
$area0 = $_POST['area'.$i];
//the data
$data = "$today, $area0, $contractor, $hours, $project, $town, $street\n";
//open the file and choose the mode
$fh = fopen("users2.csv", "a");
fwrite($fh, $data);
//close the file
fclose($fh);
}
?>
Well, if this is all of the code and you didn't leave anything out I'd say you need to initialize $count.
Also, I'd probably open the file handle before the loop and close it after the loop instead of needlessly opening and closing it.
Edit - adding code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mdcstyle.css" />
<title>Submission form</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var currentItem = 0;
$('#addnew').click(function(){
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<tr><td>Area:<input class="textfield" name="area['+currentItem+']" id =" area['+currentItem+']" type="text" /></td><td>Contractor:<input class="textfield" name="contractor['+currentItem+']" id ="contractor['+currentItem+']"type="text" /></td></tr>';
$('#data').append(strToAdd);
});
});
//]]>
</script>
</head>
<body>
<div class="content">
<h2>header text</h2>
<p>Please complete this form for Udpates. Add a new line if you have more than one project.</p>
<form id="myform" name="form1" method="get" action="signup2.php">
<table class="dd" width="100px" id="data">
<tr>
<td>Area:<input class="textfield" name="area[0]" id="area[0]" type="text" /></td>
<td>Contractor:<input class="textfield" name="contractor[0]" id="contractor[0]" type="text" /></td>
</tr>
</table>
<input class="subbutton" type="submit" name="Submit" value="Submit Form">
</form>
<button id="addnew" name="addnew" value="Add new item">Add new entry</button>
<input type="hidden" id="items" name="items" value="1" />
<br>
</div>
</body>
</html>
php:
<?php
$area = $_GET['area'];
$count = count($area);
//open the file and choose the mode
$fh = fopen("users2.csv", "a");
for( $i = 0; $i <= $count; $i++ )
{
date_default_timezone_set('America/New_York');
$today = date("m.d.y");
$area0 = $area[$i];
//the data
$data = "$today, $area0, $contractor, $hours, $project, $town, $street\n";
fwrite($fh, $data);
}
fclose($fh);
?>
I just made the minimal edits, you aren't using anything but the area variable from your form, and there are a lot of values you have listed that aren't initialized anywhere (hours, project, etc). Also, I haven't got access to anyplace to do actual php code right now, and this is from memory, so there may be typos/etc.
I believed it is possible for me to simplify me previous project Click here!
to build an upload previewer so the editor can use it to see what he puts before upload to the server. (just a simple previewer without loading or saving to the databse with php script).
I use the same short Ajax and html form scripts and revise the jquery selector a little bit.
Now it is fine for me to see the text input. Everytime I insert new word the text area will show exactly what I do. However, something seemes to go astray with the image part. I try to use image selector (attr"src") to get the path and hope it could get the photo and show in the tag I build. However I could only get the values as path root such as (C:/images/img1.png) insead the whole picture. The following are scripts with mentioned issues:
<script language="JavaScript">
$(document).ready(function() {
$("form").keyup( function() {
var qtyVal = $('.qty').val();
var contentVal = $('.content').val();
var imageVal = $('input:file').val();
// get
$.ajax({
type: 'POST',
url: 'result1.php',
data: { qty : qtyVal,
content : contentVal,
image : imageVal,
},
success: function(data) {
// get XML value
$('#result').html($(data).find('total').text());
$('#result1').html($(data).find('content').text());
//I bleieved something goes wrong with the following script!
$('#test').attr("src").html($(data).find('upload').text());
}
});
return false;
});
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#news").hide();
$("#flip").click(function(){
$("#news").slideToggle("slow");
});
});
</script>
</head>
<body>
<div id="flip">previewer</div>
<div id="news" class="news">
<form method="post" enctype="multipart/form-data">
<table cellspacing="4" cellpadding="2">
<tr><th>title</th><th>content</th></tr>
<tr>
<td>
<div id="result2" class="box" style="width:300px; height:350px;">
//image block where I want to show the image by creating an imge tag>
<img src="#" class="test" /></div></td>
<td><div id="result" class="box" style="height:100px;"></div>
<div id="result1" class="box" style="height:250px; overflow:hidden;"></div>
</td></tr>
</div>
<td bgcolor="#CCCCCC"><input type="text" class="qty" name="qty" ></td>
<td bgcolor="#CCCCCC"><textarea type="text" class="content" name="content" ></textarea></td>
<td><input type="file" class="image" name="image"/></td>
<td bgcolor="#CCCCCC"><input type="submit" name="btnUpdate" value="update" />
<input type="submit" name="btnDelete" value="delete" />
</td>
</tr><br />
<tr><td colspan="5" align="center">div></td></tr>
</form>
</table>
I also include my short php script as the XML file for above Ajax:
<?php
// XML
header("Content-Type:text/html; charset=utf-8");
// GET the text and image values
$qty = (isset($_POST["qty"]) ) ? $_POST["qty"] : $_GET["qty"];
$content = (isset($_POST["content"]) ) ? $_POST["content"] : $_GET["content"];
$image = (isset($_POST["image"]) ) ? $_POST["image"] : $_GET["image"];
echo "<?xml version=\"1.0\" ?>";
echo "<caculation>";
echo "<total>" . "$qty" . "</total>";
// right now I can get the path back to the html page.
echo "<upload>"."$image"."</upload>";
echo "<content>"."$content"."</content>";
echo "</caculation>";
?>
I understand experts on SO had built powerful and professional Ajax previewer with multiple function. However, as an beginner and learner I am quite satisfied with my rookie and backward script. Hope someone can help with the bugs. Any possible advice or suggestion is welcome!
If you are using attr('src') then it will return the path only. If you want the whole image then set the response as image in the server for the get request or use an base64 string image and use data uri scheme to show the image
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!!!
I'm having a little problem getting my data to submit. I'm trying to make a simple chat box using PHP and Ajax, but whenever I try to submit data it will only post after it has been submitted several times. I'm hoping somebody could tell me the problem with me code.
I'm a very novice coder and this is my first time using this site so be nice if its an obvious mistake ^^"
The main chatbox:
<head>
<link href="CSS.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function sendmessage()
{
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var name=encodeURIComponent(document.getElementById("name").value);
var message=encodeURIComponent(document.getElementById("message").value);
xmlhttp.open("POST","insert.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("name="+name+"&message="+message);
}
</script>
</head>
<body>
<center>
<table width="600">
<tr>
<td height="400">
<center>
<iframe src ="output.php" width="580px" height="386px">
<p>Your browser does not support iframes.</p>
</iframe>
</center>
</td>
</tr>
<tr>
<td>
<form method="POST"></br>
  Name:      
<input type="text" id="name" autocomplete="off" size="15"/><br/><br/>
  Message:  
<input type="text" id="message" autocomplete="off" size="70"/>  
<input type="submit" value="Send" onclick="sendmessage()"/>
</form>
</td>
</tr>
</table>
</center>
</body>
The PHP file which reads the input data and writes it to a log file:
<?php
$name='<table><tr><td width="100%">'.$_POST['name']." Says:</td>";
$message="<table><tr><td>".$_POST['message']."</td></tr></table></br>\n";
$time="<td>".date("d/m/y-G:i")."</td></tr></table>";
$log = "log.file";
$write = fopen($log, 'a') or die("Can't open file");
fwrite($write, $name);
fwrite($write, $time);
fwrite($write, $message);
fclose($fh);
?>
I just grabbed your code and tested it out in my computer. Did some small changes but everything if working fine. I just commented
xmlhttp.execCommand('mceRemoveControl',false,'content');
then everything worked fine on FireFox.
Below you can see the code that I ran:
HTML:
<html>
<head>
<!--link href="CSS.css" rel="stylesheet" type="text/css"-->
<script type="text/javascript">
function sendmessage()
{
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var name=encodeURIComponent(document.getElementById("name").value);
var message=encodeURIComponent(document.getElementById("message").value);
xmlhttp.open("POST","insert.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//xmlhttp.execCommand('mceRemoveControl',false,'content');
xmlhttp.send("name="+name+"&message="+message);
}
</script>
</head>
<body>
<center>
<table width="600">
<tr>
<td height="400">
<center>
<iframe src ="output.php" width="580px" height="386px">
<p>Your browser does not support iframes.</p>
</iframe>
</center>
</td>
</tr>
<tr>
<td>
<form method="POST"></br>
  Name:      
<input type="text" id="name" autocomplete="off" size="15"/><br/><br/>
  Message:  
<input type="text" id="message" autocomplete="off" size="70"/>  
<input type="submit" value="Send" onclick="sendmessage()"/>
</form>
</td>
</tr>
</table>
</center>
</body>
</html>
PHP:
<?php
try{
$name='<table><tr><td width="100%">'.$_POST['name']." Says:</td>";
$message="<table><tr><td>".$_POST['message']."</td></tr></table></br>\n";
$time="<td>".date("d/m/y-G:i")."</td></tr></table>";
$file = "output.php";
$write = fopen($file, 'a') or die("Can't open file");
fwrite($write, $name);
fwrite($write, $time);
fwrite($write, $message);
fclose($write);
}catch(Exception $err){
echo $err;
}
?>
I just tried in FireFox 3.6 Safari 5 and Chrome 6. I'm using a Mac so I didn't tried in IE. In those 3 browsers everything worked fine after the line that I told you at the beginning. Could you proved more details about your problem?
A good measure everyone should adopt is that of security, never explicitly trust your users to be nice and input precisely what you expect them. Always, always check POST and GET variables are safe before using them. Functions such as "strip_tags", "mysql_real_escape" (if you go and place these into a database), should be explored.
Okay, I've managed to fix the problem. It was as simple as changing the ajax asynchronism to false. Hopefully this should not create any other issued. Thanks guys!