+ 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>
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
+ 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)
+ 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();">
+ 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...
+ 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.
+ 1
just refresh the page and it will reset
+ 1
can you show the code you're using?
+ 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
0
can you explain this.event.preventdefault
0
Can anyone tellme here does js has a refresh event.So that everytime window is reloaded form fields gets back to normal
0
It doenst work that way buddy
0
I just want that everytime when i refresh the page all form fields should retain their placeholders again.
Often have questions like this?
Learn more efficiently, for free:
Hot today
time complexity
1 Votes
For loop
1 Votes
Any Other Solution?
1 Votes
Restoring lives
1 Votes
html
0 Votes