+ 1

how do i add a new p tag to this code each time text is entered in the input ?

<!DOCTYPE html> <html> <head> </head> <body> <form id="form1"> Name:<input name="name" type="text" size="20"> <button onclick="outputname()">submit</button> </form> <p id="demo"></p> <script> function outputname(){ var x,y,name; x = document.getElementById("form1"); y = x.elements["name"].value; document.getElementById("demo").innerHTML = "Hello "+ y +"<br>"; document.getElementById("demo").innerHTML += "How are you today " + y + "? "; this.event.preventDefault(); } </script> </body> </html>

3rd Jul 2017, 8:24 AM
Hoeft Brian
Hoeft Brian - avatar
12 Answers
+ 4
Change <p id="demo"></p> by <div id="demo"></div>, then your JS as that: document.getElementById("demo").innerHTML += "<p>Hello "+y+"<br>How are you today "+y+"?</p>"; By this way, you're keeping previous innerHTML content, and appending the new <p> content... However, you need to concanetate self closed tags at once, because each time the value is updated, the innerHTML string is evaluated and parsed by browser, so not closed tags will be closed implicitly; writting: document.getElementById("demo").innerHTML += "<p>Hello "+y+"<br>"; document.getElementById("demo").innerHTML += "How are you today "+y+"?</p>"; ... will result as: <p>Hello value_of_y</p><br><How are you today value_of_y</p> Wich is not strictly what's expected :P
3rd Jul 2017, 8:53 AM
visph
visph - avatar
+ 5
When window is reloaded, the new document scripts are running, and the 'onload' window event is fired when all document and linked ressources are parsed and loaded... With JS you can dynamically initialize the fields values at this time ^^ (but there's also a <form> html attribute to specify to not remember fields values: 'autocomplete="off"', or you can use the reset() method of form ;P)
3rd Jul 2017, 9:21 AM
visph
visph - avatar
+ 4
Use reset() method at window.onload event: window.onload = function() { document.getElementById('myformID').reset(); } ... or directly in the 'onload' event of the <body>: <body onload="document.getElementById('myformID').reset();">
3rd Jul 2017, 9:27 AM
visph
visph - avatar
+ 3
Anyway, if your question is about replacing the button by a call to the function each time the value of text <input> is modified, you can handle it by many ways: + use of 'onchange' event from the text <input>, wich is fired on losing focus (equivalent to 'onblur' event), meaning the event occurs only when the user click outside of the text <input> + use the Html5 new 'oninput' event, wich is fired each time the text <input> value change, without waiting for focus lost + use the old workaround (previous to Html5) to get the changed value before focus lost: use the 'onkeyup'/'onkeydown' events...
3rd Jul 2017, 8:59 AM
visph
visph - avatar
+ 1
@Junaid it makes it so the window doesn't reload right after the input is displayed. before i added it every time i enterd something it would flash on the screen then disappear.
3rd Jul 2017, 9:05 AM
Hoeft Brian
Hoeft Brian - avatar
+ 1
just refresh the page and it will reset
3rd Jul 2017, 9:14 AM
Hoeft Brian
Hoeft Brian - avatar
+ 1
can you show the code you're using?
3rd Jul 2017, 9:19 AM
Hoeft Brian
Hoeft Brian - avatar
+ 1
Do i have to use the reset() method just with the onclick submit button .When i submit it it will reset the whole form back to normal
3rd Jul 2017, 9:23 AM
Junaid Shah
Junaid Shah - avatar
0
can you explain this.event.preventdefault
3rd Jul 2017, 8:59 AM
Junaid Shah
Junaid Shah - avatar
0
Can anyone tellme here does js has a refresh event.So that everytime window is reloaded form fields gets back to normal
3rd Jul 2017, 9:11 AM
Junaid Shah
Junaid Shah - avatar
0
It doenst work that way buddy
3rd Jul 2017, 9:18 AM
Junaid Shah
Junaid Shah - avatar
0
I just want that everytime when i refresh the page all form fields should retain their placeholders again.
3rd Jul 2017, 9:20 AM
Junaid Shah
Junaid Shah - avatar