[SOLVED] Adding text to page using javascript + input box

[idire]

Right, not sure if this is possible.

 

If i asked a user to enter a username into an input box, could javascript take that username (without submiting the form) and add that username to a piece of text undernearth

 

i.e. they enter their username and:

 

@email.co.uk -> username@email.co.uk

 

 

Thanks

[rhodesa]

oh course...something like this?

 

<script type="text/javascript">
  function addText ( ) {
    var text = document.getElementById('my_input').value;
    var ele = document.getElementById('my_text');
    ele.innerHTML += text + '<br />';
  }
</script>
<input type="text" id="my_input" /> <input type="button" value="Add" onclick="addText();" />
<div id="my_text"></div>

[idire]

Thanks

 

Is it possible without the button, ie it appearing as you type?

[rhodesa]

yup...code is even shorter...you can use onkeyup...just make sure you set the innerHTML instead of appending it:

 

<input type="text" onkeyup="document.getElementById('my_text').innerHTML = this.value;" />
<div id="my_text"></div>

 

 

[idire]

Thanks, will try the code and let you know in a few minutes

[idire]

Thanks it works, just one other thing:

 

how do I make it so the div doesnt caus the text before it and after it to go on a new line?

 

This will send a unique link by email to: <div id="username">yourusername</div>@email.com

 

becomes:

 

This will send a unique link by email to:

yourusername

@email.com

 

 

Thanks for the help

 

Worked it out myself Changed <div> to <span>

Thanks for the help

 

[JesuZ]

Hello, I'm new face in here...

Found this topic via Google, and this helped me kind of lot...

 

I've kind of code where should add new fields by clicking button, for sending more information to php-script.

<div id="areas">
  <p>Tiles between: <input name="minValues[]" type="text" id="min" size="5" /> - <input name="maxValues[]" type="text" id="max" size="5" /></p>
</div>

Using script below for onClick-action

function addRow() {
var elem = document.getElementById('areas');
var newText = '<p>\nTiles between:\n<input name="minValues[]" type="text" id="min" size="5" /> - <input name="maxValues[]" type="text" id="max" size="5" />\n</p>\n';
elem.innerHTML += newText;  
}

 

I've little problem, that if I've already entered some values to old fields, and add a new one,

all click will clear all older fields values also.

 

How might I could avoid that?