ajax on click update form content - php

Question

This is my form.
If i click the status content like progress or dsgs a textfield should appear. If i type text in it and click outside or press enter the old content should updated with the new one. I need it to be done with ajax and php. I am a beginner in php and ajax. Any reference or how can i do this?
This is my code for add status
$insert_task = "INSERT INTO `tbl_task` (`intProjectid`,`intUserid`,`dtDate`,`dtFinishdate`,`varIssue`,`varStatus`,`varNeedhelp` )VALUES ('".$id."','".$userid."','".$dtdate."','".$dtfinish."','".$issue."','".$status."','".$help."');";
$insert_query=mysql_query($insert_task);

Answer 1

You didn't give me anything but I've tried to implement something by guessing and hope if it doesn't solve your problem but at least it will help you. Following code is for your ajax functionality, you can put it inside the head tag of your page between script tags-
$(document).ready(function(){
var eventFlag=false;
var originalText='';
$('#mytable tr td span').click(function(e){
e.stopImmediatePropagation();
$(this).siblings().show().focus();
$(this).hide();
eventFlag=false;
originalText=$(this).siblings().val();
});
$('#mytable tr td input').blur(function(e){
if(!eventFlag && validate($(this))) doAjax($(this));
else
{
$(this).siblings().show();
$(this).hide();
}
});
$('#mytable tr td input').keypress(function(e){
e.stopImmediatePropagation();
var code = (e.keyCode ? e.keyCode : e.which);
if(code==13)
{
if(validate($(this)))
{
doAjax($(this));
eventFlag=true;
}
else
{
$(this).siblings().show();
$(this).hide();
}
}
});
function validate(input)
{
console.log(input.val()+" "+originalText);
if(input.val()!='' && input.val()!=originalText)
return true
else return false;
}
function doAjax(input)
{
var formData="proId="+input.attr('id')+"&text="+input.val();
$.ajax({
type: "POST",
url: "update.php",
data: formData,
success: function(data){
if(data==1)
{
input.siblings().text(input.val()).show();
input.hide();
}
else
{
input.siblings().show();
input.hide();
alert("something Wrong !");
}
},
error:function (xhr, ajaxOptions, thrownError){
alert("Error:"+xhr.status+" "+thrownError);
}
});
}
});
And I guessed your form could be something like this
<form action="#" method="post">
<table id="mytable">
<thead>
<tr>
<th>Issue</th><th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Login</td><td id="1"><span>Progress</span><input id="1" type="text" value="Progress" /></td>
</tr>
<tr>
<td>Something Else</td><td id="2"><span>Anything</span><input id="2" type="text" value="Anything"/></td>
</tr>
</tbody>
</table>
</form>
Put this inside your head or stylesheet (without style tag)
<style>
#mytable tr td input{display:none;}
</style>
And your update.php file should be something like
<?php
$proId = $_POST['proId'];
$text = $_POST['text'];
$update_task="update tbl_task set varStatus='".$text."' where intProjectid=".$proId;
if(mysql_query($update_task))
{
echo "1";
}
else
{
echo "0";
}
?>
I've tested it and working. The id I've used in the form is by assuming that you have id's for each of your status and you should update instead of inserting to change the status. let me know if it helps or if you need more help, I'll be on touch. Thanks!