[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 373
  • Last Modified:

Ajax dynamic form

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,
Eric
0
ericfkw
Asked:
ericfkw
1 Solution
 
cyb3r_j0k3rCommented:
hi Eric,

here's simple way.

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

Open in new window

0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now