Javascript - How to add form's input into the dom properly?

Question

I'm just trying to make a simple javascript form where everytime you type and submit something, it shows up in the page.

<form id="myForm">
   <input id="text" type="text" name="name" value="">
   <input id="submit" type="submit">
</form>

javascript:

 document.getElementById("myForm").addEventListener('submit', function(){

        var input = document.getElementById("text")
        var output = input.value;

        var printOutput = document.createElement('h1');
        printOutput.innerHTML = output;
        document.body.appendChild(printOutput);

 });

This shows up for a second then disappears. I understand it's happening because the dom manipulation is happening inside the submit event. But I'm not sure how to go around that.

My first instinct was to use

return output;

then reference the whole function once I appendChild from outside it. But that didn't work either. I'm guessing cause It's an Eventlistener and not a normal function... any ideas on how to go with this?

Try adding `return false;` to the end of your current submit listener callback. It sounds like your form is still submitting despite the opposite being desired. — evolutionxbox, Aug 17 '17 at 09:37
https://www.google.com/search?q=javascript+cancel+form+submit+event — CBroe, Aug 17 '17 at 09:38
use `preventDefault()` so that the form won't submit and the page will not load — Semi-Friends, Aug 17 '17 at 09:38
use input type = button instead of input type =submit will also help check my answer below for more details. — gourav bajaj, Aug 17 '17 at 09:57

score 1 · Answer 1 · answered Aug 17 '17 at 09:38

1

Add return false; at the end of the event listener. This stops the submit from actually happening which refreshes the page

answered Aug 17 '17 at 09:38

CaptainCarl

3,411
6
38
71

score 1 · Answer 2 · answered Aug 17 '17 at 09:38

Try this instead:

   document.getElementById("myForm").addEventListener('submit', function(event){
            event.preventDefault();

            var input = document.getElementById("text")
            var output = input.value;

            var printOutput = document.createElement('h1');
            printOutput.innerHTML = output;
            document.body.appendChild(printOutput);

     });

bluehipy · Accepted Answer · 2017-08-17T10:30:48.463

1

You are ignoring the form primordial sense that is to send data over a server.

You don't need aform for what you intend. you need only input elements and a handler on the button.

function handler (){ 

  var input = document.getElementById("text")
  var output = input.value;

  var printOutput = document.createElement('h1');
  printOutput.innerHTML = output;
  document.body.appendChild(printOutput);
   document.getElementById("text").value='';

}

document.getElementById("submit").addEventListener('click', handler);
   document.getElementById("text").addEventListener('keypress', function(e){ (e.charCode == 13) && handler();});

<div id="myForm">
  <input id="text" type="text" name="name" value="">
  <input id="submit" type="submit">
</div>

edited Aug 17 '17 at 10:30

answered Aug 17 '17 at 09:41

bluehipy

2,254
1
13
19

Thanks! You're right, it worked once I took out the forms! Only problem without it though is that the input doesn't react to the enter key anymore, and keeps what you write even after you 'submit' – Magdi Gamal Aug 17 '17 at 10:22
well :) you can listen for the `keypress` as well and `reset` the value programmatically. – bluehipy Aug 17 '17 at 10:25
1

Perfect! Thanks so much :) – Magdi Gamal Aug 17 '17 at 10:34

score 1 · Answer 4 · answered Aug 17 '17 at 09:55

1

the simplest way of getting input and display on the same page is

function display()
{
var input=document.getElementById("text").value;
document.getElementById("display").innerHTML=input;
}

<form id="myForm">
   <input id="text" type="text" name="name" value="">
   <input id="submit" type="button" onclick=display() value="submit">
   <div id="display"></div>
</form>

if you want to display multiple inputs i.e. each input entered by the user.

document.getElementById("display").innerHTML += input+"<br>";

Note: Always try to write easiest and shortest code for the optimized result.

answered Aug 17 '17 at 09:55

gourav bajaj

170
10

Thanks! That also worked and you're right it looks so much cleaner with the event in the html instead. Although now I'm trying to fix that the enter key doesn't 'submit' the value anymore – Magdi Gamal Aug 17 '17 at 10:28
Refer : https://stackoverflow.com/questions/905222/enter-key-press-event-in-javascript accept the answer if u are satisfied. – gourav bajaj Aug 17 '17 at 10:50

score 1 · Answer 5 · edited Aug 17 '17 at 10:21

yes it behaves how it should. it's form and what it does it submits all information to new page. you didn't provide action='' parameter and means it sends information on same page. when you click submit what happens is first you append h1 element and then it reloads, that's why it disappears. if you don't have other page to submit information get rid of forms.

<input id="text" type="text" name="name" value="">
<input id="submit" onclick='return getoutup();'  type="submit">
<h1 id='output'></h1>

<script type="text/javascript">

function getoutup(){
document.getElementById('output').innerText=document.getElementById('text').value;
return false;
}

</script>

so you see that i have pre-created h1 tag, so you don't need much coding to append as function goes. just pre create with value of none and then change with one line of code. hope it helps. maybe it's not correct answer kind of changed your way.

Javascript - How to add form's input into the dom properly?

5 Answers5