I have two files
One is myprofile.php that makes an AJAX operation with a php script on the server - handleAjax.php
When executing the myprofile.php it seems to be everything ok until trying to edit a row.
It's supposed to change the "edit" button to "save" and it's properties so that the new "save" button will onclick execute the ajaxUpdate() function, which supposed to send a data to the server, where it handled by handleAJAX.php
Instead of it when pressing the "edit" button it changes the button to "save" and without any additional click executes the ajaxUpdate(). In addition it, the data is not sent to the server correctly (it appears that $_POST['columnName'], $_POST['email'] and $_POST['updatedText'] are undefined).
I have spent a couple of hours trying to understand where is the problems, but without a success.
Please help.
Thank you in advance.
Code:
<?php
session_start();
include 'funcs.php';
include 'paramslist.php'
?>
<html>
<head><title>My profile</title>
<script type="text/javascript">
function ajaxEditRow(rowName,email){
var prevText = document.getElementById(rowName).innerHTML;
document.getElementById(rowName).innerHTML = "<input type='text' id='"+rowName+"' value='"+prevText+"' />";
var rowName1 = rowName+"1";
document.getElementById(rowName1).innerHTML = "";
document.getElementById(rowName1).innerHTML = "<button type='button' onclick='ajaxUpdate(\""+email+"\",\""+rowName+"\")'>save</button>";
}
function ajaxUpdate(userEmail, rowName){
document.getElementById('test1').innerHTML = "started ajax update with params:";
document.getElementById('test2').innerHTML = "userEmail="+userEmail+" rowName="+rowName;
var updatedText = document.getElementById(rowName).innerHTML;
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(rowName).innerHTML="";
document.getElementById(rowName).innerHTML=xmlhttp.responseText+"<label id='"+rowName+"1"+"'><button type='button' name='editRow' value='edit' onclick='ajaxEditRow("+"\""+rowName+"\""+")'>edit</button></label><br />";
}
}
var params = "updatedText="+updatedText+"&email="+userEmail+"&columnName="+rowName;
xmlhttp.open("POST","handleAjax.php",true);
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.send(params);
}
function vasya(){
document.getElementById('test3').innerHTML = "Vasya started";
}
</script>
</head>
<body>
<?php
/*To Do
Retrive and show the page of the user */
if (array_key_exists('Email', $_SESSION))
{
foreach ($paramsList as $key => $value)
{
if (trimspaces($key) != "Password")
{
if (trimspaces($key) != "Email")
{
echo $key.": <label id='".trimSpaces($key)."'>".$_SESSION[trimSpaces($key)]."</label>
<label id='".trimSpaces($key)."1"."'><button type='button' name='editRow' value='edit'
onclick='ajaxEditRow("."\"".trimSpaces($key)."\",\"".$_SESSION['Email']."\"".")'>edit</button></label><br />";
}
else{
echo $key.": ".$_SESSION[trimSpaces($key)]."<br />";
}
}
}
?>
<?php
}
else
{
echo "You are not logged in. Please go back and log in.";
}
?>
<label id='test1' ></label>
<label id='test2'></label>
<label id='test3'></label>
</body>
</html>
handleAjax.php
PHP Code:
<?php
$email = $_POST['email'];
$updatedText = $_POST['updatedText'];
$columnName = $_POST['columnName'];
$con = mysql_connect("localhost","root","XXX");
if (!$con)
{
echo "Couldn't connect....";
die('Could not connect: ' . mysql_error());
}
mysql_select_db("XXX", $con);
mysql_query("UPDATE Members SET ".$columnName."='".$updatedText."' WHERE Email = '".$email."'");
$data=mysql_query("SELECT '".$columnName."' FROM Members WHERE Email='".$email."'");
$info = mysql_fetch_array($data);
mysql_close($con);
foreach ($info as $key => $value)
echo $value;
?>
Before you post, read our: 
