ajax get and insert with php and mysql - php

Question

I have a page that has a form on it, when I click a button on the page it sends 3 variables to a layer(page_ref, template_ref, and box_id) via a javascript call.
Then with ajax I get some content from the mysql db with the variables and insert this into a text area on the layer.
The layer has a save button and when I click that I want to save the content of the textarea back to the db.
I can fill the textarea from the db no problem but am having problems pushing is back to the db.
The problem I have is sending the javascript variables to the ajax update page as they need to be passed to php varriables.
heres what I have
on the main page I call a javascript function
edit_box('show',i,'<? echo $page_ref; ?>','<? echo $template_ref; ?>');
in the layer I have this
<style type="text/css">
#popupbox
{
padding:0;
width: 99%;
height: auto;
margin: 0px auto;
position:absolute;
background: #FBFBF0;
border: solid #000000 2px;
z-index: 9000;
font-family: arial;
visibility: hidden;
}
</style>
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
<script>
//Browser Support Code
function get_edit_content(box_id,page_ref,template_ref)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("edit_content").innerHTML=xmlhttp.responseText;
var area1 = new nicEditor({fullPanel : true}).panelInstance("edit_content",{hasPanel : true});
}
}
var queryString = "?box_id=" + box_id + "&page_ref=" + page_ref + "&template_ref=" + template_ref;
xmlhttp.open("GET","get_content.php" + queryString,true);
xmlhttp.send();
}
$("#sub").click( function()
{
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info)
{
$("#result").html(info);
});
clearInput();
});
$("#myForm").submit( function()
{
return false;
});
function clearInput()
{
$("#myForm :input").each( function()
{
$(this).val('');
});
}
function edit_box(showhide,box_id,page_ref,template_ref)
{
if(showhide == "show")
{
get_edit_content(box_id,page_ref,template_ref);
document.getElementById('popupbox').style.visibility="visible";
}
else if(showhide == "hide")
{
document.getElementById('popupbox').style.visibility="hidden";
}
}
</script>
<div id="popupbox">
<form id="myForm" action="update_textarea.php" method="post">
<input type="hidden" name="page_ref" value="<? echo $page_ref; ?>" />
<input type="hidden" name="template_ref" value="<? echo $template_ref; ?>" />
<input type="hidden" name="box_id" value="<? echo $box_id; ?>" />
<textarea name="edit_content" id="edit_content" style="width: 500px; height:500px;"></textarea>
<center>close</center>
<button id="sub">Save</button>
</form>
</div>
then I have get_contents page
<?php
include("connect.php");
$page_ref = $_GET['page_ref'];
$template_ref = $_GET['template_ref'];
$box_id = $_GET['box_id'];
$sql = "SELECT * FROM site_content WHERE page_ref='$page_ref' AND template_ref='$template_ref' AND box_id='$box_id' AND box_type='text'";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo "<p>".$row['content']."</p>";
}
?>
and finally the update_textarea page
<?
include("connect.php");
$page_ref = $_POST['page_ref'];
$template_ref = $_POST['template_ref'];
$box_id = $_POST['box_id'];
$edit_content = $_POST['edit_content'];
if(mysql_query("UPADTE site_content SET content='$edit_content' WHERE page_ref='$page_ref' AND template_ref='$template_ref' AND box_id='$box_id' AND box_type='text'"))
{
echo "Successfully Inserted";
}
else
{
echo "Insertion Failed";
}
?>

Answer 1

I realised that i needed to set the values of the hidden inputs in the ajax call after
document.getElementById("edit_content").innerHTML=xmlhttp.responseText;
by adding
document.getElementById("box_id").value = box_id;
etc