[RESOLVED] Copy Input content into a Span?

[@sh]

Guys,

I have input boxes and want to 'in realtime' copy the edits to the Input boxes into some Span fields that are on the page. I'm doing this by calling a Javascript function on each KeyUp on the text and textarea inputs.

I've written a function to which I can pass the formname, text field ID and span ID, but its not working, I'm guessing I've done something silly somewhere?

Here's the function...

function Ash_CopyInputToSpan(TheForm, TheInputSource, TheSpanDestination) {

var TheFormVar = document.getElementById(TheForm);
var TheInputSourceVar = TheFormVar.getElementsById(TheInputSource);
var TheSpanDestinationVar = getElementsById(TheSpanDestination);

TheSpanDestinationVar.value = TheInputSourceVar.value;
}

Here's how I'm calling it in one example (in an OnKeyUp)...

Ash_CopyInputToSpan(form_createbanner,AdvertTitle,Live_Title)

Really appreciate your help!

[johanafm]

Use a browser that gives you feedback about scripting errors (and why not other errors as well while you're at it). I recommend Firefox (https://developer.mozilla.org/En) and its error console (built in), and the excellent addon Firebug (just do a search for "firebug" (https://addons.mozilla.org/).

The error console will give you feedback about errors you've made, two of them taking a second each to fix once you know they are there, and thus being a complete waste of time pushing on others to debug.

As for the span element, it does not have a value attribute, so
/* That's way too long for me to type...
Also, the most common practice is to use lower case for the initial
character of variables and non-member functions. It's your choice though,
just be consistent (which I'm not here as you can see...) */
var sp = TheSpanDestinationVar;

// Remove everything previously in the span.
while(sp.childNodes.length > 0)
sp.removeChild(sp.firstChild);

sp.appendChild(document.createTextNode(TheInputSourceVar.value));


And a very good place to read up on javascript (https://developer.mozilla.org/en/JavaScript). Both the Gecko DOM reference and Core Javascript Reference are nice. Discrepancies does of course exist from other javascript engines, such as webkit or whatever microsoft calls theirs. Still, Mozilla's references often include some information about possible differences.

[@sh]

Thanks for your reply although I still don't have a fully functional solution, I've implemented the two lines you provided but still getting errors. I do actually use Firebug already and love it, its giving me this error...

Live_Title is not defined
Line 3

...Yet here's the span that does exist on the page...

<span id="Live_Title"></span>

See my original post for the full code above.

Regarding Variable names, I've never lowercased the first letter, it doesn't make sense to me, I guess everyone has their own coding style, mine is to capitalise each primary letter and start variables with 'The'.

Thanks for your help.

[@sh]

Ok, I've revised my original example now to use the innerHTML value instead? Feasible?

New function


function Ash_CopyInputToSpan(TheInputSource, TheSpanDestination) {

var TheInputSourceValueVar = document.getElementById(TheInputSource).value;
var TheSpanDestinationVar = document.getElementById(TheSpanDestination);

TheSpanDestinationVar.innerHTML = TheInputSourceValueVar;
}

And how to call is via my OnKeyUp...

Ash_CopyInputToSpan('AdvertTitle','Live_Title')

But via FireBug I get...

document.getElementById(TheInputSource) is null
http://www.***********.com/_inc_js.js
Line 9

[johanafm]

document.getElementById(TheInputSource)
... may very well return null, due to bad spelling, having removed that control etc. And if it returns null, you get
null.value which does not work.

Are you certain the first argument should be 'AdvertTitle', and not 'Advert_Title'? Anyway, this has to match an element id somewhere.

[@sh]

document.getElementById(TheInputSource)
... may very well return null, due to bad spelling, having removed that control etc. And if it returns null, you get
null.value which does not work.

Are you certain the first argument should be 'AdvertTitle', and not 'Advert_Title'? Anyway, this has to match an element id somewhere.

Ahhhhhh just discovered the issue - I had given the Form Input Textbox a NAME but not an ID...duhhh!! Its all working now based on my last example.

Thanks for your assistance here mate, I appreciate the pointers.