...

View Full Version : Problem with dynamic edit box script



carlton
02-15-2007, 07:19 PM
Hey guys!

I've written a script that will make a form field appear to be regular text until it is clicked on - then it becomes editable (by becoming a textarea with the same value) - then when the user is done editing the field, it will return to being normal text. (This is hard to word, so I'm sorry if it's confusing)

Anyway, this script works fine. The problems come up when I am trying to make a function to make creating the dynamic fields a little easier. I have double checked my source code, and it seems right, but I'm still getting errors.

My source code:


<html>
<head>
<script language="javascript">
//Dynamic edit box generator
//Coded by Carlton Cook


function makeEditable(inputId,textId) //where inputId is the textbox and textId is the span
{
document.getElementById(inputId).style.display = 'inline';
document.getElementById(inputId).value = document.getElementById(textId).innerHTML;
document.getElementById(textId).style.display = 'none';
document.getElementById(inputId).focus();
}

function backToNormal(inputId,textId)
{
document.getElementById(inputId).style.display = 'none';
document.getElementById(textId).innerHTML = document.getElementById(inputId).value;
document.getElementById(textId).style.display = 'inline';
document.getElementById(inputId).style.display = 'none';
document.getElementById(inputId).blur();
}

function addEditBox(boxId,boxTitle,initValue)
{
//if (boxId="") {return;} //A box with no ID will cause havoc on the page.
//if (initValue="") {initValue=" "}; //A blank value can also cause problems selecting the box.


document.write("<span id=\"" + boxId + "SpanContainer\" onMouseOver=\"makeEditable('" + boxId + "Text','" + boxId + "Span'\");"); //Write out the initial span tag
document.write(" onMouseOut=\"backToNormal('" + boxId + "Text','" + boxId +"Span');\">" + boxTitle); //continue with the span tag...
document.write("<input type=\"text\" id=\" " + boxId + "Text\" value=\"" + initValue + "\" style=\"display: none;\"><span id=\"" + boxId + "Span\" style=\"display: inline;\">" + initValue + "</span></span><br />");


}


</script>
</head>
<body>

<script type="text/javascript">
addEditBox('myName','Name: ','Carlton');
addEditBox('myAge','Age: ','18');
</script>

</body>


These are the errors I'm getting:
(the first error is referring to the first uncommented line in addEditBox() )

Error: missing ) after argument list
Source File: file:///Z:/vcsweb%202007/graduation%20requirements/dynEdit.html
Line: 1, Column: 37
Source Code:
makeEditable('myNameText','myNameSpan'


Error: document.getElementById(inputId) has no properties
Source File: file:///Z:/vcsweb%202007/graduation%20requirements/dynEdit.html
Line: 18

This really has me stumped. I've check my source code on the first error and there is definitely a ")" in the document.write. As for the second error, I'm really not sure what is causing that.

Any help would be greatly appreciated!

Thanks,
Carlton

MikeFoster
02-15-2007, 08:06 PM
Hi carlton, Welcome to Coding Forums!

Note that you need "==" instead of "=" here:


//if (boxId=="") {return;} //A box with no ID will cause havoc on the page.
//if (initValue=="") {initValue=" "}; //A blank value can also cause problems selecting the box.


Also note my change in red here:


// document.write("<span id=\"" + boxId + "SpanContainer\" onMouseOver=\"makeEditable('" + boxId + "Text','" + boxId + "Span'\");"); //Write out the initial span tag
document.write("<span id=\"" + boxId + "SpanContainer\" onMouseOver=\"makeEditable('" + boxId + "Text','" + boxId + "Span')\""); //Write out the initial span tag

carlton
02-15-2007, 09:50 PM
Thanks for the help, Mike!
Now it seems the only thing keeping it from working is the

Error: document.getElementById(inputId) has no properties
Source File: file:///C:/Documents%20and%20Settings/Flare/My%20Documents/web/dynamicEditExternal.html
Line: 12

Firefox is saying the error is on this line:

document.getElementById(inputId).style.display = 'none';

After some googling, I read that this error will happen when I try to reference to a null object.
Is the problem that I'm not passing the textbox ID to the function correctly?

Thanks,
Carlton

MikeFoster
02-16-2007, 07:58 PM
Is the problem that I'm not passing the textbox ID to the function correctly?

or that an "incorrect" ID is being passed.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum