forms

[Woodburn2006]

i have a blog on one of my sites, but i want to be able to edit entrys using ajax. so that the user will click a link below the entry and the entry will reload into a textbox so that it can be edited. the text can now be edited then when submit is clicked the page reloads back to normal again with the edited post.

 

does anybody know any good tutorials or ways i can do this? i want a tutorial that explains everything so that iu can understand it and use it for other areas of the site.

 

thanks alot

[fanfavorite]

I would suggest learning AJAX http://www.w3schools.com/Ajax/Default.Asp and then figure out how to do your example.  I doubt you will find any scripts exactly what you are looking for, but if you learn Ajax, you can build it yourself. 

[xtopolis]

the term is called "inline editing"

 

There was a site that had good examples of this, but I can't remember.  Google that term..

[Woodburn2006]

thanks for your suggestions but the inline editor looks good but is out of my league for now and i want to be able to understand it.

 

i have learnt bits of ajax, i have a working example of some i have done here: http://travelling.dw20.co.uk/?go=photos

 

but i think the main problem is that i do not understand how i can pass the form values through ajax into my php script. i have what i want working at the moment but just in php.

 

you can see an example here: http://travelling.dw20.co.uk

 

login as: egg

pass: egg

 

and edit a form post then you can see what i want to happen in ajax

[fanfavorite]

If you have an understanding of how Ajax works, than I would set up the script without the passing of the form values and post and we can help you further. 

 

If you want to send POST variables via AJAX, trying something like:

 

//Your opening form field

<form enctype="multipart/form-data" action="javascript:get(document.getElementById('myform'));" name="myform" id="myform" method="post">

//rest of your form

 

//functions (in same file as your AJAX requests)

function makePOSTRequest(url, parameters) {

xmlHttp=GetXmlHttpObject();

      if (xmlHttp==null){

alert ("Browser does not support HTTP Request");

return;

}

var url="pageinfo.php";

url=url+"?page=contact.php";

xmlHttp.onreadystatechange=function () {

stateChange("pagecontent");

};

      xmlHttp.open("POST",url,true);

      xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

      xmlHttp.setRequestHeader("Content-length", parameters.length);

      xmlHttp.setRequestHeader("Connection", "close");

      xmlHttp.send(parameters);

}

 

function get(obj) {

var poststr = "submit=" + escape(encodeURI(document.getElementById("submit").value )) +"&dp=" + escape(encodeURI(document.getElementById("department").value )) +"&fn=" + escape(encodeURI(document.getElementById("firstname").value )) +"&ln=" + escape(encodeURI( document.getElementById("lastname").value ))+"&email=" + escape(encodeURI( document.getElementById("email").value ))+"&phone=" + escape(encodeURI( document.getElementById("phone").value ))+"&sub=" + escape(encodeURI( document.getElementById("subject").value ))+"&msg=" + escape(encodeURI( document.getElementById("msg").value ));

      makePOSTRequest('post.php', poststr);

}