Ajax dynamic form

Posted on 2009-02-11
Last Modified: 2012-05-06
Hi all,

I am to develop a form which using Ajax to submit data, the traditional way I used as it has static Text field and with onKeyUp for user to input something. But recently I found that there've some websites using a dynamic method as :

1. User click the Text, for example: I am a boy
2. "I am a boy" change to a text field to let user to change content directly
3. The cursor leaves the text field, record updated.
(The most usage on this techni. I found as Facebook)

I believed it's something about Ajax, since I am new to that, I would like to know how to do this? is that using a CSS layer control? (when click, change to viewing Form layer)

Any hints for me to reach that?

Many Thanks,
Question by:ericfkw
    1 Comment

    Accepted Solution

    hi Eric,

    here's simple way.

    var editMode = false;
    function changeThis(obj)
    	if(!editMode) {
    		editMode = true;
    		obj.innerHTML = "<input onblur='saveAndChangeThis(this)' type=text value='"+obj.innerHTML+"'>";
    function saveAndChangeThis(obj)
    	obj.parentNode.innerHTML = obj.value;
    	editMode = false;
    <span id=spnContent onclick=changeThis(this)>I am a boy</span>

    Open in new window


    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    Hello World !, Thanks : My Sincere thanks to @Michael Male who encouraged me to write an article on this in my  blog ( Introduction:       There are several technical issues a developer may face in his…
    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    This video is in connection to the article "The case of a missing mobile phone (". It will help one to understand clearly the steps to track a lost android phone.
    In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor ( If you're interested in additional methods for monitoring bandwidt…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now