Edit In Place?

[dzhax]

I am working on a record editor for a widget. I have everything printing out on the page but now i need to make it so the user can update the record. The data is printing to a table and my idea was using the onclick=" " of the TD to edit that field. Any idea how i could use java script to take the text in a TD and replace it with a text field that contains the text that was in the TD so it can be edited? Once I get this part the saving and updating the record should not be hard. My idea was something like this:

function editRecord(fightID, editField){	currentValue = document.getElementById(editField).innerHTML;	document.getElementByName(editField+"_"+fightID).innerHTML = '<input type="text" value="'+currentValue+'" />';   }

<td class="editable" onclick="editRecord('<? echo $filterRow['id']; ?>', this.id)" name="fighterName1_<? echo $filterRow['id']; ?>" id="fighterName1" ><? echo $filterRow['fighterName1']; ?></td>

But it simply is not working... I know everything is sending to the function properly because I through in an alert(' ') call before the document.getElementByID(... and it loads all of the information just fine. Any help appriciated

[Drycodez]

document.getElementByName(editfield+'_'+fightID).innerHTML='<input type=\"text\" value=\"+currentValue+\" />'Change it to that and give it a try!

[JamesB]

document.getElementByName() should be document.getElementsByName(), then add [0] before the .innerHTML property to refer to the first match found.

[dzhax]

@ O. Samuel - I replaced mine with yours and still no dice. @ JamesB - where exactly does the [0] go? I tried this and it also did not work:

document.getElementsByName(editfield+'_'+fightID)[0].innerHTML='<input type=\"text\" value=\"+currentValue+\" />'

[JamesB]

yeah the [0] goes there. try changing the <input> line back to your original:

'<input type="text" value="'+currentValue+'" />'

the quotation marks don't need escaping as the characters used to define the string are apostrophes

[dzhax]

It still not working... I am thinking its just not running for some reason.

[JamesB]

document.getElementsByName(editfield+'_'+fightID)[0].innerHTML

editfield will need to be editField if the other editField variables have a capital f

[dzhax]

ok now its working... I hate case sensitive coding lol. with the current code if i click into the field when the text field is in there it continues to add more code with different text. how would i make it check if there is a text box in the field so it doesnt keep doing that?

[JamesB]

this will check if an element's first child node is type element:

var element = document.getElementsByName(editField+'_'+fightID)[0];if (element.firstChild.nodeType == 1) { // element node, eg. <input>}else { // other node type, eg. text}

note that using this code means the <input> line cannot have any "white-space" before the < sign, this would make the code fail:

.innerHTML = ' <input

but this is fine: (as you have it atm)

.innerHTML = '<input

any white-space before the < would cause element.firstChild to always return a text node. http://www.w3schools.com/Dom/dom_document.asphttp://www.w3schools.com/Dom/dom_nodetype.asp

[dzhax]

thanks james that worked like a charm!

[ShadowMage]

FWIW, you would probably be better to have both an input and a span inside the td element and toggle their displays. For example, the span will contain the regular text. When it's clicked, you get it's text, put that into the input, hide the span and show the input. When the input loses focus, do the reverse.